Reduce navigation flash with instant theme background and view transitions.
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
+8
-3
@@ -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)}
|
||||
|
||||
Reference in New Issue
Block a user