Watch prefers-color-scheme

src/components/Layout/Dashboard/Header/HeaderTheme.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import Cookies from 'js-cookie'
-import React, { useCallback, useState } from 'react'
+import React, { useCallback, useEffect, useState } from 'react'
 import { useRouter } from 'next/navigation'
 import {
   Dropdown, DropdownItem, DropdownMenu, DropdownToggle, NavLink,
@@ -45,21 +45,21 @@ export default function HeaderTheme({ currentPreferredTheme }: { currentPreferre
     router.refresh()
   }, [router])
 
-  useMediaQuery(
+  const isDarkMode = useMediaQuery(
     {
       query: '(prefers-color-scheme: dark)',
     },
-    undefined,
-    (prefersDark) => {
-      if (preferredTheme !== Theme.Auto) {
-        return
-      }
-
-      Cookies.set('theme', prefersDark ? Theme.Dark : Theme.Light)
-      router.refresh()
-    },
   )
 
+  useEffect(() => {
+    if (preferredTheme !== Theme.Auto) {
+      return
+    }
+
+    Cookies.set('theme', isDarkMode ? Theme.Dark : Theme.Light)
+    router.refresh()
+  }, [isDarkMode, preferredTheme, router])
+
   return (
     <Dropdown>
       <DropdownToggle className="px-2 mx-1 px-sm-3 mx-sm-0" as={NavLink} bsPrefix="hide-caret" id="dropdown-theme">