hexo 深色模式调整

themes/hexo/LayoutSlug.js

@@ -53,7 +53,7 @@ export const LayoutSlug = props => {
       showTag={false}
       floatSlot={floatSlot}
     >
-      <div className="w-full lg:shadow-md lg:hover:shadow-xl lg:border lg:border-gray-100 lg:rounded-xl lg:px-2 lg:py-4 bg-white dark:bg-hexo-black-gray dark:border-black">
+      <div className="w-full lg:shadow-sm lg:hover:shadow lg:border lg:rounded-xl lg:px-2 lg:py-4 bg-white dark:bg-hexo-black-gray dark:border-black">
         {!lock && <ArticleDetail {...props} />}
         {lock && <ArticleLock password={post.password} validPassword={validPassword} />}
       </div>

themes/hexo/components/ArticleCopyright.js

@@ -17,7 +17,7 @@ export default function ArticleCopyright () {
 
   const { locale } = useGlobal()
   return <section className="dark:text-gray-300 mt-6 mx-1 font-sans">
-    <ul className="overflow-x-auto whitespace-nowrap text-sm dark:bg-gray-700 bg-gray-100 p-5 leading-8 border-l-2 border-indigo-500">
+    <ul className="overflow-x-auto whitespace-nowrap text-sm dark:bg-gray-900 bg-gray-100 p-5 leading-8 border-l-2 border-indigo-500">
       <li>
         <strong className='mr-2'>{locale.COMMON.AUTHOR}:</strong>
         <Link href={'/about'} >

themes/hexo/components/ArticleDetail.js

@@ -76,7 +76,7 @@ export default function ArticleDetail (props) {
     <hr className='border-dashed'/>
 
     {/* 评论互动 */}
-    <div className="duration-200  overflow-x-auto bg-white dark:bg-gray-800 px-3">
+    <div className="duration-200 overflow-x-auto bg-white dark:bg-hexo-black-gray px-3">
        <Comment frontMatter={post} />
     </div>
   </div>)

themes/hexo/components/BlogPostCard.js

@@ -8,7 +8,7 @@ import CONFIG_HEXO from '../config_hexo'
 const BlogPostCard = ({ post, showSummary }) => {
   const showPreview = CONFIG_HEXO.POST_LIST_PREVIEW && post.blockMap
   return (
-    <div className='w-full shadow hover:shadow-2xl border border-gray-100 dark:border-black rounded-xl bg-white dark:bg-hexo-black-gray duration-300'>
+    <div className='w-full shadow-sm hover:shadow border dark:border-black rounded-xl bg-white dark:bg-hexo-black-gray duration-300'>
       <div key={post.id} className='animate__animated animate__fadeIn flex flex-col-reverse lg:flex-row justify-between duration-300'>
 
       <div className='lg:p-8 p-4 flex flex-col w-full'>

themes/hexo/components/Card.js

@@ -1,7 +1,7 @@
 const Card = ({ children, headerSlot, className }) => {
   return <div className={className}>
     <>{headerSlot}</>
-    <section className="shadow-md hover:shadow-xl dark:text-gray-300 border border-gray-100 dark:border-black rounded-xl px-2 py-4 bg-white dark:bg-hexo-black-gray lg:duration-100">
+    <section className="shadow-sm hover:shadow dark:text-gray-300 border dark:border-black rounded-xl px-2 py-4 bg-white dark:bg-hexo-black-gray lg:duration-100">
         {children}
     </section>
   </div>

themes/hexo/components/HeaderArticle.js

@@ -6,6 +6,7 @@ import { useEffect } from 'react'
 
 export default function HeaderArticle ({ post }) {
   const headerImage = post?.page_cover ? `url("${post.page_cover}")` : `url("/${CONFIG_HEXO.HOME_BANNER_IMAGE}")`
+  const { isDarkMode } = useGlobal()
 
   const { locale } = useGlobal()
   const date = formatDate(
@@ -24,6 +25,7 @@ export default function HeaderArticle ({ post }) {
       nav && nav.classList.replace('bg-none', 'bg-white')
       nav && nav.classList.replace('text-white', 'text-black')
     }
+    updateTopNav()
   }
   useEffect(() => {
     scrollTrigger()
@@ -33,6 +35,17 @@ export default function HeaderArticle ({ post }) {
     }
   })
 
+  const updateTopNav = () => {
+    if (!isDarkMode) {
+      const stickyNavElement = document.getElementById('sticky-nav')
+      if (window.scrollY < window.innerHeight) {
+        stickyNavElement?.classList?.add('dark')
+      } else {
+        stickyNavElement?.classList?.remove('dark')
+      }
+    }
+  }
+
   return (
       <div
         id="header"

themes/hexo/components/MenuButtonGroupTop.js

@@ -18,7 +18,7 @@ const MenuButtonGroupTop = (props) => {
     links = links.concat(customNav)
   }
 
-  return <nav id='nav' className='leading-8 flex justify-center font-sans w-full'>
+  return <nav id='nav' className='leading-8 flex justify-center font-sans font-light w-full'>
     {links.map(link => {
       if (link.show) {
         return <Link key={`${link.to}`} title={link.to} href={link.to} >

themes/hexo/components/TopNav.js

@@ -91,8 +91,8 @@ const TopNav = (props) => {
     <SearchDrawer cRef={searchDrawer} slot={searchDrawerSlot}/>
 
     {/* 导航栏 */}
-    <div id='sticky-nav' className={`${CONFIG_HEXO.NAV_TYPE !== 'normal' ? 'fixed bg-white' : ' bg-none -mb-10'} animate__animated animate__fadeIn dark:bg-hexo-black-gray dark:text-gray-200 bg-opacity-80 text-black w-full top-0 z-20 transform duration-200 font-sans`}>
-      <div className='w-full flex justify-between items-center px-4 py-2 shadow-sm'>
+    <div id='sticky-nav' className={`${CONFIG_HEXO.NAV_TYPE !== 'normal' ? 'fixed bg-white' : ' bg-none -mb-10'} animate__animated animate__fadeIn dark:bg-hexo-black-gray dark:text-gray-200 text-black w-full top-0 z-20 transform duration-200 font-san `}>
+      <div className='w-full flex justify-between items-center px-4 py-2 border dark:border-transparent'>
         <div className='flex'>
          <Logo/>
         </div>