From bca48b01ec80d7eca35bba5304fd62d8ffc57398 Mon Sep 17 00:00:00 2001
From: tangly1024 <tlyong1992@hotmail.com>
Date: Mon, 28 Mar 2022 15:32:57 +0800
Subject: [PATCH] =?UTF-8?q?hexo=20=E6=B7=B1=E8=89=B2=E6=A8=A1=E5=BC=8F?=
 =?UTF-8?q?=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 themes/hexo/LayoutSlug.js                    |  2 +-
 themes/hexo/components/ArticleCopyright.js   |  2 +-
 themes/hexo/components/ArticleDetail.js      |  2 +-
 themes/hexo/components/BlogPostCard.js       |  2 +-
 themes/hexo/components/Card.js               |  2 +-
 themes/hexo/components/HeaderArticle.js      | 13 +++++++++++++
 themes/hexo/components/MenuButtonGroupTop.js |  2 +-
 themes/hexo/components/TopNav.js             |  4 ++--
 8 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/themes/hexo/LayoutSlug.js b/themes/hexo/LayoutSlug.js
index 76ff42de..0fac6b7c 100644
--- a/themes/hexo/LayoutSlug.js
+++ b/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>
diff --git a/themes/hexo/components/ArticleCopyright.js b/themes/hexo/components/ArticleCopyright.js
index 9275a664..9e7d79f6 100644
--- a/themes/hexo/components/ArticleCopyright.js
+++ b/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'} >
diff --git a/themes/hexo/components/ArticleDetail.js b/themes/hexo/components/ArticleDetail.js
index 8ba94250..7913e6c6 100644
--- a/themes/hexo/components/ArticleDetail.js
+++ b/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>)
diff --git a/themes/hexo/components/BlogPostCard.js b/themes/hexo/components/BlogPostCard.js
index 6fae258b..3087ea17 100644
--- a/themes/hexo/components/BlogPostCard.js
+++ b/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'>
diff --git a/themes/hexo/components/Card.js b/themes/hexo/components/Card.js
index c5c2aeb3..feda0330 100644
--- a/themes/hexo/components/Card.js
+++ b/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>
diff --git a/themes/hexo/components/HeaderArticle.js b/themes/hexo/components/HeaderArticle.js
index ffb43bd7..1f9438dd 100644
--- a/themes/hexo/components/HeaderArticle.js
+++ b/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"
diff --git a/themes/hexo/components/MenuButtonGroupTop.js b/themes/hexo/components/MenuButtonGroupTop.js
index 6330d787..0d21721f 100644
--- a/themes/hexo/components/MenuButtonGroupTop.js
+++ b/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} >
diff --git a/themes/hexo/components/TopNav.js b/themes/hexo/components/TopNav.js
index 84d6395b..d4a14b00 100644
--- a/themes/hexo/components/TopNav.js
+++ b/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>