修复深色与浅色主题无法切换的问题

修正 CSS 选择器避免 :root 始终应用深色变量,并改进 theme.js 点击绑定与首屏主题恢复。

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
dekun
2026-06-15 16:29:34 +08:00
parent 2b383b84ce
commit 0e385b057d
3 changed files with 34 additions and 14 deletions
+10 -4
View File
@@ -1,12 +1,18 @@
<!DOCTYPE html>
<html lang="zh-CN">
<html lang="zh-CN" data-theme="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}国内期货监控系统{% endblock %}</title>
<script>
try {
var _t = localStorage.getItem('qihuo-theme');
if (_t === 'light' || _t === 'dark') document.documentElement.setAttribute('data-theme', _t);
} catch (e) { /* ignore */ }
</script>
<script src="{{ url_for('static', filename='js/theme.js') }}"></script>
<style>
:root,[data-theme="dark"]{
html:not([data-theme="light"]){
--bg-page:#050508;
--bg-grid:rgba(76,194,255,.045);
--border-header:rgba(76,194,255,.12);
@@ -127,7 +133,7 @@
.page-wrap{max-width:1800px;margin:0 auto;min-height:100vh}
.site-header{text-align:center;padding:1.5rem 1rem 1.25rem;border-bottom:1px solid var(--border-header);position:relative}
.site-title{font-size:1.75rem;font-weight:700;color:var(--text-title);margin-bottom:1.65rem;line-height:1.3}
.header-tools{position:absolute;top:1rem;left:1.5rem;display:flex;gap:.5rem;align-items:center}
.header-tools{position:absolute;top:1rem;left:1.5rem;display:flex;gap:.5rem;align-items:center;z-index:20}
.theme-switch{
display:inline-flex;align-items:center;
border-radius:999px;border:1px solid var(--toggle-border);
@@ -137,7 +143,7 @@
padding:.38rem .75rem;border:none;border-radius:999px;
background:transparent;color:var(--text-muted);
font-size:.75rem;cursor:pointer;transition:.2s;
white-space:nowrap;
white-space:nowrap;width:auto;flex-shrink:0;
}
.theme-switch-btn:hover{color:var(--text-primary)}
.theme-switch-btn.active{