导航栏优化

docs/components/index.vue

@@ -108,7 +108,6 @@ export default {
 <style scoped>
 /* 基础布局 */
 .tencent-showcase {
-  background: white;
   height: 200px;
 }
 
@@ -195,7 +194,6 @@ export default {
 }
 .wrap-footer {
   margin-top: 50px;
-  background: white;
 }
   .footer {
   display: flex;
@@ -203,7 +201,7 @@ export default {
   align-items: center;
   padding: 20px 20px 20px 0;
   /* padding: 20px; */
-  background-color: white;
+  /* background-color: white; */
   width: 100%;
   box-sizing: border-box;
 }
@@ -228,11 +226,9 @@ export default {
   align-items: center;
   margin-right: -10px;
 }
-
+/* 白天情况下正常显示 */
 .logo-char {
-  color: white;
-  font-weight: bold;
-  font-size: 20px;
+  filter: none;
 }
 
 .brand-name {
@@ -318,4 +314,15 @@ export default {
     height: 180px;
   }
 }
+
+@media (prefers-color-scheme: dark) {
+  .logo-char img {
+    filter: brightness(0.3) invert(1) hue-rotate(180deg);
+    /* 
+      brightness(0.3): 降低亮度
+      invert(1): 颜色反转（白变黑）
+      hue-rotate(180deg): 调整色相避免偏色
+    */
+  }
+}
 </style>