gitbook主题深色模式微调

themes/gitbook/components/BlogPostCard.js

@@ -1,25 +1,36 @@
+import Badge from '@/components/Badge'
+import NotionIcon from '@/components/NotionIcon'
 import { siteConfig } from '@/lib/config'
+import { checkContainHttp, sliceUrlFromHttp } from '@/lib/utils'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
-import { checkContainHttp, sliceUrlFromHttp } from '@/lib/utils'
-import NotionIcon from '@/components/NotionIcon'
-import Badge from '@/components/Badge'
 import CONFIG from '../config'
 
 const BlogPostCard = ({ post, className }) => {
   const router = useRouter()
   const currentSelected = router.asPath.split('?')[0] === '/' + post.slug
-  const url = checkContainHttp(post.slug) ? sliceUrlFromHttp(post.slug) : `${siteConfig('SUB_PATH', '')}/${post.slug}`
+  const url = checkContainHttp(post.slug)
+    ? sliceUrlFromHttp(post.slug)
+    : `${siteConfig('SUB_PATH', '')}/${post.slug}`
   return (
-        <Link href={url} passHref>
-            <div key={post.id} className={`${className} relative py-1.5 cursor-pointer px-1.5 hover:bg-gray-50 rounded-md dark:hover:bg-gray-600  ${currentSelected ? 'bg-green-50 text-green-500 dark:bg-yellow-100 dark:text-yellow-600' : ''}`}>
-                <div className="w-full select-none">
-                    {siteConfig('POST_TITLE_ICON') && <NotionIcon icon={post?.pageIcon} />} {post.title}
-                </div>
-                {/* 最新文章加个红点 */}
-                {post?.isLatest && siteConfig('GITBOOK_LATEST_POST_RED_BADGE', false, CONFIG) && <Badge/>}
-            </div>
-        </Link>
+    <Link href={url} passHref>
+      <div
+        key={post.id}
+        className={`${className} relative py-1.5 cursor-pointer px-1.5 hover:bg-gray-50 rounded-md dark:hover:bg-yellow-100 dark:hover:text-yellow-600
+                    ${currentSelected && 'bg-green-50 text-green-500 dark:bg-yellow-100 dark:text-yellow-600'}`}>
+        <div className='w-full select-none'>
+          {siteConfig('POST_TITLE_ICON') && (
+            <NotionIcon icon={post?.pageIcon} />
+          )}{' '}
+          {post.title}
+        </div>
+        {/* 最新文章加个红点 */}
+        {post?.isLatest &&
+          siteConfig('GITBOOK_LATEST_POST_RED_BADGE', false, CONFIG) && (
+            <Badge />
+          )}
+      </div>
+    </Link>
   )
 }
 

themes/gitbook/components/NavPostItem.js

@@ -28,7 +28,7 @@ const NavPostItem = props => {
       <>
         <div
           onClick={toggleOpenSubMenu}
-          className='select-none relative flex justify-between text-sm cursor-pointer p-2 hover:bg-gray-50 rounded-md dark:hover:bg-gray-600'
+          className='select-none relative flex justify-between text-sm cursor-pointer p-2 hover:bg-gray-50 rounded-md dark:hover:bg-yellow-100 dark:hover:text-yellow-600'
           key={group?.category}>
           <span>{group?.category}</span>
           <div className='inline-flex items-center select-none pointer-events-none '>

themes/gitbook/components/PageNavDrawer.js

@@ -8,7 +8,7 @@ import NavPostList from './NavPostList'
  * @returns {JSX.Element}
  * @constructor
  */
-const PageNavDrawer = (props) => {
+const PageNavDrawer = props => {
   const { pageNavVisible, changePageNavVisible } = useGitBookGlobal()
   const { filteredNavPages } = props
 
@@ -16,21 +16,29 @@ const PageNavDrawer = (props) => {
     changePageNavVisible(!pageNavVisible)
   }
 
-  return <>
-        <div id='gitbook-left-float' className='fixed top-0 left-0 z-40 md:hidden'>
-            {/* 侧边菜单 */}
-            <div
-                className={(pageNavVisible ? 'animate__slideInLeft ' : '-ml-80 animate__slideOutLeft') +
-                    ' overflow-y-hidden shadow-card w-72 duration-200 fixed left-1 top-16 rounded py-2 bg-white dark:bg-gray-600'}>
-                <div className='dark:text-gray-400 text-gray-600 h-96 overflow-y-scroll p-3'>
-                    {/* 所有文章列表 */}
-                    <NavPostList filteredNavPages={filteredNavPages} />
-                </div>
-            </div>
+  return (
+    <>
+      <div
+        id='gitbook-left-float'
+        className='fixed top-0 left-0 z-40 md:hidden'>
+        {/* 侧边菜单 */}
+        <div
+          className={`${pageNavVisible ? 'animate__slideInLeft ' : '-ml-80 animate__slideOutLeft'} 
+                      overflow-y-hidden shadow-card w-72 duration-200 fixed left-1 top-16 rounded py-2 bg-white dark:bg-hexo-black-gray`}>
+          {/* 所有文章列表 */}
+          <div className='dark:text-gray-400 text-gray-600 h-96 overflow-y-scroll p-3'>
+            <NavPostList filteredNavPages={filteredNavPages} />
+          </div>
         </div>
-        {/* 背景蒙版 */}
-        <div id='left-drawer-background' className={(pageNavVisible ? 'block' : 'hidden') + ' fixed top-0 left-0 z-30 w-full h-full'}
-            onClick={switchVisible} />
+      </div>
+
+      {/* 背景蒙版 */}
+      <div
+        id='left-drawer-background'
+        className={`${pageNavVisible ? 'block' : 'hidden'} fixed top-0 left-0 z-30 w-full h-full`}
+        onClick={switchVisible}
+      />
     </>
+  )
 }
 export default PageNavDrawer