mirror of
https://github.com/fankes/komari-theme-purcarte.git
synced 2025-10-18 11:29:22 +08:00
refactor: 修复深色模式背景色问题: 添加动态主题类管理,将深色背景改为纯黑色
This commit is contained in:
@@ -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);
|
||||
}
|
||||
|
12
src/main.tsx
12
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 && (
|
||||
|
Reference in New Issue
Block a user