108 lines
2.5 KiB
TypeScript
108 lines
2.5 KiB
TypeScript
"use client";
|
|
|
|
import { Moon, Sun } from "lucide-react";
|
|
import {
|
|
createContext,
|
|
type ReactNode,
|
|
useContext,
|
|
useMemo,
|
|
useSyncExternalStore,
|
|
} from "react";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
type DashboardTheme = "light" | "dark";
|
|
|
|
type DashboardThemeContextValue = {
|
|
theme: DashboardTheme;
|
|
toggleTheme: () => void;
|
|
};
|
|
|
|
const storageKey = "webdev-dashboard-theme";
|
|
const themeChangeEvent = "webdev-dashboard-theme-change";
|
|
|
|
const DashboardThemeContext =
|
|
createContext<DashboardThemeContextValue | null>(null);
|
|
|
|
function isDashboardTheme(value: string | null): value is DashboardTheme {
|
|
return value === "dark" || value === "light";
|
|
}
|
|
|
|
function getStoredDashboardTheme(): DashboardTheme {
|
|
const storedTheme = window.localStorage.getItem(storageKey);
|
|
|
|
return isDashboardTheme(storedTheme) ? storedTheme : "light";
|
|
}
|
|
|
|
function getServerDashboardTheme(): DashboardTheme {
|
|
return "light";
|
|
}
|
|
|
|
function subscribeToDashboardTheme(onStoreChange: () => void) {
|
|
window.addEventListener("storage", onStoreChange);
|
|
window.addEventListener(themeChangeEvent, onStoreChange);
|
|
|
|
return () => {
|
|
window.removeEventListener("storage", onStoreChange);
|
|
window.removeEventListener(themeChangeEvent, onStoreChange);
|
|
};
|
|
}
|
|
|
|
export function DashboardThemeProvider({ children }: { children: ReactNode }) {
|
|
const theme = useSyncExternalStore(
|
|
subscribeToDashboardTheme,
|
|
getStoredDashboardTheme,
|
|
getServerDashboardTheme,
|
|
);
|
|
|
|
const value = useMemo<DashboardThemeContextValue>(
|
|
() => ({
|
|
theme,
|
|
toggleTheme: () => {
|
|
const nextTheme = theme === "dark" ? "light" : "dark";
|
|
window.localStorage.setItem(storageKey, nextTheme);
|
|
window.dispatchEvent(new Event(themeChangeEvent));
|
|
},
|
|
}),
|
|
[theme],
|
|
);
|
|
|
|
return (
|
|
<DashboardThemeContext.Provider value={value}>
|
|
<div
|
|
suppressHydrationWarning
|
|
className={cn(
|
|
"min-h-dvh bg-background text-foreground md:flex",
|
|
theme === "dark" && "dark",
|
|
)}
|
|
>
|
|
{children}
|
|
</div>
|
|
</DashboardThemeContext.Provider>
|
|
);
|
|
}
|
|
|
|
export function DashboardThemeToggle() {
|
|
const context = useContext(DashboardThemeContext);
|
|
|
|
if (!context) {
|
|
return null;
|
|
}
|
|
|
|
const isDark = context.theme === "dark";
|
|
const Icon = isDark ? Sun : Moon;
|
|
|
|
return (
|
|
<Button
|
|
className="w-full justify-start"
|
|
variant="ghost"
|
|
onClick={context.toggleTheme}
|
|
aria-pressed={isDark}
|
|
>
|
|
<Icon />
|
|
{isDark ? "Hellmodus" : "Dunkelmodus"}
|
|
</Button>
|
|
);
|
|
}
|