优先兼容Mac深色模式，首页文章密度调整

lib/theme.js

@@ -3,14 +3,25 @@ import localStorage from 'localStorage'
 
 const ThemeContext = createContext()
 
+/**
+ * 提供日间模式、夜间模式主题的切换 light/dark
+ * @param children
+ * @returns {JSX.Element}
+ * @constructor
+ */
 export function ThemeProvider ({ children }) {
-  // 初始值
-  const defaultTheme = localStorage.getItem('theme')
-  const [theme, changeTheme] = useState()
+  // 用户自定义主题设置在变量中
+  const userTheme = localStorage.getItem('theme')
+  const [theme, changeTheme] = useState(userTheme)
   useEffect(() => {
-    changeTheme(defaultTheme)
+    const prefersDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches
+    if (prefersDarkMode) {
+      changeTheme('dark')
+      localStorage.setItem('theme', 'dark')
+    } else {
+      changeTheme(userTheme)
+    }
   })
-
   return (
     <ThemeContext.Provider value={{ theme, changeTheme }}>{children}</ThemeContext.Provider>
   )