Dark Mode Switch

Creates a context so you can embed the switch anywhere
Requires Icons, currently using lucide-react

Code

Context

import React, { createContext, useState, useContext } from "react";

const DarkModeContext = createContext();

export const DarkModeProvider = ({ children }) => {
  const [isDarkMode, setIsDarkMode] = useState(false);

  const toggleDarkMode = () => {
    setIsDarkMode((prevMode) => !prevMode);
  };

  return (
    <DarkModeContext.Provider value={{ isDarkMode, toggleDarkMode }}>
      {children}
    </DarkModeContext.Provider>
  );
};

export const useDarkMode = () => useContext(DarkModeContext);

Wrap your layout with the Provider from the Context:

<html lang="en">
  <UserProvider>
    <DarkModeProvider>
      <body className={`overflow-x-hidden`}>
        {/* <SVGBackground /> */}
        {children}
        <Toaster />
      </body>
    </DarkModeProvider>
  </UserProvider>
</html>

Actual switch:

// DarkModeSwitch.js
import { useDarkMode } from "@/app/dark-mode-context";
import { Label } from "@/components/ui/label";
import { Switch } from "@/components/ui/switch";
import { MoonStar, Sun } from "lucide-react";

export function DarkModeSwitch() {
  const { isDarkMode, toggleDarkMode } = useDarkMode();

  return (
    <div
      className={`flex items-center space-x-2 ${isDarkMode === true ? "text-white" : "text-black"}`}
    >
      <Switch
        id="theme-switch"
        checked={isDarkMode}
        onCheckedChange={toggleDarkMode}
      />
      <Label htmlFor="theme-switch">
        {isDarkMode ? <MoonStar /> : <Sun />}
      </Label>
    </div>
  );
}

Use Anywhere (within the context provider)

import { useDarkMode } from "@/app/dark-mode-context";


export function Dashboard() {
  const { isDarkMode } = useDarkMode();
  return (
    <div
      className={`flex min-h-screen w-full flex-col bg-muted ${isDarkMode === true ? "dark" : "light"}`}
    >
}

Dark Mode Switch

Code​

Code