React: How to implement dark mode with CSS variables?

1:root {
2  --bg-primary: #ffffff;
3  --bg-secondary: #f5f5f5;
4  --text-primary: #000000;
5  --text-secondary: #666666;
6  --border-color: #e0e0e0;
7}
8
9.dark {
10  --bg-primary: #1a1a1a;
11  --bg-secondary: #2a2a2a;
12  --text-primary: #ffffff;
13  --text-secondary: #aaaaaa;
14  --border-color: #404040;
15}
16
17body {
18  background-color: var(--bg-primary);
19  color: var(--text-primary);
20}

1function useTheme() {
2  const [theme, setTheme] = useState(() => {
3    if (typeof window !== "undefined") {
4      return localStorage.getItem("theme") || "system";
5    }
6    return "system";
7  });
8
9  useEffect(() => {
10    const root = document.documentElement;
11
12    if (theme === "system") {
13      const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
14      root.classList.toggle("dark", prefersDark);
15    } else {
16      root.classList.toggle("dark", theme === "dark");
17    }
18
19    localStorage.setItem("theme", theme);
20  }, [theme]);
21
22  return { theme, setTheme };
23}
24
25// Usage
26function ThemeToggle() {
27  const { theme, setTheme } = useTheme();
28
29  return (
30    <button onClick={() => setTheme(theme === "dark" ? "light" : "dark")}>
31      {theme === "dark" ? "Light" : "Dark"}
32    </button>
33  );
34}