diff --git a/themes/Hexo/LayoutBase.js b/themes/Hexo/LayoutBase.js
index 7c25dbf7..96779c6f 100644
--- a/themes/Hexo/LayoutBase.js
+++ b/themes/Hexo/LayoutBase.js
@@ -38,7 +38,7 @@ const LayoutBase = (props) => {
     return () => document.removeEventListener('scroll', scrollListener)
   }, [show])
 
-  return (<div className='bg-white'>
+  return (<div className='bg-white dark:bg-gray-900'>
     <CommonHead meta={meta} />
     <TopNav {...props}/>
 
diff --git a/themes/Hexo/LayoutCategoryIndex.js b/themes/Hexo/LayoutCategoryIndex.js
index 1eadfc7d..7b0e35a0 100644
--- a/themes/Hexo/LayoutCategoryIndex.js
+++ b/themes/Hexo/LayoutCategoryIndex.js
@@ -14,7 +14,7 @@ export const LayoutCategoryIndex = props => {
   }
   return (
     <LayoutBase {...props} meta={meta}>
-      <Card className="bg-white dark:bg-gray-700 w-full min-h-screen">
+      <Card className="w-full min-h-screen">
         <div className="dark:text-gray-200 mb-5 mx-3">
           <i className="mr-4 fas fa-th" />
           {locale.COMMON.CATEGORY}:
diff --git a/themes/Hexo/LayoutSlug.js b/themes/Hexo/LayoutSlug.js
index ceb7322b..901dc676 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-2xl lg:border lg:border-gray-100 lg:rounded-xl lg:px-2 lg:py-4 lg:bg-white lg:dark:bg-gray-800 lg:duration-300">
+      <div className="w-full dark:border-gray-600 lg:shadow-md lg:hover:shadow-2xl lg:border lg:border-gray-100 lg:rounded-xl lg:px-2 lg:py-4 lg:bg-white lg:dark:bg-gray-800 lg:duration-300">
         <ArticleDetail {...props} />
       </div>
 
diff --git a/themes/Hexo/components/ArticleDetail.js b/themes/Hexo/components/ArticleDetail.js
index e006309d..02a441ef 100644
--- a/themes/Hexo/components/ArticleDetail.js
+++ b/themes/Hexo/components/ArticleDetail.js
@@ -34,9 +34,7 @@ export default function ArticleDetail ({ post, recommendPosts, prev, next }) {
   })
 
   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  dark:border-gray-700 bg-white dark:bg-gray-800"
-    >
+    <article itemScope itemType="https://schema.org/Movie" className="subpixel-antialiased bg-white dark:bg-gray-800" >
 
       {/* Notion文章主体 */}
       <section id='notion-article' className='px-5'>
diff --git a/themes/Hexo/components/BlogPostCard.js b/themes/Hexo/components/BlogPostCard.js
index 6cba3568..3c75b9d9 100644
--- a/themes/Hexo/components/BlogPostCard.js
+++ b/themes/Hexo/components/BlogPostCard.js
@@ -9,7 +9,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 rounded-xl bg-white dark:bg-gray-800 duration-300'>
+    <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 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 8cb8123c..013301be 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-2xl border border-gray-100 rounded-xl px-2 py-4 bg-white dark:bg-gray-800 duration-300">
+    <section className="shadow-md hover:shadow-2xl dark:text-gray-300 border border-gray-100 dark:border-gray-700 rounded-xl px-2 py-4 bg-white dark:bg-gray-800 duration-300">
         {children}
     </section>
   </div>
diff --git a/themes/Hexo/components/Catalog.js b/themes/Hexo/components/Catalog.js
index 59942526..4c98b21c 100644
--- a/themes/Hexo/components/Catalog.js
+++ b/themes/Hexo/components/Catalog.js
@@ -63,7 +63,7 @@ const Catalog = ({ toc }) => {
           <a
             key={id}
             href={`#${id}`}
-            className={`notion-table-of-contents-item duration-300 transform font-light
+            className={`notion-table-of-contents-item duration-300 transform font-light dark:text-gray-200
             notion-table-of-contents-item-indent-level-${tocItem.indentLevel} `}
           >
                       <span
diff --git a/themes/Hexo/components/HeaderArticle.js b/themes/Hexo/components/HeaderArticle.js
index 84ad8688..0e5c11ab 100644
--- a/themes/Hexo/components/HeaderArticle.js
+++ b/themes/Hexo/components/HeaderArticle.js
@@ -47,7 +47,7 @@ export default function HeaderArticle ({ post }) {
             </div>
 
             <section className="flex-wrap shadow-text flex text-sm justify-center mt-2 text-white dark:text-gray-400 font-light leading-8">
-              <div>
+              <div className='dark:text-gray-200'>
                 {post.category && <>
                   <Link href={`/category/${post.category}`} passHref>
                   <a className="cursor-pointer mr-2 dark:hover:text-white border-b dark:border-gray-500 border-dashed">
diff --git a/themes/Hexo/components/MenuButtonGroup.js b/themes/Hexo/components/MenuButtonGroup.js
index a968b800..cf7af3cd 100644
--- a/themes/Hexo/components/MenuButtonGroup.js
+++ b/themes/Hexo/components/MenuButtonGroup.js
@@ -8,7 +8,7 @@ const MenuButtonGroup = (props) => {
   const { postCount, customNav } = props
   const { locale } = useGlobal()
   const router = useRouter()
-  const archiveSlot = <div className='bg-blue-300 dark:bg-blue-500 rounded-md text-gray-50 px-1 text-xs'>{postCount}</div>
+  const archiveSlot = <div className='bg-blue-300 dark:bg-blue-400 rounded-md text-gray-50 px-1 text-xs'>{postCount}</div>
 
   let links = [
     { icon: 'fas fa-home', name: locale.NAV.INDEX, to: '/' || '/', show: true },
diff --git a/themes/Hexo/components/SearchInput.js b/themes/Hexo/components/SearchInput.js
index 0912c374..31074800 100644
--- a/themes/Hexo/components/SearchInput.js
+++ b/themes/Hexo/components/SearchInput.js
@@ -52,7 +52,7 @@ const SearchInput = ({ currentTag, currentSearch, cRef }) => {
     <input
       ref={searchInputRef}
       type='text'
-      className={'w-full rounded-lg text-sm pl-5 transition focus:shadow-lg font-light leading-10 text-black bg-gray-100'}
+      className={'w-full rounded-lg text-sm pl-5 transition focus:shadow-lg dark:text-gray-300 font-light leading-10 text-black bg-gray-100 dark:bg-gray-500'}
       onKeyUp={handleKeyUp}
       onCompositionStart={lockSearchInput}
       onCompositionUpdate={lockSearchInput}
@@ -61,14 +61,14 @@ const SearchInput = ({ currentTag, currentSearch, cRef }) => {
       defaultValue={currentSearch}
     />
 
-    <div className='-ml-8 cursor-pointer dark:hover:bg-gray-800 float-right items-center justify-center py-2'
+    <div className='-ml-8 cursor-pointer  float-right items-center justify-center py-2'
       onClick={() => { handleSearch(searchKey) }}>
-        <i className={`hover:text-black transform duration-200 text-gray-500 cursor-pointer fas ${onLoading ? 'fa-spinner animate-spin' : 'fa-search'}`} />
+        <i className={`hover:text-black transform duration-200 text-gray-500 dark:text-gray-200 cursor-pointer fas ${onLoading ? 'fa-spinner animate-spin' : 'fa-search'}`} />
     </div>
 
     {(searchKey && searchKey.length &&
-      <div className='-ml-12 cursor-pointer dark:hover:bg-gray-800 float-right items-center justify-center py-2'>
-        <i className='hover:text-black transform duration-200 text-gray-400 cursor-pointer fas fa-times' onClick={cleanSearch} />
+      <div className='-ml-12 cursor-pointer float-right items-center justify-center py-2'>
+        <i className='hover:text-black transform duration-200 text-gray-400 dark:text-gray-300 cursor-pointer fas fa-times' onClick={cleanSearch} />
       </div>
       )}
   </div>
diff --git a/themes/Hexo/components/SideRight.js b/themes/Hexo/components/SideRight.js
index 3aafeb80..371e8150 100644
--- a/themes/Hexo/components/SideRight.js
+++ b/themes/Hexo/components/SideRight.js
@@ -40,7 +40,7 @@ export default function SideRight (props) {
             className='rounded-full'
           />
         </div>
-        <div className='text-center font-sans text-xl pb-4'>{BLOG.TITLE}</div>
+        <div className='text-center font-sans text-xl pb-4 dark:text-gray-300'>{BLOG.TITLE}</div>
         <SocialButton />
       </Card>
       <Card>
diff --git a/themes/Hexo/components/TagItemMini.js b/themes/Hexo/components/TagItemMini.js
index 63adeb12..ed0d1d22 100644
--- a/themes/Hexo/components/TagItemMini.js
+++ b/themes/Hexo/components/TagItemMini.js
@@ -2,12 +2,12 @@ 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-500 hover:text-white duration-200
-      mr-2 py-0.5 px-1 text-xs whitespace-nowrap dark:hover:text-white
+    <a className={`cursor-pointer inline-block rounded hover:bg-blue-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-gray-600 hover:shadow-xl dark:border-gray-400 notion-${tag.color}_background dark:bg-blue-800`}` }>
-    <div className='font-light dark:text-gray-400'>{selected && <i className='mr-1 fa-tag'/>} {tag.name + (tag.count ? `(${tag.count})` : '')} </div>
+      : `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>
   </Link>
 }
diff --git a/themes/Hexo/components/TopNav.js b/themes/Hexo/components/TopNav.js
index fe53015b..c021183f 100644
--- a/themes/Hexo/components/TopNav.js
+++ b/themes/Hexo/components/TopNav.js
@@ -90,7 +90,7 @@ const TopNav = ({ tags, currentTag, categories, currentCategory, postCount }) =>
     <SearchDrawer cRef={searchDrawer} slot={searchDrawerSlot}/>
 
     {/* 导航栏 */}
-    <div id='sticky-nav' className={`${CONFIG_HEXO.NAV_TYPE !== 'normal' ? 'fixed bg-white' : ' bg-none -mb-10'}  bg-opacity-70 text-black w-full top-0 z-20 transform duration-500 font-sans`}>
+    <div id='sticky-nav' className={`${CONFIG_HEXO.NAV_TYPE !== 'normal' ? 'fixed bg-white' : ' bg-none -mb-10'} dark:bg-black dark:bg-opacity-50 dark:text-gray-200 bg-opacity-70 text-black w-full top-0 z-20 transform duration-500 font-sans`}>
       <div className='w-full flex justify-between items-center px-4 py-2 shad'>
         <div className='flex'>
          <Logo/>
diff --git a/themes/index.js b/themes/index.js
index e9b63872..505f04f7 100644
--- a/themes/index.js
+++ b/themes/index.js
@@ -5,5 +5,5 @@
 // export * from './Empty' //  空主题
 export * from './NEXT'
 // export * from './Fukasawa'
-// export * from './Hexo'
+export * from './Hexo'
 // export * from './Medium'