diff --git a/docs/.vitepress/theme/liteyuki.css b/docs/.vitepress/theme/liteyuki.css
index bc00cca0..17070594 100644
--- a/docs/.vitepress/theme/liteyuki.css
+++ b/docs/.vitepress/theme/liteyuki.css
@@ -7,11 +7,16 @@
     --vp-home-hero-image-background-image: linear-gradient(-45deg, #d0e9ff 50%, #a2d8f4 50%);
     --vp-home-hero-image-filter: blur(44px);
 
+    --vp-c-gray-1: #eee;
+    --vp-c-gray-2: #aaa;
+
 
 }
 
 .dark {
     --vp-home-hero-image-background-image: linear-gradient(-45deg, #004785 50%, #0374ad 50%);
+    --vp-c-gray-1: #333;
+    --vp-c-gray-2: #666;
 }
 
 .tab-buttons {
@@ -49,12 +54,39 @@
 }
 
 .item-card {
-  position: relative;
-  border-radius: 15px;
-  background-color: #99999922;
-  height: 160px;
-  padding: 16px;
-  margin: 10px;
-  box-sizing: border-box;
-  transition: background 0.3s ease;
+    position: relative;
+    border-radius: 15px;
+    background-color: var(--vp-c-gray-1);
+    height: 160px;
+    padding: 16px;
+    margin: 10px;
+    box-sizing: border-box;
+    transition: background 0.3s ease;
+}
+
+.item-name {
+    font-size: 20px;
+    margin-bottom: 10px;
+}
+
+.item-description {
+    color: var(--vp-c-gray-2);
+    font-size: 13px;
+    white-space: pre-wrap;
+}
+
+.author-info {
+    display: flex;
+    justify-content: left;
+    align-items: center;
+}
+
+.author-name {
+    font-size: 15px;
+    font-weight: normal;
+}
+
+.avatar {
+    border-radius: 50%;
+    margin: 0 10px;
 }
\ No newline at end of file
diff --git a/docs/components/PluginItemCard.vue b/docs/components/PluginItemCard.vue
index fbdce113..4687b1d8 100644
--- a/docs/components/PluginItemCard.vue
+++ b/docs/components/PluginItemCard.vue
@@ -14,7 +14,7 @@
         </svg>
       </a>
 
-<!--      <button class="copy-btn btn"><div @click="copyToClipboard">安装</div></button> 点击后把安装命令写入剪贴板-->
+      <!--      <button class="copy-btn btn"><div @click="copyToClipboard">安装</div></button> 点击后把安装命令写入剪贴板-->
       <button class="btn copy-btn" @click="copyToClipboard">复制安装命令</button>
 
       <div class="btn">
@@ -82,42 +82,11 @@ button {
   color: #666;
 }
 
-.copy-btn:hover {
-  color: #111;
-}
-
-.item-name {
-  color: #111;
-  font-size: 20px;
-  margin-bottom: 10px;
-}
-
-.item-description {
-  color: #333;
-  font-size: 12px;
-  white-space: pre-wrap;
-}
-
 .icon {
   width: 20px;
   height: 20px;
 }
 
-.author-info {
-  display: flex;
-  justify-content: left;
-  align-items: center;
-}
-
-.author-name {
-  font-size: 15px;
-  font-weight: normal;
-}
-
-.avatar {
-  border-radius: 50%;
-  margin: 0 10px;
-}
 
 .item-bar {
   position: absolute;
@@ -132,7 +101,7 @@ button {
 
 .tag {
   display: inline-block;
-  padding: 0px 5px;
+  padding: 0 5px;
   margin-right: 5px;
   border-radius: 5px;
   font-size: 12px;
diff --git a/docs/components/ResItemCard.vue b/docs/components/ResItemCard.vue
index 65d5d003..c38ac5d7 100644
--- a/docs/components/ResItemCard.vue
+++ b/docs/components/ResItemCard.vue
@@ -29,16 +29,7 @@ const props = defineProps({
 
 <style scoped>
 
-.item-name {
-  font-size: 20px;
-  margin-bottom: 10px;
-}
 
-.item-description {
-  color: #333;
-  font-size: 15px;
-  white-space: pre-wrap;
-}
 
 .icon {
   width: 20px;
@@ -46,21 +37,9 @@ const props = defineProps({
   color: $themeColor;
 }
 
-.author-info {
-  display: flex;
-  justify-content: left;
-  align-items: center;
-}
 
-.author-name {
-  font-size: 15px;
-  font-weight: normal;
-}
 
-.avatar {
-  border-radius: 50%;
-  margin: 0 10px;
-}
+
 
 .item-bar {
   position: absolute;