From 618d377d8785e6878c360623414deba1a16d09c3 Mon Sep 17 00:00:00 2001
From: Andras Bacsai <5845193+andrasbacsai@users.noreply.github.com>
Date: Tue, 3 Nov 2026 22:22:45 +0100
Subject: [PATCH] fix(ui): keep the dark theme during page loads and
 wire:navigate

Closes #7866

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 resources/views/layouts/base.blade.php | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/resources/views/layouts/base.blade.php b/resources/views/layouts/base.blade.php
index 3cb2244b2c..acd09ca28f 100644
--- a/resources/views/layouts/base.blade.php
+++ b/resources/views/layouts/base.blade.php
@@ -303,13 +303,23 @@
             },
         });
 
-        document.addEventListener('livewire:navigated', window.applyStoredTheme);
+        // wire:navigate copies the server <html> attributes over the live ones, which removes
+        // the theme class and colors. Apply them again in the same task as the swap, before
+        // the browser can paint the new page (livewire:navigated can run after a paint).
+        document.addEventListener('livewire:navigating', (event) => event.detail.onSwap(window.applyStoredTheme));
         window.applyStoredTheme();
     })();
 </script>
 
 <head>
     <meta charset="utf-8">
+    <style>
+        /* The page background in the saved theme before app.css loads, so a full page load does not
+           paint the browser default (white with a light OS theme). :where() keeps app.css in charge after it loads. */
+        :where(html) { background-color: oklch(98.5% 0 0); }
+        :where(html.dark) { background-color: oklch(14.48% 0 0); }
+        :where(html[data-theme="custom"]) { background-color: var(--theme-bg); }
+    </style>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta name="robots" content="noindex">
     <meta name="theme-color" content="#101010" id="theme-color-meta" />