优化控制面板

components/DarkModeButton.js

@@ -1,5 +1,4 @@
 import { useGlobal } from '@/lib/global'
-import { saveDarkModeToCookies } from '@/themes/theme'
 import { Moon, Sun } from './HeroIcons'
 import { useImperativeHandle } from 'react'
 
@@ -8,7 +7,7 @@ import { useImperativeHandle } from 'react'
  */
 const DarkModeButton = (props) => {
   const { cRef, className } = props
-  const { isDarkMode, updateDarkMode } = useGlobal()
+  const { isDarkMode, toggleDarkMode } = useGlobal()
 
   /**
    * 对外暴露方法
@@ -16,22 +15,12 @@ const DarkModeButton = (props) => {
   useImperativeHandle(cRef, () => {
     return {
       handleChangeDarkMode: () => {
-        handleChangeDarkMode()
+        toggleDarkMode()
       }
     }
   })
 
-  // 用户手动设置主题
-  const handleChangeDarkMode = () => {
-    const newStatus = !isDarkMode
-    saveDarkModeToCookies(newStatus)
-    updateDarkMode(newStatus)
-    const htmlElement = document.getElementsByTagName('html')[0]
-    htmlElement.classList?.remove(newStatus ? 'light' : 'dark')
-    htmlElement.classList?.add(newStatus ? 'dark' : 'light')
-  }
-
-  return <div onClick={handleChangeDarkMode} className={`${className || ''} flex justify-center dark:text-gray-200 text-gray-800`}>
+  return <div onClick={toggleDarkMode} className={`${className || ''} flex justify-center dark:text-gray-200 text-gray-800`}>
         <div id='darkModeButton' className=' hover:scale-110 cursor-pointer transform duration-200 w-5 h-5'> {isDarkMode ? <Sun /> : <Moon />}</div>
     </div>
 }