diff options
| author | Fuwn <[email protected]> | 2026-01-20 04:27:05 -0800 |
|---|---|---|
| committer | Fuwn <[email protected]> | 2026-01-20 04:27:05 -0800 |
| commit | 93f4ba4a57cb18a87f5c59c2a37d59665ac184ea (patch) | |
| tree | e0310fb43fa0ee504233bdc6d1eb3201adde199f | |
| parent | fix: Use consistent CSS selectors for theme variable overrides (diff) | |
| download | kaze-93f4ba4a57cb18a87f5c59c2a37d59665ac184ea.tar.xz kaze-93f4ba4a57cb18a87f5c59c2a37d59665ac184ea.zip | |
fix: Prevent flash of light mode on page load
Move theme detection script to the very top of <head>, before any
stylesheets load. This ensures the 'dark' class is added to <html>
before the browser starts rendering with CSS, eliminating the flash
of unstyled/wrong-theme content.
| -rw-r--r-- | internal/server/templates/index.html | 12 |
1 files changed, 6 insertions, 6 deletions
diff --git a/internal/server/templates/index.html b/internal/server/templates/index.html index 6bdfeff..025df89 100644 --- a/internal/server/templates/index.html +++ b/internal/server/templates/index.html @@ -1,6 +1,12 @@ <!DOCTYPE html> <html lang="en"> <head> + <script> + // Theme detection - runs immediately before any rendering + if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) { + document.documentElement.classList.add('dark'); + } + </script> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>{{.Site.Name}}</title> @@ -17,12 +23,6 @@ {{.ThemeCSS}} </style> {{end}} - <script> - // Theme detection - if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) { - document.documentElement.classList.add('dark'); - } - </script> </head> <body class="bg-neutral-50 dark:bg-neutral-950 text-neutral-900 dark:text-neutral-100 min-h-screen font-mono"> <div class="max-w-4xl mx-auto px-4 py-8 sm:py-12"> |