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

components/BlogPost.js

@@ -4,7 +4,7 @@ import Link from 'next/link'
 
 const BlogPost = ({ post }) => {
   return (
-    <div key={post.id} className='animate__animated animate__slideInUp animate__faster inline-block border dark:border-gray-600 my-2 w-full md:max-w-md bg-white bg-opacity-80 dark:bg-gray-700 dark:hover:bg-gray-600 overflow-hidden'>
+    <div key={post.id} className='animate__animated animate__slideInUp animate__faster shadow-card inline-block border dark:border-gray-600 my-2 w-full 2xl:max-w-2xl bg-white bg-opacity-80 dark:bg-gray-800 dark:hover:bg-gray-700 overflow-hidden'>
         {/*  封面图 */}
         {post.page_cover && post.page_cover.length > 1 && (
           <Link href={`${BLOG.path}/article/${post.slug}`} className='md:flex-shrink-0 md:w-52 md:h-52 rounded-lg'>

components/BlogPostList.js

@@ -56,7 +56,7 @@ const BlogPostList = ({ page = 1, posts = [], tags }) => {
 
       <div>
         {/* 文章列表 */}
-        <div className='grid 2xl:grid-cols-4 xl:grid-cols-4 lg:grid-cols-3 md:grid-cols-2 grid-cols-1 gap-3'>
+        <div className='grid 3xl:grid-cols-4 2xl:grid-cols-3 md:grid-cols-2 grid-cols-1 gap-5'>
           {postsToShow.map(post => (
             <BlogPost key={post.id} post={post} tags={tags} />
           ))}

components/BlogPostListScroll.js

@@ -69,7 +69,7 @@ const BlogPostListScroll = ({ posts = [], tags }) => {
     return <div id='post-list-wrapper' className='mt-28 md:mt-32 mx-2 md:mx-20' ref={targetRef}>
       <div>
         {/* 文章列表 */}
-        <div className='grid 2xl:grid-cols-4 xl:grid-cols-4 lg:grid-cols-3 md:grid-cols-2 grid-cols-1 gap-3'>
+        <div className='grid 3xl:grid-cols-3 md:grid-cols-2 grid-cols-1 gap-5'>
           {postsToShow.map(post => (
             <BlogPost key={post.id} post={post} tags={tags} />
           ))}

components/DarkModeButton.js

@@ -3,13 +3,14 @@ import localStorage from 'localStorage'
 
 const DarkModeButton = () => {
   const { theme, changeTheme } = useTheme()
+  // 用户手动设置主题
   const handleChangeDarkMode = () => {
     const newTheme = (theme === 'light' ? 'dark' : 'light')
-    changeTheme(newTheme)
     localStorage.setItem('theme', 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 className={'fa p-2.5 hover:scale-125 transform duration-200 ' + (theme === 'dark' ? 'fa-sun-o' : 'fa-moon-o') } onClick={handleChangeDarkMode} />
   </div>
 }
 export default DarkModeButton

components/TagsBar.js

@@ -1,7 +1,7 @@
 import Link from 'next/link'
 
 /**
- * 标签组
+ * 标签组导航条，默认隐藏仅在移动端显示
  * @param tags
  * @param currentTag
  * @returns {JSX.Element}
@@ -10,7 +10,7 @@ import Link from 'next/link'
 const TagsBar = ({ tags, currentTag }) => {
   if (!tags) return <></>
   return (
-    <div id='tags-bar' className='fixed  top-16 duration-500 z-10 w-full border-b dark:border-gray-600'>
+    <div id='tags-bar' className='fixed block xl:hidden top-16 duration-500 z-10 w-full border-b dark:border-gray-600'>
       <div className='bg-white dark:bg-gray-800 flex overflow-x-auto'>
       <div className='z-30 sticky left-0 flex'>
         <div className='px-2 bg-white dark:bg-gray-800'/>

layouts/BaseLayout.js

@@ -39,7 +39,7 @@ const BaseLayout = ({ children, layout, fullWidth, tags, meta, post, ...customMe
 
       <TopNav tags={tags} post={post} />
       {/* Middle Wrapper */}
-      <main className='flex dark:bg-gray-900'>
+      <main className='flex dark:bg-black'>
         <SideBar tags={tags} post={post} />
         <div className='flex flex-grow' ref={targetRef}>
             {children}

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>
   )