夜间模式适配

components/Container.js

@@ -3,6 +3,8 @@ import React, { useCallback, useEffect } from 'react'
 import CommonHead from '@/components/CommonHead'
 import TopNav from '@/components/TopNav'
 import throttle from 'lodash.throttle'
+import BLOG from '@/blog.config'
+import { useTheme } from '@/lib/theme'
 
 const Container = ({ children, layout, fullWidth, tags, meta, ...customMeta }) => {
   let windowTop = 0
@@ -28,12 +30,13 @@ const Container = ({ children, layout, fullWidth, tags, meta, ...customMeta }) =
       window.removeEventListener('scroll', scrollTrigger)
     }
   })
+  const { theme } = useTheme()
   return (
-    <>
+    <div className={[BLOG.font, theme].join(' ')}>
       <CommonHead meta={meta} />
       <TopNav tags={tags}/>
       {children}
-    </>
+    </div>
   )
 }
 

components/JumpToTop.js

@@ -35,7 +35,7 @@ const JumpToTop = ({ targetRef }) => {
       <div
         className='border dark:border-gray-500 dark:bg-gray-600 bg-white cursor-pointer hover:shadow-2xl'
         onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}>
-        <div className='absolute bg-white z-20 hover:opacity-0 w-11 py-2.5 text-center'>
+        <div className='absolute bg-white dark:text-gray-200 dark:bg-gray-600 z-20 hover:opacity-0 w-11 py-2.5 text-center'>
             {percent}%
         </div>
         <a className='dark:text-gray-200 fa fa-arrow-up p-4 transform hover:scale-150 duration-200'

components/Pagination.js

@@ -15,7 +15,7 @@ const Pagination = ({ page, showNext }) => {
   const router = useRouter()
   const currentPage = +page
   return (
-    <div className=' my-10 flex justify-between font-medium text-black dark:text-gray-100'>
+    <div className='my-10 flex justify-between font-medium text-black dark:text-gray-100 space-x-2'>
       <Link
         href={
           {

layouts/ArticleLayout.js

@@ -8,13 +8,10 @@ import Progress from '@/components/Progress'
 import { useRef } from 'react'
 import Image from 'next/image'
 import RewardButton from '@/components/RewardButton'
-import { useTheme } from '@/lib/theme'
 import BlogPostMini from '@/components/BlogPostMini'
 import { useRouter } from 'next/router'
 import ShareButton from '@/components/ShareButton'
 import JumpToTop from '@/components/JumpToTop'
-import CommonHead from '@/components/CommonHead'
-import TopNav from '@/components/TopNav'
 import SideBar from '@/components/SideBar'
 import Footer from '@/components/Footer'
 import Container from '@/components/Container'
@@ -38,11 +35,10 @@ const ArticleLayout = ({
     type: 'article'
   }
   const targetRef = useRef(null)
-  const { theme } = useTheme()
   const url = BLOG.link + useRouter().asPath
 
   return (
-    <Container className={`${BLOG.font} ${theme}`} meta={meta} tags={tags}>
+    <Container meta={meta} tags={tags}>
 
       {/* live2d 看板娘 */}
        <script async src='https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/autoload.js' />

layouts/DefaultLayout.js

@@ -4,8 +4,6 @@ import Pagination from '@/components/Pagination'
 import BLOG from '@/blog.config'
 import { useRouter } from 'next/router'
 import { useTheme } from '@/lib/theme'
-import CommonHead from '@/components/CommonHead'
-import TopNav from '@/components/TopNav'
 import Tags from '@/components/Tags'
 import SideBar from '@/components/SideBar'
 import Footer from '@/components/Footer'
@@ -47,10 +45,8 @@ const DefaultLayout = ({ tags, posts, page, currentTag, ...customMeta }) => {
     showNext = page * BLOG.postsPerPage < totalPosts
   }
 
-  const { theme } = useTheme()
-
   return (
-    <Container id='wrapper' className={theme} meta={meta} tags={tags}>
+    <Container id='wrapper' meta={meta} tags={tags}>
 
       <div className={`${BLOG.font} flex justify-between bg-gray-100 dark:bg-black min-h-screen`}>
         {/* 侧边菜单 */}