Dark Theme Hooks with Local Storage for Tailwind css

ToggleThemeHooks.jsx

import { useEffect, useState } from "react"

export function useToggleTheme() {
  const [theme, setTheme] = useState('dark')

  useEffect(() => {
    if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
      document.documentElement.classList.add('dark')
      setTheme('dark')
    } else {
      document.documentElement.classList.remove('dark')
      setTheme('light')
    }

    return null;
  }, [theme])

  function changeThemeMode() {
    let mode = ''
    if (theme === "light") {
      mode = 'dark'
    } else {
      mode = 'light'
    }

    setTheme(mode)
    localStorage.setItem('theme', mode)
  }

  return [theme, changeThemeMode]
}