Reduce navigation flash with instant theme background and view transitions.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
dekun
2026-06-26 03:26:57 +08:00
parent aaf69329cb
commit cababd67f5
5 changed files with 51 additions and 5 deletions
+8 -3
View File
@@ -17,11 +17,17 @@
<script>
try {
var _t = localStorage.getItem('qihuo-theme');
if (_t === 'light' || _t === 'dark') document.documentElement.setAttribute('data-theme', _t);
if (_t === 'light' || _t === 'dark') {
document.documentElement.setAttribute('data-theme', _t);
document.documentElement.style.colorScheme = _t;
document.documentElement.style.background = _t === 'light' ? '#e8eef8' : '#050508';
}
} catch (e) { /* ignore */ }
</script>
<script src="{{ url_for('static', filename='js/theme.js') }}"></script>
<style>
html{background:#050508;color-scheme:dark}
html[data-theme="light"]{background:#e8eef8;color-scheme:light}
html:not([data-theme="light"]){
--bg-page:#050508;
--bg-grid:rgba(76,194,255,.045);
@@ -138,7 +144,6 @@
background:var(--bg-page);
color:var(--text-primary);
min-height:100vh;
transition:background .25s,color .25s;
}
.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}
@@ -173,7 +178,7 @@
.site-nav a.active{background:var(--nav-active);border-color:var(--nav-active-border);color:#fff}
.user-bar{position:absolute;top:1rem;right:1.5rem;font-size:.8rem;color:var(--text-muted);white-space:nowrap}
.user-bar a{color:var(--danger);text-decoration:none;margin-left:.5rem}
.main{padding:1.5rem}
.main{padding:1.5rem;view-transition-name:app-main}
.text-muted{color:var(--text-muted)}
.text-label{color:var(--text-label)}
.text-accent{color:var(--accent)}