使用cookie管理会话主题，并修复深色主题初始化的BUG

components/DarkModeButton.js

@@ -1,16 +1,17 @@
-import { useTheme } from '@/lib/theme'
+import { loadUserThemeFromCookies, saveTheme, useTheme } from '@/lib/theme'
-import localStorage from 'localStorage'
 
 const DarkModeButton = () => {
-  const { theme, changeTheme } = useTheme()
+  const { changeTheme } = useTheme()
+  const userTheme = loadUserThemeFromCookies()
   // 用户手动设置主题
   const handleChangeDarkMode = () => {
-    const newTheme = (theme === 'light' ? 'dark' : 'light')
+    const newTheme = (userTheme === 'light' ? 'dark' : 'light')
-    localStorage.setItem('theme', newTheme)
+    saveTheme(newTheme)
     changeTheme(newTheme)
   }
   return <div className='z-10 p-1 duration-200 mr-2 h-12 text-xl cursor-pointer dark:text-gray-300 '>
-    <i className={'fa p-2.5 hover:scale-125 transform duration-200 ' + (theme === 'dark' ? 'fa-sun-o' : 'fa-moon-o') } onClick={handleChangeDarkMode} />
+    <i id='darkModeButton' className={'fa p-2.5 hover:scale-125 transform duration-200 ' + (userTheme === 'dark' ? 'fa-sun-o' : 'fa-moon-o')}
+       onClick={handleChangeDarkMode} />
   </div>
 }
 export default DarkModeButton

lib/theme.js

@@ -1,5 +1,5 @@
-import { useContext, createContext, useState, useEffect } from 'react'
+import { useContext, createContext, useState, useEffect, useRef } from 'react'
-import localStorage from 'localStorage'
+import cookie from 'react-cookies'
 
 const ThemeContext = createContext()
 
@@ -10,21 +10,38 @@ const ThemeContext = createContext()
  * @constructor
  */
 export function ThemeProvider ({ children }) {
-  // 用户自定义主题设置在变量中
+  const [theme, changeTheme] = useState(loadUserThemeFromCookies())
-  const userTheme = localStorage.getItem('theme')
+
-  const [theme, changeTheme] = useState(userTheme)
+  // 由于Server采用服务端静态渲染，无法获取前端Cookie配置，故在渲染hooks中做初始化主题
   useEffect(() => {
-    const prefersDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches
+    // 若用户当前会话无指定主题，将根据深色偏好及访问时间决定默认主题
-    if (prefersDarkMode) {
+    if (!theme) {
-      changeTheme('dark')
+      const date = new Date()
-      localStorage.setItem('theme', 'dark')
+      const prefersDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches
-    } else {
+      const useDark = prefersDarkMode || (date.getHours() >= 18 || date.getHours() < 6)
-      changeTheme(userTheme)
+      if (useDark) {
+        changeTheme('dark')
+        saveTheme('dark')
+      }
+    }
+
+    const baseLayoutClass = document.getElementById('wrapper').classList
+    if (!baseLayoutClass.contains(theme)) {
+      baseLayoutClass.add(theme)
     }
   })
+
   return (
     <ThemeContext.Provider value={{ theme, changeTheme }}>{children}</ThemeContext.Provider>
   )
 }
 
+export const loadUserThemeFromCookies = () => {
+  return cookie.load('theme')
+}
+
+export const saveTheme = (newTheme) => {
+  cookie.save('theme', newTheme, { path: '/' })
+}
+
 export const useTheme = () => useContext(ThemeContext)

package.json

@@ -34,6 +34,7 @@
     "preact": "^10.5.13",
     "qrcode.react": "^1.0.1",
     "react": "17.0.2",
+    "react-cookies": "^0.1.1",
     "react-cusdis": "^2.0.1",
     "react-dom": "17.0.2",
     "react-notion-x": "^4.6.5",

pages/_app.js

@@ -17,7 +17,7 @@ import { ThemeProvider } from '@/lib/theme'
 const Ackee = dynamic(() => import('@/components/Ackee'), { ssr: false })
 const Gtag = dynamic(() => import('@/components/Gtag'), { ssr: false })
 
-function MyApp ({ Component, pageProps }) {
+const MyApp = ({ Component, pageProps }) => {
   return (
     <LocaleProvider>
       <ThemeProvider>

pages/index.js

@@ -25,7 +25,7 @@ export async function getStaticProps () {
   }
 }
 
-const index = ({ posts, tags, meta }) => {
+const Index = ({ posts, tags, meta }) => {
   return (
     <BaseLayout meta={meta} tags={tags}>
       <div className='flex-grow'>
@@ -36,4 +36,4 @@ const index = ({ posts, tags, meta }) => {
   )
 }
 
-export default index
+export default Index