Support for multiple attributes (more in depth theme management) about next-themes HOT 2 OPEN

'use client'

import { useThemeStore } from '@/lib/stores/use-theme-store'
import { useEffect } from 'react'

interface ThemeProps {
  defaultTheme?: string
  defaultMode?: 'light' | 'dark' | 'system'
}

export function Theme({ defaultTheme = 'light', defaultMode = 'system' }: ThemeProps) {
  const { system, mode, setMode } = useThemeStore()

  // system theme listener
  useEffect(() => {
    function onChange(event: MediaQueryListEvent | MediaQueryList) {
      // !system or !mode or system and ui in same mode
      if (!system || !mode || event.matches === (mode === 'dark')) return
      // system switched to dark mode, ui in light mode
      else if (event.matches) setMode('dark')
      // system switched to light mode, ui in dark mode
      else if (!event.matches) setMode('light')
    }

    const result = matchMedia('(prefers-color-scheme: dark)')
    result.addEventListener('change', onChange)

    return () => result.removeEventListener('change', onChange)
  }, [mode, setMode, system])

  return (
    <script
      suppressHydrationWarning
      dangerouslySetInnerHTML={{
        __html: `(${setInitialTheme.toString()})(${JSON.stringify({ defaultTheme, defaultMode })})`
      }}
    />
  )
}

interface setInitialThemeProps {
  defaultTheme: string
  defaultMode: 'light' | 'dark' | 'system'
}

type Theme = {
  state: {
    theme: string
    mode: 'light' | 'dark'
    system: boolean
  }
  version: number
}

function setInitialTheme({ defaultTheme, defaultMode }: setInitialThemeProps) {
  const cache = localStorage.getItem('themeStore')

  const defaultSystem = defaultMode === 'system'
  const defaultModeResolved = defaultSystem
    ? matchMedia('(prefers-color-scheme: dark)').matches
      ? 'dark'
      : 'light'
    : defaultMode

  const themeStore: Theme = cache
    ? JSON.parse(cache)
    : {
        state: { theme: defaultTheme, mode: defaultModeResolved, system: defaultSystem },
        version: 0
      }

  const theme = themeStore.state.theme
  const system = themeStore.state.system
  const mode = system
    ? matchMedia('(prefers-color-scheme: dark)').matches
      ? 'dark'
      : 'light'
    : themeStore.state.mode

  document.documentElement.setAttribute('data-theme', `${mode}_${theme}`)
  document.documentElement.style.colorScheme = mode

  if (!cache) localStorage.setItem('themeStore', JSON.stringify(themeStore))
}

import { create } from 'zustand'
import { persist } from 'zustand/middleware'

type ThemeStore = {
  theme: string | undefined
  setTheme: (value: string) => void
  mode: 'light' | 'dark' | undefined
  setMode: (value: 'light' | 'dark') => void
  system: boolean | undefined
  setSystem: (value: boolean) => void
}

export const useThemeStore = create(
  persist<ThemeStore>(
    (set, get) => ({
      theme: undefined,
      setTheme: (theme) => {
        const mode = get().mode!

        document.documentElement.setAttribute('data-theme', `${mode}_${theme}`)
        document.documentElement.style.colorScheme = mode

        set(() => ({ theme: theme }))
      },

      mode: undefined,
      setMode: (mode) => {
        const theme = get().theme

        document.documentElement.setAttribute('data-theme', `${mode}_${theme}`)
        document.documentElement.style.colorScheme = mode

        set(() => ({ mode: mode }))
      },

      system: undefined,
      setSystem: (system) => {
        const isDark = matchMedia('(prefers-color-scheme: dark)').matches
        const mode = isDark ? 'dark' : 'light'
        const theme = get().theme!

        document.documentElement.setAttribute('data-theme', `${mode}_${theme}`)
        document.documentElement.style.colorScheme = mode

        set(() => ({ system: system, mode: mode }))
      }
    }),
    {
      name: 'themeStore'
    }
  )
)

const { theme, setTheme, mode, setMode, system, setSystem } = useThemeStore()

setTheme('slate')

// or
setMode('dark')

// or
setSystem(false)