docs: button color

Author: Zeyi-Lin

.vitepress/theme/components/HeaderButton.vue

@@ -21,14 +21,15 @@
   <style scoped>
   .header-button {
     /* 按钮样式 */
-    background-color: #000000;
-    color: white;
-    border: none;
+    background-color: #ffffff;
+    color: #374a52;
+    border: 1px solid #e0e0e0;
     padding: 4px 12px;
     border-radius: 4px;
     cursor: pointer;
     margin-left: 10px; /* 与其他元素保持间距 */
     font-size: 14px;
+    font-weight: 500;
     line-height: 1.5;
     height: 28px; /* 固定高度，避免占满header */
     display: flex; /* 改为flex以实现垂直居中 */
@@ -40,7 +41,8 @@
   }
 
   .header-button:hover {
-    background-color: #333333;
+    background-color: #f2f2f2;
+    color: #397b89;
   }
 
   .button-icon {
@@ -50,11 +52,13 @@
 
   /* 黑夜模式样式 */
   :root.dark .header-button {
-    background-color: #dddddd;
-    color: black;
+    background-color: #2a2a2a;
+    color: #e0e0e0;
+    border: 1px solid #3a3a3a;
   }
 
   :root.dark .header-button:hover {
-    background-color: #e0e0e0;
+    background-color: #3a3a3a;
+    color: #48a8b5;
   }
   </style>

.vitepress/theme/components/HeaderButtonEN.vue

@@ -20,42 +20,46 @@
   </script>
 
   <style scoped>
-  .header-button {
-    /* 按钮样式 */
-    background-color: #000000;
-    color: white;
-    border: none;
-    padding: 4px 12px;
-    border-radius: 4px;
-    cursor: pointer;
-    margin-left: 10px; /* 与其他元素保持间距 */
-    font-size: 14px;
-    line-height: 1.5;
-    height: 28px; /* 固定高度，避免占满header */
-    display: flex; /* 改为flex以实现垂直居中 */
-    align-items: center; /* 垂直居中 */
-    justify-content: center; /* 水平居中 */
-    margin-top: auto; /* 自动上边距 */
-    margin-bottom: auto; /* 自动下边距 */
-    gap: 6px; /* 图标和文字之间的间距 */
-  }
+    .header-button {
+      /* 按钮样式 */
+      background-color: #ffffff;
+      color: #374a52;
+      border: 1px solid #e0e0e0;
+      padding: 4px 12px;
+      border-radius: 4px;
+      cursor: pointer;
+      margin-left: 10px; /* 与其他元素保持间距 */
+      font-size: 14px;
+      font-weight: 500;
+      line-height: 1.5;
+      height: 28px; /* 固定高度，避免占满header */
+      display: flex; /* 改为flex以实现垂直居中 */
+      align-items: center; /* 垂直居中 */
+      justify-content: center; /* 水平居中 */
+      margin-top: auto; /* 自动上边距 */
+      margin-bottom: auto; /* 自动下边距 */
+      gap: 6px; /* 图标和文字之间的间距 */
+    }
 
   .header-button:hover {
-    background-color: #333333;
+    background-color: #f2f2f2;
+    color: #397b89;
   }
 
   .button-icon {
     width: 14px;
     height: 14px;
   }
 
-    /* 黑夜模式样式 */
-    :root.dark .header-button {
-    background-color: #dddddd;
-    color: black;
+  /* 黑夜模式样式 */
+  :root.dark .header-button {
+    background-color: #2a2a2a;
+    color: #e0e0e0;
+    border: 1px solid #3a3a3a;
   }
 
   :root.dark .header-button:hover {
-    background-color: #e0e0e0;
+    background-color: #3a3a3a;
+    color: #48a8b5;
   }
   </style>