封装theme，用cookie保存主题

components/DebugPanel.js

@@ -1,19 +1,17 @@
 import BLOG from '@/blog.config'
-import { useGlobal } from '@/lib/global'
 import * as ThemeMap from '@/themes'
 import { useState } from 'react'
-import { useRouter } from 'next/router'
 import Select from './Select'
 import { ALL_THEME } from '@/lib/theme'
+import { useGlobal } from '@/lib/global'
 /**
  *
  * @returns 调试面板
  */
 export function DebugPanel () {
   const [show, setShow] = useState(false)
-  const GlobalConfig = useGlobal()
-  const router = useRouter()
-  const { theme, setTheme } = GlobalConfig
+  const { theme, changeTheme, switchTheme } = useGlobal()
+
   const themeOptions = []
   ALL_THEME.forEach(t => {
     themeOptions.push({ value: t, text: t })
@@ -23,19 +21,6 @@ export function DebugPanel () {
     setShow(!show)
   }
 
-  function switchTheme () {
-    const currentIndex = ALL_THEME.indexOf(theme)
-    const newIndex = currentIndex < ALL_THEME.length - 1 ? currentIndex + 1 : 0
-    changeTheme(ALL_THEME[newIndex])
-  }
-  /**
-   * 切换主题
-   */
-  function changeTheme (theme) {
-    router.query.theme = ''
-    setTheme(theme)
-  }
-
   function filterResult (text) {
     switch (text) {
       case 'true':

components/ThemeSwitch.js

@@ -1,33 +1,11 @@
 import { useGlobal } from '@/lib/global'
-import { useRouter } from 'next/router'
-import { ALL_THEME } from '@/lib/theme'
 
 /**
  *
  * @returns 主题切换
  */
 export function ThemeSwitch () {
-  const GlobalConfig = useGlobal()
-  const router = useRouter()
-  const { theme, setTheme } = GlobalConfig
-  const themeOptions = []
-  ALL_THEME.forEach(t => {
-    themeOptions.push({ value: t, text: t })
-  })
-
-  function switchTheme () {
-    const currentIndex = ALL_THEME.indexOf(theme)
-    const newIndex = currentIndex < ALL_THEME.length - 1 ? currentIndex + 1 : 0
-    changeTheme(ALL_THEME[newIndex])
-  }
-  /**
-   * 切换主题
-   */
-  function changeTheme (theme) {
-    router.query.theme = ''
-    setTheme(theme)
-  }
-
+  const { theme, switchTheme } = useGlobal()
   return (
     <div draggable="true" className="fixed left-4 bottom-12 text-white bg-black rounded z-50">
       <div className="p-2 cursor-pointer" onClick={switchTheme}>

lib/global.js

@@ -2,7 +2,7 @@ import { generateLocaleDict, initLocale } from './lang'
 import { createContext, useContext, useEffect, useState } from 'react'
 import Router from 'next/router'
 import BLOG from '@/blog.config'
-import { ALL_THEME, initDarkMode } from '@/lib/theme'
+import { ALL_THEME, initDarkMode, initTheme, saveThemeToCookies } from '@/lib/theme'
 
 const GlobalContext = createContext()
 let hasInit = false
@@ -26,6 +26,22 @@ export function GlobalContextProvider ({ children }) {
     changeLoadingState(false)
   })
 
+  function switchTheme () {
+    const currentIndex = ALL_THEME.indexOf(theme)
+    const newIndex = currentIndex < ALL_THEME.length - 1 ? currentIndex + 1 : 0
+    changeTheme(ALL_THEME[newIndex])
+  }
+
+  function changeTheme (theme) {
+    Router.query.theme = ''
+    if (ALL_THEME.indexOf(theme) > -1) {
+      setTheme(theme)
+    } else {
+      setTheme(BLOG.THEME)
+    }
+    saveThemeToCookies(theme)
+  }
+
   useEffect(() => {
     if (!hasInit) {
       const userTheme = getQueryVariable('theme')
@@ -34,12 +50,13 @@ export function GlobalContextProvider ({ children }) {
       }
       initLocale(locale, updateLocale)
       initDarkMode(isDarkMode, updateDarkMode)
+      initTheme(theme, changeTheme)
       hasInit = true
     }
   })
 
   return (
-    <GlobalContext.Provider value={{ onLoading, locale, updateLocale, isDarkMode, updateDarkMode, theme, setTheme }}>
+    <GlobalContext.Provider value={{ onLoading, locale, updateLocale, isDarkMode, updateDarkMode, theme, setTheme, switchTheme, changeTheme }}>
       {children}
     </GlobalContext.Provider>
   )

lib/theme.js

@@ -19,6 +19,19 @@ export const initDarkMode = (isDarkMode, updateDarkMode) => {
   }
 }
 
+/**
+ * 从cookie中读取 用户默认主题
+ * @param {*} theme
+ * @param {*} changeTheme
+ */
+export const initTheme = (theme, changeTheme) => {
+  const userTheme = loadThemeFromCookies()
+  console.log('默认主题', userTheme)
+  if (userTheme !== theme) {
+    changeTheme(userTheme)
+  }
+}
+
 /**
  * 是否优先深色模式
  * @returns {*}
@@ -37,10 +50,26 @@ export function isPreferDark () {
 }
 
 /**
- * 读取默认主题
+ * 读取深色模式
  * @returns {*}
  */
 export const loadDarkModeFromCookies = () => {
+  return cookie.load('darkMode')
+}
+
+/**
+   * 保存深色模式
+   * @param newTheme
+   */
+export const saveDarkModeToCookies = (newTheme) => {
+  cookie.save('darkMode', newTheme, { path: '/' })
+}
+
+/**
+ * 读取默认主题
+ * @returns {*}
+ */
+export const loadThemeFromCookies = () => {
   return cookie.load('theme')
 }
 
@@ -48,6 +77,6 @@ export const loadDarkModeFromCookies = () => {
    * 保存默认主题
    * @param newTheme
    */
-export const saveDarkModeToCookies = (newTheme) => {
+export const saveThemeToCookies = (newTheme) => {
   cookie.save('theme', newTheme, { path: '/' })
 }