Theme Provider

1/* eslint-disable react-refresh/only-export-components */
2import * as React from "react"
3 
4type Theme = "dark" | "light" | "system"
5type ResolvedTheme = "dark" | "light"
6 
7type ThemeProviderProps = {
8  children: React.ReactNode
9  defaultTheme?: Theme
10  storageKey?: string
11  disableTransitionOnChange?: boolean
12}
13 
14type ThemeProviderState = {
15  theme: Theme
16  setTheme: (theme: Theme) => void
17}
18 
19const COLOR_SCHEME_QUERY = "(prefers-color-scheme: dark)"
20const THEME_VALUES: Theme[] = ["dark", "light", "system"]
21 
22const ThemeProviderContext = React.createContext<
23  ThemeProviderState | undefined
24>(undefined)
25 
26function isTheme(value: string | null): value is Theme {
27  if (value === null) {
28    return false
29  }
30 
31  return THEME_VALUES.includes(value as Theme)
32}
33 
34function getSystemTheme(): ResolvedTheme {
35  if (window.matchMedia(COLOR_SCHEME_QUERY).matches) {
36    return "dark"
37  }
38 
39  return "light"
40}
41 
42function disableTransitionsTemporarily() {
43  const style = document.createElement("style")
44  style.appendChild(
45    document.createTextNode(
46      "*,*::before,*::after{-webkit-transition:none!important;transition:none!important}"
47    )
48  )
49  document.head.appendChild(style)
50 
51  return () => {
52    window.getComputedStyle(document.body)
53    requestAnimationFrame(() => {
54      requestAnimationFrame(() => {
55        style.remove()
56      })
57    })
58  }
59}
60 
61function isEditableTarget(target: EventTarget | null) {
62  if (!(target instanceof HTMLElement)) {
63    return false
64  }
65 
66  if (target.isContentEditable) {
67    return true
68  }
69 
70  const editableParent = target.closest(
71    "input, textarea, select, [contenteditable='true']"
72  )
73  if (editableParent) {
74    return true
75  }
76 
77  return false
78}
79 
80export function ThemeProvider({
81  children,
82  defaultTheme = "system",
83  storageKey = "theme",
84  disableTransitionOnChange = true,
85  ...props
86}: ThemeProviderProps) {
87  const [theme, setThemeState] = React.useState<Theme>(() => {
88    const storedTheme = localStorage.getItem(storageKey)
89    if (isTheme(storedTheme)) {
90      return storedTheme
91    }
92 
93    return defaultTheme
94  })
95 
96  const setTheme = React.useCallback(
97    (nextTheme: Theme) => {
98      localStorage.setItem(storageKey, nextTheme)
99      setThemeState(nextTheme)
100    },
101    [storageKey]
102  )
103 
104  const applyTheme = React.useCallback(
105    (nextTheme: Theme) => {
106      const root = document.documentElement
107      const resolvedTheme =
108        nextTheme === "system" ? getSystemTheme() : nextTheme
109// … truncated