repositories
loading repo index
repositories
loading repo index
repository
loading code, commits, and activity
Projectflow
stars
latest
clone command
git clone gitlawb://did:key:z6Mkfh4Y...QBEi/projectflowgit clone gitlawb://did:key:z6Mkfh4Y.../projectflowb3cded1async from playground1d ago| #1 | import { useEffect } from "react"; |
| #2 | import { useStore } from "../stores"; |
| #3 | import type { ThemePreference } from "../stores/slices/ui.slice"; |
| #4 | |
| #5 | function resolveDarkMode(preference: ThemePreference): boolean { |
| #6 | if (preference === "dark") return true; |
| #7 | if (preference === "light") return false; |
| #8 | return window.matchMedia("(prefers-color-scheme: dark)").matches; |
| #9 | } |
| #10 | |
| #11 | export function useTheme() { |
| #12 | const theme = useStore((s) => s.theme); |
| #13 | const setTheme = useStore((s) => s.setTheme); |
| #14 | |
| #15 | useEffect(() => { |
| #16 | const root = document.documentElement; |
| #17 | |
| #18 | function apply(preference: ThemePreference) { |
| #19 | if (resolveDarkMode(preference)) { |
| #20 | root.classList.add("dark"); |
| #21 | } else { |
| #22 | root.classList.remove("dark"); |
| #23 | } |
| #24 | } |
| #25 | |
| #26 | apply(theme); |
| #27 | |
| #28 | // Listen for system changes when preference is "system" |
| #29 | if (theme === "system") { |
| #30 | const mql = window.matchMedia("(prefers-color-scheme: dark)"); |
| #31 | const handler = () => apply("system"); |
| #32 | mql.addEventListener("change", handler); |
| #33 | return () => mql.removeEventListener("change", handler); |
| #34 | } |
| #35 | }, [theme]); |
| #36 | |
| #37 | return { theme, setTheme }; |
| #38 | } |
| #39 |