From 630fac4318ca7ffd3d7c90898511e255b6bfdfdb Mon Sep 17 00:00:00 2001 From: Andras Bacsai <5845193+andrasbacsai@users.noreply.github.com> Date: Thu, 23 Oct 2025 20:46:58 +0200 Subject: [PATCH] fix: eliminate dark mode white screen flicker on page transitions MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Add minimal blocking script immediately after tag to apply dark class before any rendering - Move theme detection from body to run before parsing - Add color-scheme meta tag for browser-level dark mode support - Update theme-color meta tag dynamically based on theme - Improve queryTheme() logic in settings dropdown for consistent behavior - Remove duplicate theme detection code from body script This eliminates the white "flashbang" effect that occurs during Livewire page navigation, especially noticeable for users with high latency connections. The solution uses an ultra-minimal (~100 bytes) script that runs before parsing, preventing FOUC while maintaining optimal performance (~0.1ms impact). 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- resources/views/layouts/base.blade.php | 33 +++++++++++-------- .../livewire/settings-dropdown.blade.php | 23 +++++++++---- 2 files changed, 35 insertions(+), 21 deletions(-) diff --git a/resources/views/layouts/base.blade.php b/resources/views/layouts/base.blade.php index 1124c759a..a4c72a5d8 100644 --- a/resources/views/layouts/base.blade.php +++ b/resources/views/layouts/base.blade.php @@ -1,11 +1,19 @@ - + - + + @@ -41,6 +49,12 @@ @endenv @vite(['resources/js/app.js', 'resources/css/app.css']) +