Website: fix two FOUC flickers on page load

vdavid · vdavid · commit 8c21ac78bdc1 · 2026-03-12T11:28:22.000+01:00
- Add inline `&lt;style&gt;` in `&lt;head&gt;` to set light background before first paint, preventing dark→light flash for `prefers-color-scheme: light` users
- Add inline `&lt;script&gt;` in `&lt;head&gt;` to detect newsletter subscription state from `localStorage` and add `.newsletter-hidden` class before paint, preventing the mail icon from appearing then vanishing
- Add `.newsletter-hidden [data-newsletter-nav]` CSS rule in `global.css` to back the class-based hiding
diff --git a/apps/website/src/layouts/Layout.astro b/apps/website/src/layouts/Layout.astro
@@ -78,6 +78,26 @@ const {
             })}
         />
 
+        {/* Prevent light-mode FOUC: set background before first paint */}
+        <style is:inline>
+            @media (prefers-color-scheme: light) {
+                html:not([data-force-dark]) { background-color: #fafaf8; }
+            }
+        </style>
+
+        {/* Hide newsletter icon before first paint if user already subscribed/dismissed */}
+        <script is:inline>
+            try {
+                if (
+                    localStorage.getItem('newsletter-subscribed') === 'true' ||
+                    localStorage.getItem('newsletter-dismissed') === 'true' ||
+                    localStorage.getItem('newsletter-cta-dismissed') === 'true'
+                ) {
+                    document.documentElement.classList.add('newsletter-hidden')
+                }
+            } catch (e) {}
+        </script>
+
         {/* Umami analytics — self-hosted, cookieless */}
         {
             import.meta.env.PUBLIC_UMAMI_WEBSITE_ID && (
diff --git a/apps/website/src/styles/global.css b/apps/website/src/styles/global.css
@@ -61,6 +61,11 @@ body {
     overflow-x: hidden;
 }
 
+/* Hide newsletter elements before JS hydration if user already subscribed/dismissed */
+.newsletter-hidden [data-newsletter-nav] {
+    display: none;
+}
+
 /* Selection */
 ::selection {
     background-color: var(--color-accent);
