refactor: 修复深色模式背景色问题: 添加动态主题类管理,将深色背景改为纯黑色

This commit is contained in:
2025-09-18 16:42:52 +08:00
parent b4d1249684
commit a9ca94e2d6
2 changed files with 22 additions and 2 deletions

View File

@@ -83,7 +83,7 @@
} }
.dark { .dark {
--background: #0a0a0a; --background: #000000;
--foreground: #fafafa; --foreground: #fafafa;
--card: var(--card-dark, #17171780); --card: var(--card-dark, #17171780);
--card-foreground: #fafafa; --card-foreground: #fafafa;
@@ -140,6 +140,11 @@
--purcarte-card-color: var(--card-dark); --purcarte-card-color: var(--card-dark);
} }
/* 深色模式下的卡片/面板背景色 */
.dark {
--card-dark: rgba(30, 30, 30, 0.8);
}
.purcarte-blur { .purcarte-blur {
@apply bg-(--purcarte-card-color)! backdrop-blur-(--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; @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 { .theme-text-muted {
@apply text-(--theme-text-muted-color); @apply text-(--theme-text-muted-color);
} }

View File

@@ -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 { createRoot } from "react-dom/client";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom"; import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import "./index.css"; import "./index.css";
@@ -29,6 +29,16 @@ export const AppContent = () => {
const enableVideoBackground = useConfigItem("enableVideoBackground"); const enableVideoBackground = useConfigItem("enableVideoBackground");
const videoBackgroundUrl = useConfigItem("videoBackgroundUrl"); 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 ( return (
<> <>
{enableVideoBackground && videoBackgroundUrl && ( {enableVideoBackground && videoBackgroundUrl && (