📝 修复暗黑模式下商店物品显示对比度不高的问题

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 {
@@ -51,10 +56,37 @@
 .item-card {
     position: relative;
     border-radius: 15px;
-  background-color: #99999922;
+    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;
+}

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;

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;