diff --git a/src/index.css b/src/index.css
index 9b8b6f5..90c85f1 100644
--- a/src/index.css
+++ b/src/index.css
@@ -83,7 +83,7 @@
 }
 
 .dark {
-  --background: #0a0a0a;
+  --background: #000000;
   --foreground: #fafafa;
   --card: var(--card-dark, #17171780);
   --card-foreground: #fafafa;
@@ -140,6 +140,11 @@
     --purcarte-card-color: var(--card-dark);
   }
 
+  /* 深色模式下的卡片/面板背景色 */
+  .dark {
+    --card-dark: rgba(30, 30, 30, 0.8);
+  }
+
   .purcarte-blur {
     @apply bg-(--purcarte-card-color)! backdrop-blur-(--purcarte-blur)!;
   }
@@ -166,6 +171,11 @@
     @apply rounded-lg shadow-sm shadow-(color:--accent-12)/20 box-border border border-(--accent-12)/25;
   }
 
+  /* 深色模式下的卡片样式 */
+  .dark .theme-card-style {
+    @apply shadow-sm shadow-white/10 border-white/20;
+  }
+
   .theme-text-muted {
     @apply text-(--theme-text-muted-color);
   }
diff --git a/src/main.tsx b/src/main.tsx
index 3530541..9e56550 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,4 +1,4 @@
-import { StrictMode, useState, lazy, Suspense } from "react";
+import { StrictMode, useState, lazy, Suspense, useEffect } from "react";
 import { createRoot } from "react-dom/client";
 import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 import "./index.css";
@@ -29,6 +29,16 @@ export const AppContent = () => {
   const enableVideoBackground = useConfigItem("enableVideoBackground");
   const videoBackgroundUrl = useConfigItem("videoBackgroundUrl");
 
+  // 动态设置 HTML 根元素的 dark 类
+  useEffect(() => {
+    const htmlElement = document.documentElement;
+    if (appearance === "dark") {
+      htmlElement.classList.add("dark");
+    } else {
+      htmlElement.classList.remove("dark");
+    }
+  }, [appearance]);
+
   return (
     <>
       {enableVideoBackground && videoBackgroundUrl && (