`resolvedTheme` does not resolve to `dark` | `light` but instead to `system` about next-themes HOT 1 CLOSED

'use client';

import { useState, useEffect } from 'react'
import { useTheme } from 'next-themes'
import { classNames } from '@/lib/tailwind';
import { Switch } from '@headlessui/react'

import { track } from '@vercel/analytics';

import { SunIcon, MoonIcon } from "@heroicons/react/24/outline";

const ThemeSwitch = () => {
  const [mounted, setMounted] = useState(false)
  const { theme, resolvedTheme, setTheme } = useTheme()


  const darkMode = resolvedTheme === 'dark';

  // useEffect only runs on the client, so now we can safely show the UI
  useEffect(() => {
    setMounted(true)
  }, [])

  if (!mounted) {
    return (
      <div className='self-center rounded-full h-7 w-11 bg-gray-200 dark:bg-zinc-800 skeleton-box'></div>
    )
  }

  console.log(`darkMode2: ${darkMode}`);
  console.log(`theme2: ${theme}`);
  console.log(`resolvedTheme2: ${resolvedTheme}`);

  track('theme', { theme: resolvedTheme ?? "unknown" });

  return (
    <>
      <Switch checked={darkMode} onChange={() => setTheme(darkMode ? 'light' : 'dark')}
        className="bg-ww-accent relative inline-flex h-7 w-11 flex-shrink-0 cursor-pointer self-center rounded-full border-2 border-transparent bg-amber-500 ease-in-out focus:outline-none sm:ml-4">
        <span className="sr-only">Toggle Dark Mode</span>
        <span className={classNames(darkMode ? 'translate-x-4' : 'translate-x-0', 'pointer-events-none relative inline-block h-6 w-6 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out dark:bg-zinc-800')}>
          <span className={classNames(darkMode ? 'opacity-0 duration-100 ease-out' : 'opacity-100 duration-200 ease-in', 'absolute inset-0 flex h-full w-full items-center justify-center transition-opacity')} aria-hidden="true">
            <SunIcon className="h-5 w-5 text-gray-400" />
          </span>
          <span className={classNames(darkMode ? 'opacity-100 duration-200 ease-in' : 'opacity-0 duration-100 ease-out', 'absolute inset-0 flex h-full w-full items-center justify-center transition-opacity')} aria-hidden="true">
            <MoonIcon className="h-5 w-5 text-gray-400 dark:text-zinc-400" />
          </span>
        </span>
      </Switch>
    </>
  )
}

export default ThemeSwitch