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;