diff --git a/web/static/js/app.js b/web/static/js/app.js index ea1553a..f571683 100644 --- a/web/static/js/app.js +++ b/web/static/js/app.js @@ -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 = ''; } // 侧边栏管理 diff --git a/web/templates/list.html b/web/templates/list.html index 846787e..f7738ae 100644 --- a/web/templates/list.html +++ b/web/templates/list.html @@ -28,7 +28,6 @@