Theme Provider

1"use client"
2 
3import { createContext, useContext, useEffect, useState } from "react"
4 
5type Theme = "light" | "dark"
6 
7const STORAGE_KEY = "theme"
8 
9const themeFavicons = {
10  light: "/logo-ink.svg",
11  dark: "/logo-paper.svg",
12} as const
13 
14const ThemeContext = createContext<{
15  theme: Theme
16  setTheme: (theme: Theme) => void
17} | null>(null)
18 
19function getSystemTheme(): Theme {
20  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"
21}
22 
23function applyFavicon(theme: Theme) {
24  const href = themeFavicons[theme]
25  document
26    .querySelectorAll<HTMLLinkElement>("link[data-theme-icon]")
27    .forEach((link) => {
28      link.href = href
29    })
30}
31 
32function applyTheme(theme: Theme) {
33  document.documentElement.classList.toggle("dark", theme === "dark")
34  applyFavicon(theme)
35}
36 
37export function ThemeProvider({ children }: { children: React.ReactNode }) {
38  const [theme, setThemeState] = useState<Theme>("light")
39 
40  useEffect(() => {
41    const stored = localStorage.getItem(STORAGE_KEY)
42    const initial =
43      stored === "dark" || stored === "light" ? stored : getSystemTheme()
44    setThemeState(initial)
45    applyTheme(initial)
46  }, [])
47 
48  function setTheme(next: Theme) {
49    setThemeState(next)
50    localStorage.setItem(STORAGE_KEY, next)
51    applyTheme(next)
52  }
53 
54  return (
55    <ThemeContext.Provider value={{ theme, setTheme }}>
56      {children}
57    </ThemeContext.Provider>
58  )
59}
60 
61export function useTheme() {
62  const context = useContext(ThemeContext)
63  if (!context) {
64    throw new Error("useTheme must be used within ThemeProvider")
65  }
66  return context
67}
68 
69export const themeInitScript = `(function(){try{var s=localStorage.getItem("${STORAGE_KEY}");var t=s==="dark"||s==="light"?s:matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light";if(t==="dark")document.documentElement.classList.add("dark");var h=t==="dark"?"${themeFavicons.dark}":"${themeFavicons.light}";document.querySelectorAll("link[data-theme-icon]").forEach(function(l){l.href=h})}catch(e){}})()`