diff --git a/blog.config.js b/blog.config.js
index 4a65d435..460f9049 100644
--- a/blog.config.js
+++ b/blog.config.js
@@ -79,7 +79,7 @@ const BLOG = {
   ADSENSE_GOOGLE_ID: process.env.NEXT_PUBLIC_ADSENSE_GOOGLE_ID || '', // 谷歌广告ID e.g ca-pub-xxxxxxxxxxxxxxxx
 
   isProd: process.env.VERCEL_ENV === 'production', // distinguish between development and production environment (ref: https://vercel.com/docs/environment-variables#system-environment-variables)  isProd: process.env.VERCEL_ENV === 'production' // distinguish between development and production environment (ref: https://vercel.com/docs/environment-variables#system-environment-variables)
-  VERSION: '2.8.3' // 版本号
+  VERSION: '2.8.4' // 版本号
 }
 
 module.exports = BLOG
diff --git a/components/Tabs.js b/components/Tabs.js
index a6a9b1d9..f3b0477a 100644
--- a/components/Tabs.js
+++ b/components/Tabs.js
@@ -35,7 +35,7 @@ const Tabs = ({ className, children }) => {
     setCurrentTab(i)
   }
 
-  return <div className={'mb-5 bg-white dark:bg-gray-800 duration-200 ' + className}>
+  return <div className={'mb-5 duration-200 ' + className}>
     <ul className='flex justify-center space-x-5 pb-4 dark:text-gray-400 text-gray-600'>
       {children.map((item, index) => {
         return <li key={index}
diff --git a/package.json b/package.json
index 96f313f0..b8b2de14 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "notion-next",
-  "version": "2.8.3",
+  "version": "2.8.4",
   "homepage": "https://github.com/tangly1024/NotionNext.git",
   "license": "MIT",
   "repository": {
diff --git a/styles/globals.css b/styles/globals.css
index aca04ffd..dd5d8d73 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -121,33 +121,6 @@ nav {
   @apply max-w-0
 }
 
-/* 渐变透明度 */
-.line-x-opacity{
-  background: -webkit-linear-gradient(left, rgba(255,255,255,0), rgb(255, 255, 255)); /* Safari 5.1 - 6.0 */
-  background: -o-linear-gradient(right, rgba(255, 255, 255,0), rgb(255, 255, 255)); /* Opera 11.1 - 12.0 */
-  background: -moz-linear-gradient(right, rgba(255, 255, 255,0), rgba(255, 255, 255)); /* Firefox 3.6 - 15 */
-  background: linear-gradient(to right, rgba(255, 255, 255,0), rgba(255, 255, 255)); /* 标准的语法（必须放在最后） */
-}
-
-.-line-x-opacity{
-  background: -webkit-linear-gradient(right, rgba(255,255,255,0), rgb(255, 255, 255)); /* Safari 5.1 - 6.0 */
-  background: -o-linear-gradient(left, rgba(255, 255, 255,0), rgb(255, 255, 255)); /* Opera 11.1 - 12.0 */
-  background: -moz-linear-gradient(left, rgba(255, 255, 255,0), rgba(255, 255, 255)); /* Firefox 3.6 - 15 */
-  background: linear-gradient(to left, rgba(255, 255, 255,0), rgba(255, 255, 255)); /* 标准的语法（必须放在最后） */
-}
-.dark .line-x-opacity{
-  background: -webkit-linear-gradient(left, rgba(31, 41, 55,0), rgb(31, 41, 55)); /* Safari 5.1 - 6.0 */
-  background: -o-linear-gradient(right, rgba(31, 41, 55,0), rgb(31, 41, 55)); /* Opera 11.1 - 12.0 */
-  background: -moz-linear-gradient(right, rgba(31, 41, 55,0), rgba(31, 41, 55)); /* Firefox 3.6 - 15 */
-  background: linear-gradient(to right, rgba(31, 41, 55,0), rgba(31, 41, 55)); /* 标准的语法（必须放在最后） */
-}
-
-.dark .-line-x-opacity{
-  background: -webkit-linear-gradient(right, rgba(31, 41, 55,0), rgb(31, 41, 55)); /* Safari 5.1 - 6.0 */
-  background: -o-linear-gradient(left, rgba(31, 41, 55,0), rgb(31, 41, 55)); /* Opera 11.1 - 12.0 */
-  background: -moz-linear-gradient(left, rgba(31, 41, 55,0), rgb(31, 41, 55)); /* Firefox 3.6 - 15 */
-  background: linear-gradient(to left, rgba(31, 41, 55,0), rgb(31, 41, 55)); /* 标准的语法（必须放在最后） */
-}
 
 .glassmorphism{
   background: hsla(0, 0%, 100%, .75);
@@ -165,30 +138,6 @@ nav {
   background: none !important;
 }
 
-.article-cover{
-  -webkit-text-size-adjust: 100%;
-  font-size: 14px;
-  font-family: -apple-system,SF UI Text,Arial,PingFang SC,Hiragino Sans GB,Microsoft YaHei,WenQuanYi Micro Hei,sans-serif;
-  -webkit-font-smoothing: antialiased;
-  color: rgba(0,0,0,.75);
-  font-variant-ligatures: common-ligatures;
-  line-height: 1.625;
-  tab-size: 4;
-  outline: 0;
-  font-weight: normal;
-  -webkit-box-sizing: border-box;
-  padding: 0;
-  margin: 0;
-  position: relative;
-  z-index: 998;
-  padding-top: 160px;
-  bottom: -1px;
-  margin-top: -200px;
-  width: 100%;
-  background-image: linear-gradient(-180deg,rgba(255,255,255,0) 0%,#fff 70%);
-  padding-bottom: 34px;
-}
-
 .shadow-text{
   text-shadow: 0.1em 0.1em 0.2em black;
 }
diff --git a/tailwind.config.js b/tailwind.config.js
index bd57d456..829bee9f 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -13,6 +13,11 @@ module.exports = {
         },
         night: {
           DEFAULT: BLOG.BACKGROUND_DARK || '#111827'
+        },
+        hexo: {
+          'background-gray': '#f5f5f5',
+          'black-gray': '#101414',
+          'light-gray': '#e5e5e5'
         }
       }
     }
diff --git a/themes/hexo/LayoutBase.js b/themes/hexo/LayoutBase.js
index 0c4b7600..064743bf 100644
--- a/themes/hexo/LayoutBase.js
+++ b/themes/hexo/LayoutBase.js
@@ -44,7 +44,7 @@ const LayoutBase = (props) => {
     return () => document.removeEventListener('scroll', scrollListener)
   }, [show])
 
-  return (<div className='bg-white dark:bg-gray-900'>
+  return (<div className='bg-hexo-background-gray dark:bg-black'>
     <CommonHead meta={meta} />
 
     <TopNav {...props}/>
@@ -53,8 +53,8 @@ const LayoutBase = (props) => {
 
     <main id='wrapper' className='w-full py-8 min-h-screen'>
 
-      <div id='container-inner' className='pt-14 w-full mx-auto lg:flex justify-center md:space-x-4'>
-        <div className='flex-grow w-full max-w-4xl'>
+      <div id='container-inner' className='pt-14 w-full mx-auto lg:flex justify-center lg:space-x-4'>
+        <div className='flex-grow w-full lg:max-w-4xl'>
           {onLoading ? <LoadingCover/> : children}
         </div>
 
@@ -64,7 +64,7 @@ const LayoutBase = (props) => {
     </main>
 
      {/* 右下角悬浮 */}
-     <div className='bottom-12 right-1 fixed justify-end z-20 font-sans text-white bg-blue-400 rounded'>
+     <div className='bottom-12 right-1 fixed justify-end z-20 font-sans text-white bg-indigo-500 dark:bg-hexo-black-gray rounded-sm'>
         <div className={(show ? 'animate__animated ' : 'hidden') + ' animate__fadeInUp justify-center duration-300  animate__faster flex flex-col items-center cursor-pointer '}>
           <FloatDarkModeButton/>
           {floatSlot}
diff --git a/themes/hexo/LayoutCategoryIndex.js b/themes/hexo/LayoutCategoryIndex.js
index 7b0e35a0..1556861a 100644
--- a/themes/hexo/LayoutCategoryIndex.js
+++ b/themes/hexo/LayoutCategoryIndex.js
@@ -25,7 +25,7 @@ export const LayoutCategoryIndex = props => {
               <Link key={category.name} href={`/category/${category.name}`} passHref>
                 <div
                   className={
-                    ' duration-300 dark:hover:text-white rounded-lg px-5 cursor-pointer py-2 hover:bg-blue-400 hover:text-white'
+                    ' duration-300 dark:hover:text-white px-5 cursor-pointer py-2 hover:text-indigo-400'
                   }
                 >
                   <i className="mr-4 fas fa-folder" />
diff --git a/themes/hexo/LayoutSearch.js b/themes/hexo/LayoutSearch.js
index 60af7cd0..9b0803ec 100644
--- a/themes/hexo/LayoutSearch.js
+++ b/themes/hexo/LayoutSearch.js
@@ -55,7 +55,7 @@ export const LayoutSearch = props => {
                 >
                   <div
                     className={
-                      ' duration-300 dark:hover:text-white rounded-lg px-5 cursor-pointer py-2 hover:bg-blue-400 hover:text-white'
+                      ' duration-300 dark:hover:text-white rounded-lg px-5 cursor-pointer py-2 hover:bg-indigo-400 hover:text-white'
                     }
                   >
                     <i className="mr-4 fas fa-folder" />
diff --git a/themes/hexo/LayoutSlug.js b/themes/hexo/LayoutSlug.js
index 2103a3d3..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 dark:border-gray-600 lg:shadow-md lg:hover:shadow-xl lg:border lg:border-gray-100 lg:rounded-xl lg:px-2 lg:py-4 lg:bg-white lg:dark:bg-gray-800">
+      <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 aadf73b9..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-blue-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 38c7e073..7913e6c6 100644
--- a/themes/hexo/components/ArticleDetail.js
+++ b/themes/hexo/components/ArticleDetail.js
@@ -38,7 +38,7 @@ export default function ArticleDetail (props) {
   })
 
   return (<div id="container" className="max-w-5xl overflow-x-auto flex-grow mx-auto md:w-full md:px-5 ">
-    <article itemScope itemType="https://schema.org/Movie" className="subpixel-antialiased bg-white dark:bg-gray-800" >
+    <article itemScope itemType="https://schema.org/Movie" className="subpixel-antialiased" >
 
       {/* Notion文章主体 */}
       <section id='notion-article' className='px-5'>
@@ -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/ArticleLock.js b/themes/hexo/components/ArticleLock.js
index 71d2354f..b7165362 100644
--- a/themes/hexo/components/ArticleLock.js
+++ b/themes/hexo/components/ArticleLock.js
@@ -28,7 +28,7 @@ export const ArticleLock = props => {
       <div className='font-bold'>{locale.COMMON.ARTICLE_LOCK_TIPS}</div>
       <div className='flex'>
         <input id="password" type='password' className='w-full text-sm pl-5 rounded-l transition focus:shadow-lg dark:text-gray-300 font-light leading-10 text-black bg-gray-100 dark:bg-gray-500'></input>
-        <div onClick={submitPassword} className="px-3 whitespace-nowrap cursor-pointer items-center justify-center py-2 bg-blue-500 hover:bg-blue-400 text-white rounded-r duration-300" >
+        <div onClick={submitPassword} className="px-3 whitespace-nowrap cursor-pointer items-center justify-center py-2 bg-indigo-500 hover:bg-indigo-400 text-white rounded-r duration-300" >
           <i className={'duration-200 cursor-pointer fas fa-key'} >&nbsp;{locale.COMMON.SUBMIT}</i>
         </div>
       </div>
diff --git a/themes/hexo/components/BlogPostArchive.js b/themes/hexo/components/BlogPostArchive.js
index 5c3bc169..610e575a 100644
--- a/themes/hexo/components/BlogPostArchive.js
+++ b/themes/hexo/components/BlogPostArchive.js
@@ -16,10 +16,10 @@ const BlogPostArchive = ({ posts = [], archiveTitle }) => {
       <div className='pt-16 pb-4 text-3xl dark:text-gray-300' id={archiveTitle}>{archiveTitle}</div>
       <ul>
         {posts.map(post => (
-          <li key={post.id} className='border-l-2 p-1 text-xs md:text-base items-center  hover:scale-x-105 hover:border-gray-500 dark:hover:border-gray-300 dark:border-gray-400 transform duration-500'>
+          <li key={post.id} className='border-l-2 p-1 text-xs md:text-base items-center  hover:scale-x-105 hover:border-indigo-500 dark:hover:border-indigo-300 dark:border-indigo-400 transform duration-500'>
             <div id={post?.date?.start_date}><span className='text-gray-400'>{post.date.start_date}</span> &nbsp;
               <Link href={`${BLOG.PATH}/article/${post.slug}`} passHref>
-                <a className='dark:text-gray-400  dark:hover:text-gray-300 overflow-x-hidden hover:underline cursor-pointer text-gray-600'>{post.title}</a>
+                <a className='dark:text-gray-400  dark:hover:text-indigo-300 overflow-x-hidden hover:underline cursor-pointer text-gray-600'>{post.title}</a>
               </Link>
             </div>
           </li>
diff --git a/themes/hexo/components/BlogPostCard.js b/themes/hexo/components/BlogPostCard.js
index 13e63e4c..3087ea17 100644
--- a/themes/hexo/components/BlogPostCard.js
+++ b/themes/hexo/components/BlogPostCard.js
@@ -8,23 +8,23 @@ 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-gray-600 rounded-xl bg-white dark:bg-gray-800 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'>
         <Link href={`${BLOG.PATH}/article/${post.slug}`} passHref>
-          <a className={`replace cursor-pointer hover:underline text-2xl font-sans ${showPreview ? 'text-center' : ''} leading-tight text-gray-700 dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400`}>
+          <a className={`replace cursor-pointer hover:underline text-2xl font-sans ${showPreview ? 'text-center' : ''} leading-tight text-gray-700 dark:text-gray-100 hover:text-indigo-700 dark:hover:text-indigo-400`}>
             {post.title}
           </a>
         </Link>
 
-        <div className={`flex mt-2 items-center ${showPreview ? 'justify-center' : 'justify-start'} flex-wrap dark:text-gray-500 text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 `}>
+        <div className={`flex mt-2 items-center ${showPreview ? 'justify-center' : 'justify-start'} flex-wrap dark:text-gray-500 text-gray-400 hover:text-indigo-700 dark:hover:text-indigo-400`}>
           <Link href={`/archive#${post?.date?.start_date?.substr(0, 7)}`} passHref>
             <a className='font-light hover:underline cursor-pointer text-sm leading-4 mr-3'><i className="far fa-calendar-alt mr-1"/>{post.date.start_date}</a>
           </Link>
         </div>
 
-        {(!showPreview || showSummary) && <p className='replace my-4 text-gray-700 dark:text-gray-300 text-sm font-light leading-7'>
+        {(!showPreview || showSummary) && <p className='replace my-4 text-gray-700  dark:text-gray-300 text-sm font-light leading-7'>
           {post.summary}
         </p>}
 
@@ -44,7 +44,7 @@ const BlogPostCard = ({ post, showSummary }) => {
 
         <div className='text-gray-400 justify-between flex'>
           <Link href={`/category/${post.category}`} passHref>
-              <a className='cursor-pointer font-light text-sm hover:underline transform'>
+              <a className='cursor-pointer font-light text-sm hover:underline hover:text-indigo-700 dark:hover:text-indigo-400 transform'>
                 <i className='mr-1 far fa-folder' />{post.category}
               </a>
             </Link>
diff --git a/themes/hexo/components/Card.js b/themes/hexo/components/Card.js
index 288b826f..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-gray-700 rounded-xl px-2 py-4 bg-white dark:bg-gray-800 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/Catalog.js b/themes/hexo/components/Catalog.js
index 4c98b21c..8045800d 100644
--- a/themes/hexo/components/Catalog.js
+++ b/themes/hexo/components/Catalog.js
@@ -71,7 +71,7 @@ const Catalog = ({ toc }) => {
                           display: 'inline-block',
                           marginLeft: tocItem.indentLevel * 16
                         }}
-                        className={`${activeSection === id && ' font-bold text-red-400 underline'}`}
+                        className={`${activeSection === id && ' font-bold text-indigo-400 underline'}`}
                       >
                         {tocItem.text}
                       </span>
diff --git a/themes/hexo/components/CategoryGroup.js b/themes/hexo/components/CategoryGroup.js
index a14e15d9..4dd17282 100644
--- a/themes/hexo/components/CategoryGroup.js
+++ b/themes/hexo/components/CategoryGroup.js
@@ -11,8 +11,8 @@ const CategoryGroup = ({ currentCategory, categories }) => {
         const selected = currentCategory === category.name
         return <Link key={category.name} href={`/category/${category.name}`} passHref>
           <a className={(selected
-            ? 'hover:text-white dark:hover:text-white bg-blue-600 text-white '
-            : 'dark:text-gray-400 text-gray-500 hover:text-white dark:hover:text-white hover:bg-blue-600') +
+            ? 'hover:text-white dark:hover:text-white bg-indigo-600 text-white '
+            : 'dark:text-gray-400 text-gray-500 hover:text-white dark:hover:text-white hover:bg-indigo-600') +
             '  text-sm w-full items-center duration-300 px-2  cursor-pointer py-1 font-light'}>
               <div> <i className={`mr-2 fas ${selected ? 'fa-folder-open' : 'fa-folder'}`} />{category.name}({category.count})</div>
             </a>
diff --git a/themes/hexo/components/Footer.js b/themes/hexo/components/Footer.js
index 2625e034..44a19a55 100644
--- a/themes/hexo/components/Footer.js
+++ b/themes/hexo/components/Footer.js
@@ -7,12 +7,12 @@ const Footer = ({ title }) => {
   const startYear = BLOG.SINCE && BLOG.SINCE !== currentYear && BLOG.SINCE + '-'
   return (
     <footer
-      className='font-sans dark:bg-gray-900 flex-shrink-0 bg-blue-400 justify-center text-center m-auto w-full leading-6 text-gray-100 text-sm p-6'
+      className='font-sans dark:bg-black flex-shrink-0 bg-hexo-light-gray justify-center text-center m-auto w-full leading-6  text-gray-600 dark:text-gray-100 text-sm p-6'
     >
-      <i className='fas fa-copyright' /> {`${startYear}${currentYear}`} <span><i className='mx-1 animate-pulse fas fa-heart'/> <a href={BLOG.LINK} className='underline font-bold text-gray-50 dark:text-gray-300 '>{BLOG.AUTHOR}</a>.
+      <i className='fas fa-copyright' /> {`${startYear}${currentYear}`} <span><i className='mx-1 animate-pulse fas fa-heart'/> <a href={BLOG.LINK} className='underline font-bold  dark:text-gray-300 '>{BLOG.AUTHOR}</a>.
       <br/>
 
-      <span>Powered by <a href='https://notion.so' className='underline font-bold text-gray-50 dark:text-gray-300'>Notion</a> & <a href='https://github.com/tangly1024/NotionNext' className='underline font-bold text-gray-50 dark:text-gray-300'>NotionNext {BLOG.VERSION}</a>.</span></span>
+      <span>Powered by <a href='https://notion.so' className='underline font-bold dark:text-gray-300'>Notion</a> & <a href='https://github.com/tangly1024/NotionNext' className='underline font-bold dark:text-gray-300'>NotionNext {BLOG.VERSION}</a>.</span></span>
 
       {BLOG.BEI_AN && <><br /><i className='fas fa-shield-alt' /> <a href='https://beian.miit.gov.cn/' className='mr-2'>{BLOG.BEI_AN}</a><br/></>}
       <br/>
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/InfoCard.js b/themes/hexo/components/InfoCard.js
index be02013e..3fcce159 100644
--- a/themes/hexo/components/InfoCard.js
+++ b/themes/hexo/components/InfoCard.js
@@ -9,7 +9,7 @@ export function InfoCard (props) {
   const router = useRouter()
   return <Card className={className}>
     <div
-      className='justify-center items-center flex hover:rotate-45 py-6 hover:scale-105 transform duration-200 cursor-pointer'
+      className='justify-center items-center flex hover:rotate-45 py-6 hover:scale-105 dark:text-gray-100 font-sans transform duration-200 cursor-pointer'
       onClick={() => {
         router.push('/')
       }}
@@ -23,7 +23,7 @@ export function InfoCard (props) {
         className='rounded-full'
       />
     </div>
-    <div className='text-center font-sans text-xl pb-4 dark:text-gray-300'>{BLOG.AUTHOR}</div>
+    <div className='text-center text-xl pb-4'>{BLOG.AUTHOR}</div>
     <div className='text-sm text-center'>{BLOG.BIO}</div>
     <MenuGroupCard {...props}/>
     <SocialButton />
diff --git a/themes/hexo/components/LatestPostsGroup.js b/themes/hexo/components/LatestPostsGroup.js
index 2adcac1a..a2e39f31 100644
--- a/themes/hexo/components/LatestPostsGroup.js
+++ b/themes/hexo/components/LatestPostsGroup.js
@@ -46,9 +46,9 @@ const LatestPostsGroup = ({ posts }) => {
               />
               <div
                 className={
-                  (selected ? ' text-blue-400 ' : 'dark:text-gray-400 ') +
-                  ' text-sm py-1.5 overflow-x-hidden hover:text-blue-400 px-2 duration-200 w-full rounded ' +
-                  'hover:text-white dark:hover:text-white cursor-pointer items-center flex'
+                  (selected ? ' text-indigo-400 ' : 'dark:text-gray-400 ') +
+                  ' text-sm py-1.5 overflow-x-hidden hover:text-indigo-600 px-2 duration-200 w-full rounded ' +
+                  'hover:text-white dark:hover:text-indigo-400 cursor-pointer items-center flex'
                 }
               >
                 <div>
diff --git a/themes/hexo/components/Logo.js b/themes/hexo/components/Logo.js
index 5eb76cea..f4c5d9c8 100644
--- a/themes/hexo/components/Logo.js
+++ b/themes/hexo/components/Logo.js
@@ -5,7 +5,7 @@ import React from 'react'
 const Logo = () => {
   return <Link href='/' passHref>
         <div className='flex flex-col justify-center items-center cursor-pointer space-y-3'>
-          <div className='font-sans text-xl'> {BLOG.TITLE}</div>
+          <div className='font-sans text-lg p-1.5 rounded bg-black text-white dark:border-white border-black border'> {BLOG.TITLE}</div>
         </div>
   </Link>
 }
diff --git a/themes/hexo/components/MenuButtonGroupTop.js b/themes/hexo/components/MenuButtonGroupTop.js
index 71bd7b8e..0d21721f 100644
--- a/themes/hexo/components/MenuButtonGroupTop.js
+++ b/themes/hexo/components/MenuButtonGroupTop.js
@@ -18,11 +18,11 @@ 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} >
-          <a className={'py-1.5 my-1 px-2 duration-300 text-base justify-center items-center cursor-pointer'} >
+          <a className={'py-1.5 my-1 px-3 duration-300 text-base justify-center items-center cursor-pointer'} >
             <div className='w-full flex text-sm items-center justify-center hover:scale-105 transform'>
               <i className={`${link.icon} mr-1`}/>
               <div className='text-center'>{link.name}</div>
diff --git a/themes/hexo/components/MenuGroupCard.js b/themes/hexo/components/MenuGroupCard.js
index 0ff25e37..3c8fee64 100644
--- a/themes/hexo/components/MenuGroupCard.js
+++ b/themes/hexo/components/MenuGroupCard.js
@@ -16,12 +16,12 @@ const MenuGroupCard = (props) => {
     { name: locale.COMMON.TAGS, to: '/tag', slot: tagSlot, show: CONFIG_HEXO.MENU_TAG }
   ]
 
-  return <nav id='nav' className='leading-8 flex justify-center text-gray-500 dark:text-gray-400 font-sans w-full'>
+  return <nav id='nav' className='leading-8 flex justify-center  font-sans w-full'>
       {links.map(link => {
         if (link.show) {
           return <Link key={`${link.to}`} title={link.to} href={link.to} >
           <a className={'py-1.5 my-1 px-2 duration-300 text-base justify-center items-center cursor-pointer'} >
-              <div className='w-full items-center justify-center hover:scale-105 duration-200 transform'>
+              <div className='w-full items-center justify-center hover:scale-105 duration-200 transform dark:hover:text-indigo-400 hover:text-indigo-600'>
                 <div className='text-center'>{link.name}</div>
                 <div className='text-center font-semibold'>{link.slot}</div>
               </div>
diff --git a/themes/hexo/components/MenuList.js b/themes/hexo/components/MenuList.js
index d2c4d056..bf8ac23b 100644
--- a/themes/hexo/components/MenuList.js
+++ b/themes/hexo/components/MenuList.js
@@ -26,7 +26,7 @@ const MenuList = (props) => {
         if (link && link.show) {
           const selected = (router.pathname === link.to) || (router.asPath === link.to)
           return <Link key={`${link.to}`} title={link.to} href={link.to} >
-          <a className={'py-1.5 px-5 text-base justify-between hover:bg-blue-400 hover:text-white hover:shadow-lg cursor-pointer font-light flex flex-nowrap items-center ' +
+          <a className={'py-1.5 px-5 text-base justify-between hover:bg-indigo-400 hover:text-white hover:shadow-lg cursor-pointer font-light flex flex-nowrap items-center ' +
               (selected ? 'bg-gray-200 text-black' : ' ')} >
               <div className='my-auto items-center justify-center flex '>
                 <i className={`${link.icon} w-4 text-center`} />
diff --git a/themes/hexo/components/PaginationNumber.js b/themes/hexo/components/PaginationNumber.js
index 45d9282b..8af89e17 100644
--- a/themes/hexo/components/PaginationNumber.js
+++ b/themes/hexo/components/PaginationNumber.js
@@ -25,7 +25,7 @@ const PaginationNumber = ({ page, totalPage }) => {
         } } passHref >
         <div
           rel='prev'
-          className={`${currentPage === 1 ? 'invisible' : 'block'} pb-0.5 border-white dark:border-blue-700 hover:border-blue-400 dark:hover:border-blue-400 w-6 text-center cursor-pointer duration-200  hover:font-bold`}
+          className={`${currentPage === 1 ? 'invisible' : 'block'} pb-0.5 border-white dark:border-indigo-700 hover:border-indigo-400 dark:hover:border-indigo-400 w-6 text-center cursor-pointer duration-200  hover:font-bold`}
         >
           <i className='fas fa-angle-left'/>
         </div>
@@ -37,7 +37,7 @@ const PaginationNumber = ({ page, totalPage }) => {
       <Link href={ { pathname: `/page/${currentPage + 1}`, query: router.query.s ? { s: router.query.s } : {} } } passHref>
         <div
           rel='next'
-          className={`${+showNext ? 'block' : 'invisible'} pb-0.5 border-b border-blue-300 dark:border-blue-700 hover:border-blue-400 dark:hover:border-blue-400 w-6 text-center cursor-pointer duration-500  hover:font-bold`}
+          className={`${+showNext ? 'block' : 'invisible'} pb-0.5 border-b border-indigo-300 dark:border-indigo-700 hover:border-indigo-400 dark:hover:border-indigo-400 w-6 text-center cursor-pointer duration-500  hover:font-bold`}
         >
           <i className='fas fa-angle-right'/>
         </div>
@@ -48,8 +48,8 @@ const PaginationNumber = ({ page, totalPage }) => {
 
 function getPageElement (page, currentPage) {
   return <Link href={page === 1 ? '/' : `/page/${page}`} key={page} passHref>
-      <a className={(page + '' === currentPage + '' ? 'font-bold bg-blue-400 dark:bg-blue-500 text-white ' : 'border-b duration-500 border-blue-300 hover:border-blue-400 ') +
-      ' border-white dark:border-blue-700 dark:hover:border-blue-400 cursor-pointer pb-0.5 w-6 text-center font-light hover:font-bold'}>
+      <a className={(page + '' === currentPage + '' ? 'font-bold bg-indigo-400 dark:bg-indigo-500 text-white ' : 'border-b duration-500 border-indigo-300 hover:border-indigo-400 ') +
+      ' border-white dark:border-indigo-700 dark:hover:border-indigo-400 cursor-pointer pb-0.5 w-6 text-center font-light hover:font-bold'}>
       {page}
       </a>
     </Link>
diff --git a/themes/hexo/components/Progress.js b/themes/hexo/components/Progress.js
index 9c893459..6d388339 100644
--- a/themes/hexo/components/Progress.js
+++ b/themes/hexo/components/Progress.js
@@ -29,7 +29,7 @@ const Progress = ({ targetRef, showPercent = true }) => {
   return (
     <div className="h-4 w-full shadow-2xl bg-gray-400 font-sans">
       <div
-        className="h-4 bg-blue-400 duration-200"
+        className="h-4 bg-indigo-400 duration-200"
         style={{ width: `${percent}%` }}
       >
         {showPercent && (
diff --git a/themes/hexo/components/SideRight.js b/themes/hexo/components/SideRight.js
index a9c4a4ed..eafdd092 100644
--- a/themes/hexo/components/SideRight.js
+++ b/themes/hexo/components/SideRight.js
@@ -13,7 +13,7 @@ export default function SideRight (props) {
   } = props
 
   return (
-    <div className={'lg:w-80 p-2 space-y-4'}>
+    <div className={'lg:w-80 px-2 space-y-4 pt-4 lg:pt-0'}>
       <InfoCard {...props}/>
       { CONFIG_HEXO.WIDGET_ANALYTICS && <AnalyticsCard {...props}/>}
 
diff --git a/themes/hexo/components/SocialButton.js b/themes/hexo/components/SocialButton.js
index 45290dfb..15d29dff 100644
--- a/themes/hexo/components/SocialButton.js
+++ b/themes/hexo/components/SocialButton.js
@@ -8,24 +8,24 @@ import React from 'react'
  */
 const SocialButton = () => {
   return <div className='w-full justify-center flex-wrap flex'>
-    <div className='space-x-3 text-xl text-gray-600 dark:text-gray-400 '>
+    <div className='space-x-3 text-xl text-gray-600 dark:text-gray-300 '>
       {BLOG.CONTACT_GITHUB && <a target='_blank' rel='noreferrer' title={'github'} href={BLOG.CONTACT_GITHUB} >
-        <i className='transform hover:scale-125 duration-150 fab fa-github'/>
+        <i className='transform hover:scale-125 duration-150 fab fa-github dark:hover:text-indigo-400 hover:text-indigo-600'/>
       </a>}
       {BLOG.CONTACT_TWITTER && <a target='_blank' rel='noreferrer' title={'twitter'} href={BLOG.CONTACT_TWITTER} >
-        <i className='transform hover:scale-125 duration-150 fab fa-twitter'/>
+        <i className='transform hover:scale-125 duration-150 fab fa-twitter dark:hover:text-indigo-400 hover:text-indigo-600'/>
       </a>}
       {BLOG.CONTACT_TELEGRAM && <a target='_blank' rel='noreferrer' href={BLOG.CONTACT_TELEGRAM} title={'telegram'} >
-        <i className='transform hover:scale-125 duration-150 fab fa-telegram'/>
+        <i className='transform hover:scale-125 duration-150 fab fa-telegram dark:hover:text-indigo-400 hover:text-indigo-600'/>
       </a>}
       {BLOG.CONTACT_WEIBO && <a target='_blank' rel='noreferrer' title={'weibo'} href={BLOG.CONTACT_WEIBO} >
-        <i className='transform hover:scale-125 duration-150 fab fa-weibo'/>
+        <i className='transform hover:scale-125 duration-150 fab fa-weibo dark:hover:text-indigo-400 hover:text-indigo-600'/>
       </a>}
       {BLOG.CONTACT_EMAIL && <a target='_blank' rel='noreferrer' title={'email'} href={`mailto:${BLOG.CONTACT_EMAIL}`} >
-        <i className='transform hover:scale-125 duration-150 fas fa-envelope'/>
+        <i className='transform hover:scale-125 duration-150 fas fa-envelope dark:hover:text-indigo-400 hover:text-indigo-600'/>
       </a>}
       <a target='_blank' rel='noreferrer' title={'RSS'} href={'/feed'} >
-        <i className='transform hover:scale-125 duration-150 fas fa-rss'/>
+        <i className='transform hover:scale-125 duration-150 fas fa-rss dark:hover:text-indigo-400 hover:text-indigo-600'/>
       </a>
     </div>
   </div>
diff --git a/themes/hexo/components/TagItemMini.js b/themes/hexo/components/TagItemMini.js
index ed0d1d22..aa3388ec 100644
--- a/themes/hexo/components/TagItemMini.js
+++ b/themes/hexo/components/TagItemMini.js
@@ -2,10 +2,10 @@ import Link from 'next/link'
 
 const TagItemMini = ({ tag, selected = false }) => {
   return <Link key={tag} href={selected ? '/' : `/tag/${encodeURIComponent(tag.name)}`} passHref>
-    <a className={`cursor-pointer inline-block rounded hover:bg-blue-400 dark:hover:text-white  hover:text-white duration-200
+    <a className={`cursor-pointer inline-block rounded hover:bg-indigo-400 dark:hover:text-white  hover:text-white duration-200
       mr-2 py-0.5 px-1 text-xs whitespace-nowrap 
        ${selected
-      ? 'text-white dark:text-gray-300 bg-black dark:bg-black dark:hover:bg-blue-900'
+      ? 'text-white dark:text-gray-300 bg-black dark:bg-black dark:hover:bg-indigo-900'
       : `text-gray-600 hover:shadow-xl dark:border-gray-400 notion-${tag.color}_background `}` }>
     <div className='font-light'>{selected && <i className='mr-1 fa-tag'/>} {tag.name + (tag.count ? `(${tag.count})` : '')} </div>
     </a>
diff --git a/themes/hexo/components/TopNav.js b/themes/hexo/components/TopNav.js
index 9c5383d0..d4a14b00 100644
--- a/themes/hexo/components/TopNav.js
+++ b/themes/hexo/components/TopNav.js
@@ -91,14 +91,14 @@ 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-black dark:bg-opacity-50 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-4 shadow'>
+    <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>
 
         {/* 右侧功能 */}
-        <div className='mr-1 justify-end items-center space-x-4 font-serif'>
+        <div className='mr-1 justify-end items-center font-serif'>
           <div className='hidden lg:flex'> <MenuButtonGroupTop {...props}/></div>
           <div onClick={toggleMenuOpen} className='w-8 justify-center items-center h-8 cursor-pointer flex lg:hidden'>
           { isOpen ? <i className='fas fa-times'/> : <i className='fas fa-bars'/> }