background color initial issue about next-themes HOT 2 CLOSED

'use client'

import { useState, useEffect, useContext, createContext } from 'react'

const ThemeContext = createContext()

export const useTheme = () => {
  return useContext(ThemeContext)
}

export const ThemeProviders = ({ children }) => {
  const [theme, setTheme] = useState('system')
  const [colorScheme, setColorScheme] = useState('light')

  const toggleTheme = (color) => {
    if (color !== 'system' && color !== 'light' && color !== 'dark') {
      color = 'system'
    }
    setTheme(color)
    typeof window !== 'undefined' && localStorage.setItem('user-color-scheme', color)
  }

  useEffect(() => {
    let localTheme = localStorage.getItem('user-color-scheme')
    if (localTheme && localTheme !== 'system') {
      setTheme(localTheme)
    }

    const handleColorSchemeChange = (event) => {
      if (!event) {
        event = window.matchMedia("(prefers-color-scheme: dark)")
      }
      if (event.matches) {
        setColorScheme("dark")
      } else {
        setColorScheme("light")
      }
    }

    handleColorSchemeChange()
    window.matchMedia("(prefers-color-scheme: dark)").addListener(handleColorSchemeChange)

    return () => {
      window.matchMedia("(prefers-color-scheme: dark)").removeListener(handleColorSchemeChange)
    }
  }, [])


  useEffect(() => {
    document.documentElement.classList.add(theme === 'system' ? colorScheme : theme)
    return () => {
      document.documentElement.classList.remove(theme === 'system' ? colorScheme : theme)
    }
  }, [theme, colorScheme])

  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      <script dangerouslySetInnerHTML={{__html: `document.documentElement.classList.add((typeof localStorage.getItem('user-color-scheme') === 'undefined' || localStorage.getItem('user-color-scheme') === 'system') ? (window.matchMedia("(prefers-color-scheme: dark)").matches ? 'dark' : 'light') : (localStorage.getItem('user-color-scheme') === 'dark' ? 'dark' : 'light'))`}} />
      {children}
    </ThemeContext.Provider>
  )
}

export const ToggleTheme = ({ responsive }) => {
  const [mounted, setMounted] = useState(false)
  const { theme, toggleTheme } = useTheme()

  useEffect(() => {
    setMounted(true)
  }, [])

  if (!mounted) {
    return null
  }

  return (
...