fix: dark mode
This commit is contained in:
@@ -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 = '';
|
||||
}
|
||||
|
||||
// 侧边栏管理
|
||||
|
||||
Reference in New Issue
Block a user