From a9ca94e2d66929e97def1c771fcb924987ec2721 Mon Sep 17 00:00:00 2001
From: fankesyooni <qzmmcn@163.com>
Date: Thu, 18 Sep 2025 16:42:52 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E4=BF=AE=E5=A4=8D=E6=B7=B1?=
 =?UTF-8?q?=E8=89=B2=E6=A8=A1=E5=BC=8F=E8=83=8C=E6=99=AF=E8=89=B2=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98:=20=E6=B7=BB=E5=8A=A0=E5=8A=A8=E6=80=81=E4=B8=BB?=
 =?UTF-8?q?=E9=A2=98=E7=B1=BB=E7=AE=A1=E7=90=86=EF=BC=8C=E5=B0=86=E6=B7=B1?=
 =?UTF-8?q?=E8=89=B2=E8=83=8C=E6=99=AF=E6=94=B9=E4=B8=BA=E7=BA=AF=E9=BB=91?=
 =?UTF-8?q?=E8=89=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/index.css | 12 +++++++++++-
 src/main.tsx  | 12 +++++++++++-
 2 files changed, 22 insertions(+), 2 deletions(-)

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 && (