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"}`}
>
}