优化控制面板

lib/global.js

@@ -1,11 +1,10 @@
 import { generateLocaleDict, initLocale } from './lang'
 import { createContext, useContext, useEffect, useState } from 'react'
 import { useRouter } from 'next/router'
-import { THEMES, initDarkMode } from '@/themes/theme'
+import { THEMES, initDarkMode, saveDarkModeToCookies } from '@/themes/theme'
 
 import BLOG from '@/blog.config'
 import NProgress from 'nprogress'
-import { isBrowser } from './utils'
 
 const GlobalContext = createContext()
 
@@ -35,17 +34,34 @@ export function GlobalContextProvider(props) {
     return newTheme
   }
 
+  // 切换深色模式
+  const toggleDarkMode = () => {
+    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')
+  }
+
+  /**
+   * 更新语言
+   */
+  function changeLang(lang) {
+    if (lang) {
+      updateLang(lang)
+      updateLocale(generateLocaleDict(lang))
+    }
+  }
+
   useEffect(() => {
-    initLocale(lang, locale, updateLang, updateLocale)
     initDarkMode(updateDarkMode)
-    checkThemeDOM()
+    initLocale(lang, locale, updateLang, updateLocale)
   }, [])
 
-  // 加载默认主题
-  //   useEffect(() => {
-  //     const queryTheme = getQueryVariable('theme') || theme
-  //     setTheme(queryTheme)
-  //   }, [router])
+  useEffect(() => {
+    checkThemeDOM()
+  })
 
   // 加载进度条
   useEffect(() => {
@@ -62,6 +78,7 @@ export function GlobalContextProvider(props) {
       NProgress.done()
       setOnLoading(false)
     }
+
     router.events.on('routeChangeStart', handleStart)
     router.events.on('routeChangeError', handleStop)
     router.events.on('routeChangeComplete', handleStop)
@@ -75,10 +92,11 @@ export function GlobalContextProvider(props) {
   return (
         <GlobalContext.Provider value={{
           NOTION_CONFIG,
+          toggleDarkMode,
           onLoading,
           setOnLoading,
           lang,
-          updateLang,
+          changeLang,
           locale,
           updateLocale,
           isDarkMode,
@@ -99,17 +117,13 @@ export function GlobalContextProvider(props) {
  * 切换主题时的特殊处理
  */
 const checkThemeDOM = () => {
-  if (isBrowser) {
-    setTimeout(() => {
-      const elements = document.querySelectorAll('[id^="theme-"]')
-      if (elements?.length > 1) {
-        elements[elements.length - 1].scrollIntoView()
-        // 删除前面的元素，只保留最后一个元素
-        for (let i = 0; i < elements.length - 1; i++) {
-          elements[i].parentNode.removeChild(elements[i])
-        }
-      }
-    }, 500)
+  const elements = document.querySelectorAll('[id^="theme-"]')
+  if (elements?.length > 1) {
+    elements[elements.length - 1].scrollIntoView()
+    // 删除前面的元素，只保留最后一个元素
+    for (let i = 0; i < elements.length - 1; i++) {
+      elements[i].parentNode.removeChild(elements[i])
+    }
   }
 }