fix(theme): fix issues with theme switch (#14)

src/components/header/Header.tsx

@@ -16,7 +16,7 @@ const header = tv({
   base: 'fixed z-20 flex w-full translate-y-0 justify-between bg-background-light px-6 py-2 transition duration-300 dark:bg-background sm:px-12 sm:py-4',
   variants: {
     mobileMenu: {
-      true: 'bg-opacity-0',
+      true: 'bg-opacity-0 dark:bg-opacity-0',
       false: 'bg-opacity-90 shadow-xl dark:bg-opacity-70',
     },
   },

src/components/theme-switch/ThemeSwitch.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useEffect } from 'react'
+import React, { FC, useEffect, useState } from 'react'
 import { HiOutlineMoon, HiSun } from 'react-icons/hi'
 import { tv } from 'tailwind-variants'
 import { useLocalStorage } from 'usehooks-ts'
@@ -9,14 +9,29 @@ const themeIcon = tv({
 
 const ThemeSwitch: FC = () => {
   const [theme, setTheme] = useLocalStorage('theme', 'dark')
+  const [isLight, setIsLight] = useState(theme === 'light')
+  const [mounted, setMounted] = useState(false)
+
+  useEffect(() => {
+    setIsLight(theme === 'light')
+  }, [theme])
+
+  // Trick to avoid hydration mismatch on SVG tags
+  useEffect(() => {
+    setMounted(true)
+  }, [])
 
   useEffect(() => {
     document.body.classList.remove('light', 'dark')
     document.body.classList.add(theme)
   }, [theme])
 
   const handleThemeChange = () => {
-    setTheme(theme === 'light' ? 'dark' : 'light')
+    setTheme(isLight ? 'dark' : 'light')
+  }
+
+  if (!mounted) {
+    return null
   }
 
   return (

tailwind.config.ts

@@ -4,6 +4,9 @@ import colors from 'tailwindcss/colors'
 export default {
   darkMode: 'class',
   content: ['./src/**/*.{js,ts,jsx,tsx,mdx}'],
+  future: {
+    hoverOnlyWhenSupported: true,
+  },
   theme: {
     rotate: {
       '-180': '-180deg',