diff --git a/public/assets/images/wechat.webp b/public/assets/images/wechat.webp
index 658f4b6..1492135 100644
Binary files a/public/assets/images/wechat.webp and b/public/assets/images/wechat.webp differ
diff --git a/src/components/Archive/Archive.less b/src/components/Archive/Archive.less
index 4d24e81..beb41ca 100644
--- a/src/components/Archive/Archive.less
+++ b/src/components/Archive/Archive.less
@@ -22,14 +22,14 @@ section.vh-container {
           width: 100%;
           height: 2.5rem;
           border-radius: 1rem;
-          font-size: 1rem;
+          font-size: var(--vh-size-p);
           transition: background .16s;
 
 
           &:not(.title) {
 
             &:hover {
-              background-color: var(--vh-color-default-88);
+              background-color: var(--vh-main-color);
 
               &>i {
                 &::before {
@@ -43,9 +43,9 @@ section.vh-container {
             }
 
             &>em {
-              font-size: 0.875rem;
+              color: var(--vh-black-38);
+              font-size: var(--vh-size-span);
               font-weight: 500;
-              color: #00000080;
             }
 
             &>i {
@@ -72,17 +72,17 @@ section.vh-container {
 
 
             &>span {
-              font-size: 1rem;
-              color: #000000;
+              font-size: var(--vh-size-p);
+              color: var(--vh-black-100);
               font-weight: 600;
             }
           }
 
-
           &>em {
             flex-shrink: 0;
             width: 5.05rem;
             height: 3.75rem;
+            color: var(--vh-black-100);
             font-size: 1.5rem;
             font-weight: 600;
             line-height: 3.75rem;
@@ -115,7 +115,7 @@ section.vh-container {
             flex: 1;
             white-space: nowrap;
             overflow: hidden;
-            color: #0000004D;
+            color: var(--vh-black-66);
             font-weight: 500;
             text-overflow: ellipsis;
             transition: all .16s;
@@ -124,8 +124,8 @@ section.vh-container {
           &>cite {
             margin-left: auto;
             width: 7.8rem;
-            font-size: 0.875rem;
-            color: #0000004D;
+            font-size: var(--vh-size-span);
+            color: var(--vh-black-66);
             font-weight: 400;
             font-style: normal;
             white-space: nowrap;
@@ -173,11 +173,11 @@ section.vh-container {
 
             &:not(.title) {
               &>em {
-                font-size: 0.8rem;
+                font-size: var(--vh-size-h3);
               }
 
               &>span {
-                font-size: 0.88rem;
+                font-size: var(--vh-size-h2);
               }
             }
 
@@ -191,7 +191,7 @@ section.vh-container {
             }
 
             &>span {
-              font-size: 0.8rem;
+              font-size: var(--vh-size-h3);
             }
           }
         }
diff --git a/src/components/ArticleCard/ArticleCard.less b/src/components/ArticleCard/ArticleCard.less
index ab93750..f7b0f56 100644
--- a/src/components/ArticleCard/ArticleCard.less
+++ b/src/components/ArticleCard/ArticleCard.less
@@ -49,7 +49,7 @@ section.article-list {
           padding: 0.18rem 1rem;
           width: max-content;
           height: max-content;
-          font-size: 1rem;
+          font-size: var(--vh-size-p);
           color: #fff;
           border-radius: 0.66rem;
           transform: rotate(-45deg);
@@ -99,7 +99,7 @@ section.article-list {
       &>.vh-article-desc {
         flex: 1;
         box-sizing: border-box;
-        padding: 1.25rem;
+        padding: 1.188rem;
         display: flex;
         flex-direction: column;
         width: 100%;
@@ -115,7 +115,7 @@ section.article-list {
           &>.vh-article-categories {
             box-sizing: border-box;
             width: max-content;
-            font-size: 0.875rem;
+            font-size: var(--vh-size-span);
             font-weight: 700;
             /* 默认渐变色起始 */
             --gradient-color-1: #a32cc4;
@@ -168,7 +168,7 @@ section.article-list {
 
           &>.title {
             margin: 0;
-            font-size: 1.18rem;
+            font-size: var(--vh-size-h1);
             font-weight: 600;
             line-height: 1.36;
             display: -webkit-box;
@@ -181,10 +181,12 @@ section.article-list {
         }
 
         &>.vh-article-excerpt {
-          margin: 0.88rem 0 0.625rem;
+          margin: 0.88rem 0;
           width: 100%;
           height: max-content;
-          font-size: 0.875rem;
+          color: var(--vh-black-66);
+          font-size: var(--vh-size-small);
+          letter-spacing: 0.88px;
           line-height: 1.28rem;
           display: -webkit-box;
           -webkit-box-orient: vertical;
@@ -192,13 +194,12 @@ section.article-list {
           text-overflow: ellipsis;
           word-break: break-all;
           overflow: hidden;
-          opacity: 0.6;
         }
 
         &>footer {
           margin-top: auto;
-          font-size: 0.875rem;
-          color: #6E6E6E;
+          font-size: var(--vh-size-mini);
+          color: var(--vh-black-100);
         }
       }
     }
diff --git a/src/components/Aside/Aside.less b/src/components/Aside/Aside.less
index 834f68f..6387525 100644
--- a/src/components/Aside/Aside.less
+++ b/src/components/Aside/Aside.less
@@ -40,7 +40,7 @@ aside.vh-aside {
       align-items: center;
       gap: 0.68rem;
       width: 100%;
-      font-size: 1.125rem;
+      font-size: var(--vh-size-h1);
       font-weight: 600;
 
       &::before {
@@ -48,7 +48,7 @@ aside.vh-aside {
         width: 0.25rem;
         height: 1.16rem;
         border-radius: 0.5rem;
-        background-color: var(--vh-color-default);
+        background-color: var(--vh-main-color-88);
       }
     }
 
@@ -78,13 +78,13 @@ aside.vh-aside {
           width: 36%;
           height: 0.26rem;
           border-radius: 3px;
-          background-color: var(--vh-color-default);
+          background-color: var(--vh-main-color-88);
         }
       }
 
       &>.vh-aside-motto {
         font-size: 0.86rem;
-        color: #A3A3A3;
+        color: var(--vh-black-66);
         line-height: 1.5;
         text-align: center;
       }
@@ -120,7 +120,7 @@ aside.vh-aside {
             bottom: 0;
             width: 100%;
             height: 0;
-            background-color: var(--vh-color-default);
+            background-color: var(--vh-main-color-88);
             transition: height 0.16s ease-in-out;
             z-index: -1;
           }
@@ -161,7 +161,7 @@ aside.vh-aside {
 
           &:hover {
             padding-left: 0.66rem;
-            background-color: var(--vh-color-default-88);
+            background-color: var(--vh-main-color-66);
 
             &>i {
               background-color: transparent;
@@ -174,10 +174,10 @@ aside.vh-aside {
             justify-content: center;
             width: 2rem;
             height: 1.75rem;
-            font-size: 0.875rem;
+            font-size: var(--vh-size-span);
             font-style: normal;
             border-radius: 0.38rem;
-            background-color: var(--vh-color-default-88);
+            background-color: var(--vh-main-color-66);
             transition: background 0.16s ease-in-out;
             overflow: hidden;
           }
@@ -201,7 +201,7 @@ aside.vh-aside {
 
           &:hover {
             &>span {
-              background-color: var(--vh-color-default);
+              background-color: var(--vh-main-color);
             }
           }
 
@@ -212,8 +212,8 @@ aside.vh-aside {
             width: max-content;
             height: 1.75rem;
             border-radius: 0.38rem;
-            background-color: var(--vh-color-default-88);
-            font-size: 0.875rem;
+            background-color: var(--vh-main-color-38);
+            font-size: var(--vh-size-span);
             font-style: normal;
             line-height: 1.75rem;
             transition: background 0.16s ease-in-out;
@@ -286,7 +286,7 @@ aside.vh-aside {
 
               &>span {
                 width: 100%;
-                font-size: 0.8rem;
+                font-size: var(--vh-size-h3);
                 line-height: 1.5;
                 display: -webkit-box;
                 -webkit-box-orient: vertical;
diff --git a/src/components/Comment/Comment.less b/src/components/Comment/Comment.less
index 32daeab..bf3dc8b 100644
--- a/src/components/Comment/Comment.less
+++ b/src/components/Comment/Comment.less
@@ -10,7 +10,7 @@
 
   // 评论样式
   .twikoo {
-    font-size: 0.88rem;
+    font-size: var(--vh-size-h2);
 
     img:not(.tk-avatar-img) {
       cursor: pointer;
@@ -28,7 +28,7 @@
       ol {
         li {
           color: #33333388;
-          font-size: 0.875rem;
+          font-size: var(--vh-size-span);
           line-height: 1.6;
         }
 
@@ -39,7 +39,7 @@
 
         :not(pre) {
           &>code {
-            background-color: var(--vh-color-default);
+            background-color: var(--vh-black-16);
             padding: .125rem .375rem;
             font-size: 0.8125rem;
           }
@@ -53,9 +53,9 @@
       }
 
       p {
-        color: #4c4948;
+        color: var(--vh-black-100);
         font-weight: 400;
-        font-size: 0.875rem;
+        font-size: var(--vh-size-span);
         line-height: 28px;
 
 
@@ -95,7 +95,7 @@
     // 及背景颜色
     .el-input-group__append,
     .el-input-group__prepend {
-      background-color: var(--vh-color-default-88) !important;
+      background-color: var(--vh-white-88) !important;
     }
 
     // 评论内容样式
@@ -137,8 +137,11 @@
                 &>.tk-meta {
                   &>.tk-nick {
                     position: relative;
-                    color: #9999ff;
-                    line-height: 1.18rem;
+
+                    strong {
+                      color: #9999ff;
+                      line-height: 1.18rem;
+                    }
 
                     &.tk-nick-link {
                       cursor: pointer;
@@ -212,7 +215,7 @@
 
                 &>.tk-nick {
                   position: relative;
-                  color: #4c4948;
+                  color: var(--vh-black-100);
                   line-height: 1.18rem;
 
                   &.tk-nick-link {
@@ -226,7 +229,7 @@
                       bottom: 0;
                       width: 0;
                       height: 1px;
-                      background-color: #4c4948;
+                      background-color: var(--vh-black-88);
                       transition: all 0.28s;
                     }
 
@@ -289,7 +292,7 @@
                 box-sizing: border-box;
                 padding: 4px;
                 border-radius: 0.2rem;
-                background-color: var(--vh-color-default-88);
+                background-color: var(--vh-black-6);
               }
             }
 
diff --git a/src/components/Footer/Footer.less b/src/components/Footer/Footer.less
index 668368e..98b313e 100644
--- a/src/components/Footer/Footer.less
+++ b/src/components/Footer/Footer.less
@@ -96,7 +96,7 @@
     &.text {
       &>p {
 
-        font-size: 0.88rem;
+        font-size: var(--vh-size-h2);
 
         &>a {
           color: #94A3B8;
diff --git a/src/components/Header/Header.astro b/src/components/Header/Header.astro
index 1e8c1c4..963ee34 100644
--- a/src/components/Header/Header.astro
+++ b/src/components/Header/Header.astro
@@ -13,7 +13,7 @@ import "./Header.less";
 	<section class="main">
 		<a href="/" class="index">
 			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"> <path d="M543.8 287.6c17 0 32-14 32-32.1c1-9-3-17-11-24L309.5 7c-6-5-14-7-21-7s-15 1-22 8L10 231.5c-7 7-10 15-10 24c0 18 14 32.1 32 32.1l32 0 0 160.4c0 35.3 28.7 64 64 64l102.3 0-31.3-52.2c-4.1-6.8-2.6-15.5 3.5-20.5L288 368l-60.2-82.8c-10.9-15 8.2-33.5 22.8-22l117.9 92.6c8 6.3 8.2 18.4 .4 24.9L288 448l38.4 64 122.1 0c35.5 0 64.2-28.8 64-64.3l-.7-160.2 32 0z"></path></svg>
-			Home
+			<span>Home</span>
 		</a>
 		<div class="link-list vh-link-list">
 			{
diff --git a/src/components/Header/Header.less b/src/components/Header/Header.less
index 4057da2..6988871 100644
--- a/src/components/Header/Header.less
+++ b/src/components/Header/Header.less
@@ -9,7 +9,7 @@ header.vh-header {
   justify-content: center;
   width: 100vw;
   height: 3.6rem;
-  background-color: #ffffff66;
+  background-color: var(--vh-white-6);
   backdrop-filter: blur(2rem);
   box-shadow: 0 3px 8px 6px rgba(7, 17, 27, 0.05);
   z-index: 9;
@@ -37,7 +37,7 @@ header.vh-header {
       gap: 0.5rem;
       width: max-content;
       height: 80%;
-      font-size: 1rem;
+      font-size: var(--vh-size-p);
       font-weight: 700;
       z-index: 1;
       transition: all 0.08s ease-in-out;
@@ -63,26 +63,37 @@ header.vh-header {
         width: 100%;
         height: 100%;
         border-radius: 0.5rem;
-        background-color: var(--vh-color-default);
+        background-color: var(--vh-main-color);
         opacity: 0;
         transition: transform 0.16s ease-in-out, opacity 0.16s ease-in-out;
         z-index: -1;
       }
 
+      &>svg {
+        height: 1.5rem;
+        width: auto;
+        object-fit: contain;
+      }
+
+      &.index {
+        padding-right: 2rem;
+
+        &>span {
+          box-sizing: border-box;
+          padding-top: 0.188rem;
+          width: max-content;
+          height: max-content;
+          font-size: 1.088rem;
+          line-height: 1;
+        }
+      }
+
       &.search-btn {
         &>svg {
           width: 1rem;
           height: 1rem;
         }
       }
-
-      &>svg {
-        height: 1.5rem;
-      }
-
-      &.index {
-        padding-right: 2rem;
-      }
     }
 
     &>.link-list,
@@ -133,7 +144,7 @@ header.vh-header {
           padding: 0.36rem;
           width: 1.88rem;
           height: 1.88rem;
-          border: 1px solid var(--vh-color-default);
+          border: 1px solid var(--vh-black-16);
           border-radius: 0.6rem;
         }
       }
@@ -148,7 +159,7 @@ header.vh-header {
 
     &>section.main {
       a {
-        font-size: 0.875rem;
+        font-size: var(--vh-size-span);
 
         &:hover {
           &::before {
diff --git a/src/components/MobileSidebar/MobileSidebar.less b/src/components/MobileSidebar/MobileSidebar.less
index 482703d..c084b57 100644
--- a/src/components/MobileSidebar/MobileSidebar.less
+++ b/src/components/MobileSidebar/MobileSidebar.less
@@ -69,7 +69,7 @@
         gap: 0.618rem;
         width: 100%;
         height: 2.25rem;
-        font-size: 1rem;
+        font-size: var(--vh-size-p);
         color: #66758c;
         font-weight: 600;
         border-radius: 0.375rem;
diff --git a/src/components/Pagination/Pagination.less b/src/components/Pagination/Pagination.less
index 4dc0508..464f408 100644
--- a/src/components/Pagination/Pagination.less
+++ b/src/components/Pagination/Pagination.less
@@ -20,7 +20,7 @@ section.vh-article-pagination {
     border-radius: 0.5rem;
     background-color: #fff;
     box-shadow: 0 3px 8px 6px rgba(7, 17, 27, 0.05);
-    font-size: 0.875rem;
+    font-size: var(--vh-size-span);
     color: #99a9bf;
     user-select: none;
     transition: background-color 0.16s ease-in-out;
diff --git a/src/components/Reward/Reward.astro b/src/components/Reward/Reward.astro
index aaf5d2f..fc56d74 100644
--- a/src/components/Reward/Reward.astro
+++ b/src/components/Reward/Reward.astro
@@ -5,5 +5,5 @@ import "./Reward.less";
 
 <section class="vh-reward">
 	<p>喜欢这篇文章嘛，觉得文章不错的话，奖励奖励我！</p>
-	<div class="reward-list"><span class="alipay"><i style={`background-image: url(${SITE_INFO.Reward.AliPay})`}></i>支付宝</span><span class="wechat"><i style={`background-image: url(${SITE_INFO.Reward.WeChat})`}></i>微信</span></div>
+	<div class="reward-list"><span class="alipay"><img src={SITE_INFO.Reward.AliPay} alt="支付宝打赏" />支付宝</span><span class="wechat"><img src={SITE_INFO.Reward.WeChat} alt="微信打赏" /> 微信</span></div>
 </section>
diff --git a/src/components/Reward/Reward.less b/src/components/Reward/Reward.less
index 1720c9a..a1c68e6 100644
--- a/src/components/Reward/Reward.less
+++ b/src/components/Reward/Reward.less
@@ -47,7 +47,7 @@
           pointer-events: auto;
         }
 
-        &>i {
+        &>img {
           pointer-events: auto;
           opacity: 1;
           transform: translate(-50%, -1rem);
@@ -66,7 +66,7 @@
         height: 100%;
       }
 
-      &>i {
+      &>img {
         opacity: 0;
         pointer-events: none;
         position: absolute;
@@ -75,6 +75,7 @@
         transform: translate(-50%, 0);
         width: calc(100vw - 1rem);
         max-width: 258px;
+        max-height: max-content;
         border-radius: 0.588rem;
         aspect-ratio: 6/8;
         background-size: cover;
diff --git a/src/components/Search/Search.less b/src/components/Search/Search.less
index fd623e3..e90da76 100644
--- a/src/components/Search/Search.less
+++ b/src/components/Search/Search.less
@@ -53,7 +53,7 @@
       gap: 0.28rem;
       width: 100%;
       height: 2.425rem;
-      background-color: var(--vh-color-default-88);
+      background-color: var(--vh-white-100);
       border-radius: 0.66rem;
       overflow: hidden;
 
@@ -69,13 +69,13 @@
         width: 100%;
         height: 100%;
         border: none;
-        color: #9CA3AF;
-        font-size: 0.875rem;
+        color: var(--vh-black-88);
+        font-size: var(--vh-size-span);
         background-color: transparent;
         transition: width 0.16s ease-in-out;
 
         &::placeholder {
-          color: #9CA3AF;
+          color: var(--vh-black-88);
         }
       }
     }
@@ -117,9 +117,9 @@
 
         &>span {
           width: 100%;
-          font-size: 1.125rem;
+          font-size: var(--vh-size-h1);
           font-weight: 600;
-          color: #000000E6;
+          color: var(--vh-black-100);
           line-height: 1.16;
           white-space: nowrap;
           overflow: hidden;
@@ -128,8 +128,8 @@
 
         &>p {
           width: 100%;
-          font-size: 0.875rem;
-          color: #00000080;
+          font-size: var(--vh-size-span);
+          color: var(--vh-black-56);
           font-weight: 400;
           line-height: 1.25rem;
           display: -webkit-box;
diff --git a/src/layouts/Layout/Layout.astro b/src/layouts/Layout/Layout.astro
index 090f305..188fdeb 100644
--- a/src/layouts/Layout/Layout.astro
+++ b/src/layouts/Layout/Layout.astro
@@ -22,8 +22,6 @@ import "./Layout.less";
 	<Head Title={title} Keywords={keywords} Description={description} PageCover={pagecover}>
 		<!-- 谷歌广告JS加载项 -->
 		{ad_Client && (asideAD_Slot || articleAD_Slot) && <script is:inline async src={`https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=${ad_Client}`} crossorigin="anonymous" />}
-		<!-- MiSans字体 -->
-		<link rel="stylesheet" href="https://font.sec.miui.com/font/css?family=MiSans:400,500,600,700:MiSans" />
 	</Head>
 	<body>
 		<MobileSidebar />
diff --git a/src/layouts/ToolLayout/ToolLayout.less b/src/layouts/ToolLayout/ToolLayout.less
index 2174ee9..6aa4a7f 100644
--- a/src/layouts/ToolLayout/ToolLayout.less
+++ b/src/layouts/ToolLayout/ToolLayout.less
@@ -35,7 +35,7 @@
             z-index: 1;
 
             &:hover {
-              background-color: var(--vh-color-default);
+              background-color: var(--vh-black-16);
 
               &>.avatar {
                 transform: scale(1.2) rotate(8deg);
@@ -67,7 +67,7 @@
               z-index: 1;
 
               &>span {
-                font-size: 1rem;
+                font-size: var(--vh-size-p);
                 font-weight: 700;
                 line-height: 1rem;
               }
@@ -139,7 +139,7 @@
               &>p {
                 padding: 0;
                 color: #26262680;
-                font-size: 0.875rem;
+                font-size: var(--vh-size-span);
                 line-height: 1.8;
                 display: -webkit-box;
                 -webkit-box-orient: vertical;
@@ -164,7 +164,7 @@
                   align-items: center;
                   gap: 0.5rem;
                   height: 1.56rem;
-                  font-size: 0.8rem;
+                  font-size: var(--vh-size-h3);
                   overflow: hidden;
 
                   &>em {
@@ -244,7 +244,7 @@
                 overflow: hidden;
 
                 &>span {
-                  font-size: 0.875rem;
+                  font-size: var(--vh-size-span);
                 }
 
                 &>time {
@@ -258,7 +258,7 @@
             &>.main {
               box-sizing: border-box;
               padding: 1rem 0;
-              font-size: 0.875rem;
+              font-size: var(--vh-size-span);
               font-weight: 500;
 
               img {
diff --git a/src/pages/article/[...article].astro b/src/pages/article/[...article].astro
index e09f71a..5af86e3 100644
--- a/src/pages/article/[...article].astro
+++ b/src/pages/article/[...article].astro
@@ -47,7 +47,7 @@ import "@/styles/ArticleBase.less";
 					<span class="article-meta-item">
 						<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"> <path d="M152 24c0-13.3-10.7-24-24-24s-24 10.7-24 24l0 40L64 64C28.7 64 0 92.7 0 128l0 16 0 48L0 448c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-256 0-48 0-16c0-35.3-28.7-64-64-64l-40 0 0-40c0-13.3-10.7-24-24-24s-24 10.7-24 24l0 40L152 64l0-40zM48 192l80 0 0 56-80 0 0-56zm0 104l80 0 0 64-80 0 0-64zm128 0l96 0 0 64-96 0 0-64zm144 0l80 0 0 64-80 0 0-64zm80-48l-80 0 0-56 80 0 0 56zm0 160l0 40c0 8.8-7.2 16-16 16l-64 0 0-56 80 0zm-128 0l0 56-96 0 0-56 96 0zm-144 0l0 56-64 0c-8.8 0-16-7.2-16-16l0-40 80 0zM272 248l-96 0 0-56 96 0 0 56z"></path></svg>
 						<time>{fmtTime(post.data.date, "YYYY-MM-DD A")}</time>
-						<span class="count"><strong>{article_word_count}</strong>字</span>
+						<span class="count"><strong>{article_word_count || "一点"}</strong>字</span>
 						<span class="time"><strong>{parseFloat((Number(reading_time) || 0).toFixed(1).replace(/\.0+$/, ""))}</strong>分钟</span>
 					</span>
 					<a class="article-meta-item" href={`/categories/${post.data.categories}`}>
diff --git a/src/scripts/Init.ts b/src/scripts/Init.ts
index 9f8b9be..4b22a25 100644
--- a/src/scripts/Init.ts
+++ b/src/scripts/Init.ts
@@ -92,10 +92,6 @@ export default () => {
     MusicList.forEach((i: any) => i.destroy());
     MusicList.length = 0;
   });
-  console.log(
-    "%c\u4E3B\u9898\uFF1AvhAstro-Theme%c https://github.com/uxiaohan/vhAstro-Theme ",
-    "background: linear-gradient(90deg, #030307, #1a1a2e); color: #fadfa3; padding: 4px;",
-    "background: #EDEDED; padding: 4px;"
-  );
+  console.log("%c🌻 程序：Astro | 主题：vhAstro-Theme | 作者：Han | Github：https://github.com/uxiaohan/vhAstro-Theme 🌻", "color:#fff; background: linear-gradient(270deg, #18d7d3, #68b7dd, #8695e6, #986fee); padding: 8px 15px; border-radius: 8px");
   console.log("%c\u521D\u59CB\u5316\u5B8C\u6BD5.", "color: #ffffff; background: #000; padding:5px");
 }
\ No newline at end of file
diff --git a/src/styles/About.less b/src/styles/About.less
index dea0d1f..447d198 100644
--- a/src/styles/About.less
+++ b/src/styles/About.less
@@ -16,7 +16,7 @@
       padding: 0.88rem 0;
       width: 100%;
       height: max-content;
-      font-size: 1.125rem;
+      font-size: var(--vh-size-h1);
     }
 
     &>.language-tool {
diff --git a/src/styles/Article.less b/src/styles/Article.less
index 2080092..f7d3b26 100644
--- a/src/styles/Article.less
+++ b/src/styles/Article.less
@@ -40,16 +40,24 @@ section.vh-container {
           }
 
           &>time {
-            color: #9A9A9A;
+            color: var(--vh-black-66);
           }
 
           &>span {
             &.count {
               color: #3FA67F;
+
+              strong {
+                color: #3FA67F;
+              }
             }
 
             &.time {
               color: #E9B740;
+
+              strong {
+                color: #E9B740;
+              }
             }
           }
         }
@@ -77,6 +85,12 @@ section.vh-container {
         }
       }
 
+      .dplayer-controller {
+        span {
+          color: #fff;
+        }
+      }
+
       &>.tag-list {
         box-sizing: border-box;
         padding-top: 2rem;
@@ -95,13 +109,13 @@ section.vh-container {
           gap: 0.18rem;
           height: 1.68rem;
           width: max-content;
-          font-size: 0.875rem;
+          font-size: var(--vh-size-span);
           border-radius: 1rem;
-          background-color: var(--vh-color-default-88);
+          background-color: var(--vh-main-color-56);
           transition: background 0.16s ease-in-out, transform 0.16s ease-in-out;
 
           &:hover {
-            background-color: var(--vh-color-default);
+            background-color: var(--vh-main-color-88);
             transform: translateY(-0.18rem);
           }
 
@@ -148,7 +162,7 @@ section.vh-container {
       }
 
       h3 {
-        font-size: 1.18rem;
+        font-size: var(--vh-size-h1);
       }
 
 
diff --git a/src/styles/ArticleBase.less b/src/styles/ArticleBase.less
index 52524c3..62a7643 100644
--- a/src/styles/ArticleBase.less
+++ b/src/styles/ArticleBase.less
@@ -12,21 +12,21 @@
       display: inline-block;
       box-sizing: border-box;
       margin: 1.666rem 0 0.36rem;
-      font-size: 1rem;
+      font-size: var(--vh-size-p);
       width: 100%;
       max-width: 100%;
       word-break: break-all;
 
       &:hover {
         &::before {
-          color: #60a5fa7f;
+          color: var(--vh-main-color-88);
         }
       }
 
       &::before {
         padding-right: 0.56rem;
         content: "#";
-        color: #33333388;
+        color: var(--vh-black-38);
         transition: color 0.16s ease-in-out;
       }
     }
@@ -54,7 +54,7 @@
     }
 
     h4 {
-      font-size: 1.125rem;
+      font-size: var(--vh-size-h1);
     }
 
     // p标签样式
@@ -68,8 +68,8 @@
       line-height: 1.6;
 
       li {
-        color: #9A9A9A;
-        font-size: 0.875rem;
+        color: var(--vh-black-66);
+        font-size: var(--vh-size-span);
         line-height: 1.6;
       }
 
@@ -86,7 +86,7 @@
 
       // 其下面的code标签样式
       code {
-        background-color: var(--vh-color-default);
+        background-color: var(--vh-black-16);
         padding: .125rem .375rem;
         font-size: 0.8125rem;
       }
@@ -109,7 +109,7 @@
       border-radius: 0.618rem;
 
       &>p {
-        font-size: 0.875rem;
+        font-size: var(--vh-size-span);
         font-weight: 500;
         line-height: 1.58rem;
         color: #6A737D;
@@ -171,7 +171,7 @@
 
       // 其下面的code标签样式
       code {
-        background-color: var(--vh-color-default);
+        background-color: var(--vh-black-16);
         padding: .125rem .375rem;
         font-size: 0.8125rem;
       }
@@ -233,7 +233,7 @@
         }
 
         p {
-          font-size: 0.875rem;
+          font-size: var(--vh-size-span);
           line-height: 2;
           font-weight: 500;
         }
@@ -284,7 +284,7 @@
           bottom: 0;
           width: 100%;
           height: 0;
-          background-color: var(--vh-color-default-66);
+          background-color: var(--vh-black-default-66);
           transition: height 0.16s ease-in-out;
           z-index: -1;
         }
@@ -294,7 +294,7 @@
           box-sizing: border-box;
           color: #000;
           font-weight: 600;
-          font-size: 0.875rem;
+          font-size: var(--vh-size-span);
           white-space: nowrap;
           text-overflow: ellipsis;
           overflow: hidden;
@@ -544,7 +544,7 @@
         border-radius: 0.618rem;
         height: max-content;
         max-height: 888px;
-        background-color: var(--vh-color-default-99) !important;
+        background-color: var(--vh-white-66) !important;
 
         code {
           box-sizing: border-box;
@@ -552,7 +552,7 @@
 
           &>span {
             box-sizing: border-box;
-            font-size: 0.875rem;
+            font-size: var(--vh-size-span);
             line-height: 1.66;
 
             &::before {
diff --git a/src/styles/Base.less b/src/styles/Base.less
index 578d005..d5ae469 100644
--- a/src/styles/Base.less
+++ b/src/styles/Base.less
@@ -1,11 +1,41 @@
 @import url('/assets/font/index.css');
 
 :root {
-	// 颜色
-	--vh-color-default: #EDEEF3;
-	--vh-color-default-66: #EDEEF366;
-	--vh-color-default-88: #EDEEF388;
-	--vh-color-default-99: #EDEEF399;
+	// 基础色
+	--vh-black-color: #34495e; //文字颜色
+	--vh-white-color: #EDEEF3; //背景颜色
+	--vh-black-100: rgb(from var(--vh-black-color) r g b);
+	--vh-black-88: rgb(from var(--vh-black-color) r g b / 88%);
+	--vh-black-66: rgb(from var(--vh-black-color) r g b / 66%);
+	--vh-black-56: rgb(from var(--vh-black-color) r g b / 56%);
+	--vh-black-38: rgb(from var(--vh-black-color) r g b / 38.88%);
+	--vh-black-28: rgb(from var(--vh-black-color) r g b / 28%);
+	--vh-black-16: rgb(from var(--vh-black-color) r g b / 16%);
+	--vh-black-6: rgb(from var(--vh-black-color) r g b / 6%);
+	--vh-white-100: rgb(from var(--vh-white-color) r g b);
+	--vh-white-88: rgb(from var(--vh-white-color) r g b / 88%);
+	--vh-white-66: rgb(from var(--vh-white-color) r g b / 66%);
+	--vh-white-38: rgb(from var(--vh-white-color) r g b / 38.88%);
+	--vh-white-28: rgb(from var(--vh-white-color) r g b / 28%);
+	--vh-white-16: rgb(from var(--vh-white-color) r g b / 16%);
+	--vh-white-6: rgb(from var(--vh-white-color) r g b / 6%);
+	// 主题色
+	--vh-main-color: #EDEEF3;
+	--vh-main-color-88: rgb(from var(--vh-main-color) r g b / 88%);
+	--vh-main-color-66: rgb(from var(--vh-main-color) r g b / 66%);
+	--vh-main-color-56: rgb(from var(--vh-main-color) r g b / 56%);
+	--vh-main-color-38: rgb(from var(--vh-main-color) r g b / 38.88%);
+	--vh-main-color-28: rgb(from var(--vh-main-color) r g b / 28%);
+	--vh-main-color-16: rgb(from var(--vh-main-color) r g b / 16%);
+	--vh-main-color-6: rgb(from var(--vh-main-color) r g b / 6%);
+	// 尺寸
+	--vh-size-h1: 1.125rem;
+	--vh-size-h2: 0.88rem;
+	--vh-size-h3: 0.8rem;
+	--vh-size-p: 1rem;
+	--vh-size-span: 0.875rem;
+	--vh-size-small: 0.8625rem;
+	--vh-size-mini: 0.805rem;
 	--vh-padding-top: calc(66px + 1rem);
 	--vh-main-max-width: 1388px;
 	--vh-back-top: calc((calc(100vw - 2rem) - min((100vw - 2rem), var(--vh-main-max-width))) / 2 + 1rem);
@@ -21,7 +51,6 @@ p,
 blockquote {
 	margin: 0;
 	padding: 0;
-	color: #333;
 	text-decoration: none;
 }
 
@@ -37,7 +66,6 @@ p {
 a {
 	margin: 0;
 	padding: 0;
-	color: #333;
 	text-decoration: none;
 	line-height: 1.6;
 }
@@ -57,6 +85,7 @@ img {
 }
 
 * {
+	color: var(--vh-black-100);
 	// IOS 点击阴影
 	-webkit-tap-highlight-color: transparent;
 	// 隐藏滚动条
@@ -75,8 +104,6 @@ img {
 html {
 	word-wrap: break-word;
 	overflow-wrap: break-word;
-	font-size: 16px;
-	color: #333;
 
 	&>body {
 		position: relative;
@@ -88,7 +115,7 @@ html {
 		align-items: center;
 		width: 100vw;
 		height: max-content;
-		font-family: 'MiSans', serif;
+		font-family: 'HarmonyOS Sans SC', serif;
 		font-weight: 400;
 		cursor: url(/assets/images/default.cur), default;
 		overflow-x: hidden;
@@ -112,7 +139,7 @@ html {
 
 		&>p {
 			padding: 0;
-			font-size: 1rem;
+			font-size: var(--vh-size-p);
 			line-height: 2;
 		}
 	}