dekun/qihuo
1
0
Fork 0
Code Issues Actions Packages Projects Releases Wiki Activity

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

Browse Source 
修正 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
Download Patch File Download Diff File Expand all files Collapse all files
static/js/theme.js
+15 -7
View File
@@ -33,13 +33,21 @@
apply(prefersLight ? 'light' : 'dark'); apply(prefersLight ? 'light' : 'dark');
} }
document.addEventListener('DOMContentLoaded', function () { document.addEventListener('click', function (e) {
var cur = document.documentElement.getAttribute('data-theme') || 'dark'; var btn = e.target.closest('[data-theme-pick]');
updateButtons(cur); if (!btn) return;
document.querySelectorAll('[data-theme-pick]').forEach(function (btn) { e.preventDefault();
btn.addEventListener('click', function () {
apply(btn.getAttribute('data-theme-pick')); apply(btn.getAttribute('data-theme-pick'));
}); });
});
}); function syncButtons() {
var cur = document.documentElement.getAttribute('data-theme') || 'dark';
updateButtons(cur);
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', syncButtons);
} else {
syncButtons();
}
})(); })();
templates/base.html
+10 -4
View File
@@ -1,12 +1,18 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="zh-CN"> <html lang="zh-CN" data-theme="dark">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}国内期货监控系统{% endblock %}</title> <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> <script src="{{ url_for('static', filename='js/theme.js') }}"></script>
<style> <style>
:root,[data-theme="dark"]{ html:not([data-theme="light"]){
--bg-page:#050508; --bg-page:#050508;
--bg-grid:rgba(76,194,255,.045); --bg-grid:rgba(76,194,255,.045);
--border-header:rgba(76,194,255,.12); --border-header:rgba(76,194,255,.12);
@@ -127,7 +133,7 @@
.page-wrap{max-width:1800px;margin:0 auto;min-height:100vh} .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-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} .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{ .theme-switch{
display:inline-flex;align-items:center; display:inline-flex;align-items:center;
border-radius:999px;border:1px solid var(--toggle-border); border-radius:999px;border:1px solid var(--toggle-border);
@@ -137,7 +143,7 @@
padding:.38rem .75rem;border:none;border-radius:999px; padding:.38rem .75rem;border:none;border-radius:999px;
background:transparent;color:var(--text-muted); background:transparent;color:var(--text-muted);
font-size:.75rem;cursor:pointer;transition:.2s; 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:hover{color:var(--text-primary)}
.theme-switch-btn.active{ .theme-switch-btn.active{
templates/login.html
+9 -3
View File
@@ -1,12 +1,18 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="zh-CN"> <html lang="zh-CN" data-theme="dark">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>系统登录</title> <title>系统登录</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> <script src="{{ url_for('static', filename='js/theme.js') }}"></script>
<style> <style>
:root,[data-theme="dark"]{ html:not([data-theme="light"]){
--bg-page:#050508; --bg-page:#050508;
--bg-grid:rgba(76,194,255,.045); --bg-grid:rgba(76,194,255,.045);
--card-bg:rgba(10,12,22,.88); --card-bg:rgba(10,12,22,.88);
@@ -80,7 +86,7 @@
.theme-switch-btn{ .theme-switch-btn{
padding:.38rem .75rem;border:none;border-radius:999px; padding:.38rem .75rem;border:none;border-radius:999px;
background:transparent;color:var(--text-muted); background:transparent;color:var(--text-muted);
font-size:.75rem;cursor:pointer;transition:.2s; font-size:.75rem;cursor:pointer;transition:.2s;width:auto;
} }
.theme-switch-btn:hover{color:var(--text-primary)} .theme-switch-btn:hover{color:var(--text-primary)}
.theme-switch-btn.active{ .theme-switch-btn.active{