I need to consult on what is the best way to implement this hook. In my research, I found three general cases where color schemes are defined. A list of the investigated methods and the benefits and limitations that come with them will be specified below:

root.theme: custom classes or attributes on the root element (<html>).
- Compatibility with old and modern browsers.
- Use of multiple themes besides the typical light and dark.
@media-color-scheme: media query colors.
- Compatibility with modern browsers Browser Compatibility.
- Emulation of only two color schemes: light and dark.
localStorage: persistence of themes in the user's browser, and the value must be synchronized with the current value for proper functioning.

The strategies taken by development teams are based on using all of the above together, in most cases giving priority in the following order:

Setter: @media-color-scheme || root.theme -> root.theme -> localStorage
Getter: localStorage || @media-color-scheme -> root.theme

Example: Reference: Shadcn/ui
ThemeProvider.tsx

export function ThemeProvider({
  children,
  defaultTheme = 'system',
  storageKey = 'vite-ui-theme',
  ...props
}: ThemeProviderProps) {
  const [theme, setTheme] = useState<Theme>(
    () => (localStorage.getItem(storageKey) as Theme) || defaultTheme
  )

  useEffect(() => {
    const root = window.document.documentElement

    root.classList.remove('light', 'dark')

    if (theme === 'system') {
      const systemTheme = window.matchMedia('(prefers-color-scheme: dark)')
        .matches
        ? 'dark'
        : 'light'

      root.classList.add(systemTheme)
      return
    }

    root.classList.add(theme)
  }, [theme])

  const value = {
    theme,
    setTheme: (theme: Theme) => {
      localStorage.setItem(storageKey, theme)
      setTheme(theme)
    },
  }

  return (
    <ThemeProviderContext.Provider {...props} value={value}>
      {children}
    </ThemeProviderContext.Provider>
  )
}

useTheme.ts:

export const useTheme = () => {
  const context = useContext(ThemeProviderContext)

  if (context === undefined)
    throw new Error('useTheme must be used within a ThemeProvider')

  return context
}

Questions:

Priority order for theme selection.
The hook will also handle a setter and synchronize all the previous permissible states ( localStorage and root.theme ).

Uh oh!

Current Color Scheme Hook #70

Description

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions