From fb35a8ca39d04f0dafb510e20c9ac6e2347e8388 Mon Sep 17 00:00:00 2001
From: hxuanyu <2252193204@qq.com>
Date: Sun, 29 Jun 2025 23:40:54 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=B7=B1=E8=89=B2=E6=A8=A1?=
 =?UTF-8?q?=E5=BC=8F=E6=94=AF=E6=8C=81=EF=BC=8C=E4=BC=98=E5=8C=96=E5=B7=A6?=
 =?UTF-8?q?=E4=BE=A7=E5=92=8C=E5=8F=B3=E4=BE=A7=E9=9D=A2=E6=9D=BF=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/style.css            | 23 +++++++++++++++++++++++
 src/views/ConfigView.vue | 37 +++++++++++++++++++++++++++++++++----
 2 files changed, 56 insertions(+), 4 deletions(-)

diff --git a/src/style.css b/src/style.css
index 8a85590..7027fba 100644
--- a/src/style.css
+++ b/src/style.css
@@ -108,3 +108,26 @@ button:focus-visible {
     background-color: #f8f9fa;
   }
 }
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    color: rgba(255, 255, 255, 0.87);
+    background-color: transparent;
+  }
+  
+  /* 确保预览模式下在深色主题也是透明的 */
+  body.preview-mode,
+  html.preview-mode,
+  body.preview-mode #app {
+    background-color: transparent !important;
+    background: transparent !important;
+  }
+  
+  a:hover {
+    color: #8cc8ff;
+  }
+  button {
+    background-color: #2a2a2a;
+    color: rgba(255, 255, 255, 0.87);
+  }
+}
diff --git a/src/views/ConfigView.vue b/src/views/ConfigView.vue
index 5af81c9..22187d7 100644
--- a/src/views/ConfigView.vue
+++ b/src/views/ConfigView.vue
@@ -149,6 +149,14 @@ watch([selectedWidget, currentWidgetConfig], () => {
   padding-bottom: 30px;
 }
 
+/* 深色模式下的左侧面板 */
+@media (prefers-color-scheme: dark) {
+  .left-panel {
+    background-color: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+  }
+}
+
 .config-container {
   display: flex;
   flex-direction: column;
@@ -158,10 +166,10 @@ watch([selectedWidget, currentWidgetConfig], () => {
 .right-panel {
   flex: 1;
   background-color: transparent;
-  background-image: linear-gradient(45deg, #ddd 25%, transparent 25%), 
-                    linear-gradient(-45deg, #ddd 25%, transparent 25%), 
-                    linear-gradient(45deg, transparent 75%, #ddd 75%), 
-                    linear-gradient(-45deg, transparent 75%, #ddd 75%);
+  background-image: linear-gradient(45deg, rgba(221, 221, 221, 0.6) 25%, transparent 25%), 
+                    linear-gradient(-45deg, rgba(221, 221, 221, 0.6) 25%, transparent 25%), 
+                    linear-gradient(45deg, transparent 75%, rgba(221, 221, 221, 0.6) 75%), 
+                    linear-gradient(-45deg, transparent 75%, rgba(221, 221, 221, 0.6) 75%);
   background-size: 20px 20px;
   background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
   display: flex;
@@ -170,6 +178,16 @@ watch([selectedWidget, currentWidgetConfig], () => {
   overflow: hidden;
 }
 
+/* 深色模式下的透明背景 */
+@media (prefers-color-scheme: dark) {
+  .right-panel {
+    background-image: linear-gradient(45deg, rgba(102, 102, 102, 0.4) 25%, transparent 25%), 
+                      linear-gradient(-45deg, rgba(102, 102, 102, 0.4) 25%, transparent 25%), 
+                      linear-gradient(45deg, transparent 75%, rgba(102, 102, 102, 0.4) 75%), 
+                      linear-gradient(-45deg, transparent 75%, rgba(102, 102, 102, 0.4) 75%);
+  }
+}
+
 .widget-selector {
   width: 100%;
 }
@@ -194,6 +212,17 @@ watch([selectedWidget, currentWidgetConfig], () => {
   color: #606266;
 }
 
+/* 深色模式下的URL生成器样式 */
+@media (prefers-color-scheme: dark) {
+  .url-generator {
+    border-bottom: 1px solid #444444;
+  }
+  
+  .url-generator h3 {
+    color: #cccccc;
+  }
+}
+
 .url-input-group {
   display: flex;
   align-items: center;