夜间模式适配

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={
           {