封装theme，用cookie保存主题

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: '/' })
 }