fix: dark mode

This commit is contained in:
2025-08-06 15:20:08 +08:00
parent aa20b6d7e6
commit 690e9bdbf4
2 changed files with 23 additions and 1 deletions

View File

@@ -34,6 +34,7 @@ class AppState {
// 初始化主题
const savedTheme = localStorage.getItem('theme') || this.detectSystemTheme();
console.log('初始化主题:', savedTheme);
this.setTheme(savedTheme);
// 监听系统主题变化
@@ -60,6 +61,7 @@ class AppState {
setTheme(theme) {
document.documentElement.setAttribute('data-theme', theme);
console.log('设置主题:', theme, '到HTML元素');
// 更新主题切换按钮文本
const themeToggle = document.querySelector('.theme-toggle');
@@ -67,6 +69,27 @@ class AppState {
themeToggle.setAttribute('aria-label',
theme === 'light' ? '切换到暗色主题' : '切换到亮色主题');
}
// 确保CSS变量应用到根元素
const root = document.documentElement;
if (theme === 'dark') {
root.style.setProperty('--bg-primary', '#0f172a');
root.style.setProperty('--bg-secondary', '#1e293b');
root.style.setProperty('--bg-tertiary', '#334155');
root.style.setProperty('--text-primary', '#f8fafc');
root.style.setProperty('--text-secondary', '#e2e8f0');
} else {
root.style.setProperty('--bg-primary', '#ffffff');
root.style.setProperty('--bg-secondary', '#f8fafc');
root.style.setProperty('--bg-tertiary', '#f1f5f9');
root.style.setProperty('--text-primary', '#0f172a');
root.style.setProperty('--text-secondary', '#475569');
}
// 强制触发重绘
document.documentElement.style.display = 'none';
document.documentElement.offsetHeight; // 触发重排
document.documentElement.style.display = '';
}
// 侧边栏管理