主题微调

lib/global.js

@@ -1,8 +1,9 @@
 import lang from './lang'
 import { useContext, createContext, useState } from 'react'
 import Router from 'next/router'
-import { initDarkMode } from './theme'
+import { ALL_THEME, initDarkMode } from './theme'
 import BLOG from '@/blog.config'
+
 const GlobalContext = createContext()
 let hasInit = false
 
@@ -17,6 +18,7 @@ export function GlobalContextProvider ({ children }) {
   const [isDarkMode, updateDarkMode] = useState(false)
   const [onLoading, changeLoadingState] = useState(false)
   const [theme, setTheme] = useState(BLOG.THEME)
+
   Router.events.on('routeChangeStart', (...args) => {
     changeLoadingState(true)
   })
@@ -31,8 +33,13 @@ export function GlobalContextProvider ({ children }) {
       hasInit = true
       initLocale(locale, updateLocale)
       initDarkMode(isDarkMode, updateDarkMode)
+      // 读取浏览器参数中的主题
+      const userTheme = Router?.router?.query?.theme
+      if (userTheme && ALL_THEME.indexOf(userTheme) > -1) {
+        setTheme(userTheme)
+      }
     }
-  }, 100)
+  }, 50)
 
   return (
     <GlobalContext.Provider value={{ onLoading, locale, isDarkMode, updateDarkMode, theme, setTheme }}>

lib/theme.js

@@ -1,6 +1,7 @@
 import cookie from 'react-cookies'
 import BLOG from '@/blog.config'
 
+export const ALL_THEME = ['next', 'fukasawa', 'hexo', 'empty', 'medium']
 /**
  * 初始化主题
  * @param isDarkMode