41 lines
1.4 KiB
HTML
41 lines
1.4 KiB
HTML
|
{{define "head-fouc-prevention"}}
|
||
|
|
<!-- FOUC Prevention: Inline critical CSS + Apply color theme before page render -->
|
||
|
|
<!-- Critical theme variables inlined to prevent flash of unstyled content -->
|
||
|
|
<style>
|
||
|
|
/* Light theme (default) - critical variables only */
|
||
|
|
:root {
|
||
|
|
--page-bg: #d6d6d6;
|
||
|
|
--paper-bg: #ffffff;
|
||
|
|
--text-primary: #1a1a1a;
|
||
|
|
--sidebar-bg: #d1d4d2;
|
||
|
|
}
|
||
|
|
/* Dark theme - critical variables only */
|
||
|
|
[data-color-theme="dark"] {
|
||
|
|
--page-bg: #3a3a3a;
|
||
|
|
--paper-bg: #1a1a1a;
|
||
|
|
--text-primary: #e0e0e0;
|
||
|
|
--sidebar-bg: #3a3d3e;
|
||
|
|
}
|
||
|
|
/* Auto theme follows system preference */
|
||
|
|
@media (prefers-color-scheme: dark) {
|
||
|
|
[data-color-theme="auto"] {
|
||
|
|
--page-bg: #3a3a3a;
|
||
|
|
--paper-bg: #1a1a1a;
|
||
|
|
--text-primary: #e0e0e0;
|
||
|
|
--sidebar-bg: #3a3d3e;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
/* Apply critical styles immediately */
|
||
|
|
html { background-color: var(--page-bg); }
|
||
|
|
body { color: var(--text-primary); }
|
||
|
|
</style>
|
||
|
|
<script>
|
||
|
|
(function() {
|
||
|
|
// First-time visitors ALWAYS get light theme (paper aesthetic)
|
||
|
|
// Users can switch to dark/auto and their preference is saved
|
||
|
|
let theme = localStorage.getItem('color-theme-mode') || 'light';
|
||
|
|
document.documentElement.setAttribute('data-color-theme', theme);
|
||
|
|
})();
|
||
|
|
</script>
|
||
|
|
{{end}}
|