|
| 1 | +import { useFetcher } from "@remix-run/react"; |
| 2 | +import { |
| 3 | + createContext, |
| 4 | + useCallback, |
| 5 | + useContext, |
| 6 | + useEffect, |
| 7 | + useState, |
| 8 | + type ReactNode, |
| 9 | +} from "react"; |
| 10 | +import type { ThemePreference } from "~/services/dashboardPreferences.server"; |
| 11 | + |
| 12 | +type Theme = "light" | "dark"; |
| 13 | + |
| 14 | +interface ThemeContextValue { |
| 15 | + theme: Theme; |
| 16 | + themePreference: ThemePreference; |
| 17 | + setThemePreference: (preference: ThemePreference) => void; |
| 18 | +} |
| 19 | + |
| 20 | +const ThemeContext = createContext<ThemeContextValue | undefined>(undefined); |
| 21 | + |
| 22 | +function getSystemTheme(): Theme { |
| 23 | + if (typeof window === "undefined") { |
| 24 | + return "dark"; |
| 25 | + } |
| 26 | + return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; |
| 27 | +} |
| 28 | + |
| 29 | +function resolveTheme(preference: ThemePreference): Theme { |
| 30 | + if (preference === "system") { |
| 31 | + return getSystemTheme(); |
| 32 | + } |
| 33 | + return preference; |
| 34 | +} |
| 35 | + |
| 36 | +interface ThemeProviderProps { |
| 37 | + children: ReactNode; |
| 38 | + initialPreference?: ThemePreference; |
| 39 | + isLoggedIn?: boolean; |
| 40 | +} |
| 41 | + |
| 42 | +export function ThemeProvider({ |
| 43 | + children, |
| 44 | + initialPreference = "dark", |
| 45 | + isLoggedIn = false, |
| 46 | +}: ThemeProviderProps) { |
| 47 | + const [themePreference, setThemePreferenceState] = useState<ThemePreference>(initialPreference); |
| 48 | + const [theme, setTheme] = useState<Theme>(() => resolveTheme(initialPreference)); |
| 49 | + const fetcher = useFetcher(); |
| 50 | + |
| 51 | + // Update the HTML class when theme changes |
| 52 | + useEffect(() => { |
| 53 | + const root = document.documentElement; |
| 54 | + root.classList.remove("light", "dark"); |
| 55 | + root.classList.add(theme); |
| 56 | + }, [theme]); |
| 57 | + |
| 58 | + // Listen for system theme changes when preference is "system" |
| 59 | + useEffect(() => { |
| 60 | + if (themePreference !== "system") { |
| 61 | + return; |
| 62 | + } |
| 63 | + |
| 64 | + const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)"); |
| 65 | + const handleChange = (e: MediaQueryListEvent) => { |
| 66 | + setTheme(e.matches ? "dark" : "light"); |
| 67 | + }; |
| 68 | + |
| 69 | + mediaQuery.addEventListener("change", handleChange); |
| 70 | + return () => mediaQuery.removeEventListener("change", handleChange); |
| 71 | + }, [themePreference]); |
| 72 | + |
| 73 | + const setThemePreference = useCallback( |
| 74 | + (preference: ThemePreference) => { |
| 75 | + setThemePreferenceState(preference); |
| 76 | + setTheme(resolveTheme(preference)); |
| 77 | + |
| 78 | + // Persist to server if logged in |
| 79 | + if (isLoggedIn) { |
| 80 | + fetcher.submit( |
| 81 | + { theme: preference }, |
| 82 | + { method: "POST", action: "/resources/preferences/theme" } |
| 83 | + ); |
| 84 | + } |
| 85 | + |
| 86 | + // Also store in localStorage for non-logged-in users and faster hydration |
| 87 | + localStorage.setItem("theme-preference", preference); |
| 88 | + }, |
| 89 | + [isLoggedIn, fetcher] |
| 90 | + ); |
| 91 | + |
| 92 | + return ( |
| 93 | + <ThemeContext.Provider value={{ theme, themePreference, setThemePreference }}> |
| 94 | + {children} |
| 95 | + </ThemeContext.Provider> |
| 96 | + ); |
| 97 | +} |
| 98 | + |
| 99 | +export function useTheme() { |
| 100 | + const context = useContext(ThemeContext); |
| 101 | + if (context === undefined) { |
| 102 | + throw new Error("useTheme must be used within a ThemeProvider"); |
| 103 | + } |
| 104 | + return context; |
| 105 | +} |
| 106 | + |
| 107 | +// Script to prevent flash of wrong theme on initial load |
| 108 | +// This should be injected into the <head> before any content renders |
| 109 | +export function ThemeScript({ initialPreference }: { initialPreference?: ThemePreference }) { |
| 110 | + const script = ` |
| 111 | + (function() { |
| 112 | + var preference = ${JSON.stringify(initialPreference ?? null)} || localStorage.getItem('theme-preference') || 'dark'; |
| 113 | + var theme = preference; |
| 114 | + if (preference === 'system') { |
| 115 | + theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'; |
| 116 | + } |
| 117 | + document.documentElement.classList.add(theme); |
| 118 | + })(); |
| 119 | + `; |
| 120 | + |
| 121 | + return <script dangerouslySetInnerHTML={{ __html: script }} />; |
| 122 | +} |
0 commit comments