diff --git a/app/components/theme-provider.tsx b/app/components/theme-provider.tsx new file mode 100644 index 0000000..1dd6834 --- /dev/null +++ b/app/components/theme-provider.tsx @@ -0,0 +1,100 @@ +import { createContext, useContext, useEffect, useState } from "react"; + +type Theme = "dark" | "light" | "system"; + +type ThemeProviderProps = { + children: React.ReactNode; + defaultTheme?: Theme; + storageKey?: string; +}; + +type ThemeProviderState = { + theme: Theme; + setTheme: (theme: Theme) => void; +}; + +const initialState: ThemeProviderState = { + theme: "system", + setTheme: () => null, +}; + +const ThemeProviderContext = createContext(initialState); + +const isLocalStorageAvailable = () => { + return ( + typeof window !== "undefined" && + typeof window.localStorage !== "undefined" && + window.localStorage !== null + ); +}; + +export function ThemeProvider({ + children, + defaultTheme = "system", + storageKey = "vite-ui-theme", + ...props +}: ThemeProviderProps) { + const [theme, setTheme] = useState(() => { + if (isLocalStorageAvailable()) { + const storedTheme = localStorage.getItem(storageKey) as Theme; + return storedTheme || defaultTheme; + } + return defaultTheme; + }); + + useEffect(() => { + const root = window.document.documentElement; + + root.classList.remove("light", "dark"); + + if (theme === "system") { + const systemTheme = window.matchMedia("(prefers-color-scheme: dark)") + .matches + ? "dark" + : "light"; + + root.classList.add(systemTheme); + return; + } + + root.classList.add(theme); + }, [theme]); + + const value = { + theme, + setTheme: (theme: Theme) => { + localStorage.setItem(storageKey, theme); + setTheme(theme); + }, + }; + + return ( + + {children} + + ); +} + +export const useTheme = () => { + const context = useContext(ThemeProviderContext); + + if (context === undefined) + throw new Error("useTheme must be used within a ThemeProvider"); + + return context; +}; + +export const useDisplayedTheme = () => { + const { theme, setTheme } = useTheme(); + + if (theme === "system") { + return { + theme: window.matchMedia("(prefers-color-scheme: dark)").matches + ? "dark" + : "light", + setTheme, + }; + } + + return { theme, setTheme }; +}; diff --git a/app/components/user-dropdown.tsx b/app/components/user-dropdown.tsx index 8115d7f..0d1efb6 100644 --- a/app/components/user-dropdown.tsx +++ b/app/components/user-dropdown.tsx @@ -17,15 +17,13 @@ import { Settings, Sun, } from "lucide-react"; -// TODO: THEME -// import { useTheme } from "~/components/ui/theme-provider"; +import { useDisplayedTheme } from "~/components/theme-provider"; import { useNavigate } from "react-router"; import { logout, type User } from "~/lib/api"; import { useQueryClient } from "@tanstack/react-query"; export default function UserDropdown({ user }: { user: User }) { - // TODO: const { theme, setTheme } = useTheme(); - const [theme, setTheme] = useState("light"); + const { theme, setTheme } = useDisplayedTheme(); const [open, setOpen] = useState(false); const navigate = useNavigate(); diff --git a/app/root.tsx b/app/root.tsx index 358e28b..290656a 100644 --- a/app/root.tsx +++ b/app/root.tsx @@ -12,6 +12,7 @@ import "./app.css"; import { QueryClientProvider } from "@tanstack/react-query"; import queryClient from "~/lib/client"; import Toaster from "~/components/ui/sonner"; +import { ThemeProvider } from "./components/theme-provider"; export const links: Route.LinksFunction = () => [ { rel: "preconnect", href: "https://fonts.googleapis.com" }, @@ -51,7 +52,7 @@ export function Layout({ children }: { children: React.ReactNode }) { - {children} + {children}