diff --git a/resources/views/layouts/admin.blade.php b/resources/views/layouts/admin.blade.php
index f8c9642a2..9f9f41f06 100644
--- a/resources/views/layouts/admin.blade.php
+++ b/resources/views/layouts/admin.blade.php
@@ -5,14 +5,13 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta name="csrf-token" content="{{ csrf_token() }}">
 
+    {{-- Apply dark mode BEFORE any CSS loads to prevent white flash --}}
+    @include('partials.theme-init')
+
     <title>{{ $meta_title ?? 'Admin' }} - {{ config('app.name') }}</title>
 
     <meta name="description" content="{{ $meta_description ?? 'Admin panel' }}">
 
-    <!-- Styles -->
-    @vite(['resources/css/app.css', 'resources/js/app.js'])
-    @stack('styles')
-
     <!-- Dark Mode - Set via meta tag for CSP compliance -->
     <meta name="theme-preference" content="{{ auth()->check() ? (auth()->user()->theme_preference ?? 'light') : 'light' }}">
 
@@ -21,6 +20,10 @@
 
     <!-- CSP Nonce for dynamic script loading -->
     <meta name="csp-nonce" content="{{ csp_nonce() }}">
+
+    <!-- Styles -->
+    @vite(['resources/css/app.css', 'resources/js/app.js'])
+    @stack('styles')
 </head>
 <body class="bg-gray-100 dark:bg-gray-900 font-sans antialiased transition-colors duration-200">
     <div class="h-screen flex">
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index 77d2c3bed..1a3058519 100644
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -7,6 +7,9 @@
     <!-- CSRF Token -->
     <meta name="csrf-token" content="{{ csrf_token() }}">
 
+    {{-- Apply dark mode BEFORE any CSS loads to prevent white flash --}}
+    @include('partials.theme-init')
+
     <title>{{ config('app.name', 'Laravel') }}</title>
 
     <!-- Fonts -->
diff --git a/resources/views/layouts/guest.blade.php b/resources/views/layouts/guest.blade.php
index 3685f1014..08d5cc2d2 100644
--- a/resources/views/layouts/guest.blade.php
+++ b/resources/views/layouts/guest.blade.php
@@ -6,6 +6,9 @@
     <meta name="csrf-token" content="{{ csrf_token() }}">
     <meta name="theme-preference" content="system">
 
+    {{-- Apply dark mode BEFORE any CSS loads to prevent white flash --}}
+    @include('partials.theme-init')
+
     <title>{{ config('app.name') }}</title>
 
     <!-- Styles -->
diff --git a/resources/views/layouts/main.blade.php b/resources/views/layouts/main.blade.php
index f84b2e2a4..c95541c32 100644
--- a/resources/views/layouts/main.blade.php
+++ b/resources/views/layouts/main.blade.php
@@ -8,6 +8,9 @@
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
     <meta name="csrf-token" content="{{ csrf_token() }}">
 
+    {{-- Apply dark mode BEFORE any CSS loads to prevent white flash --}}
+    @include('partials.theme-init')
+
     <title>{{ $meta_title ?? config('app.name') }}@if(isset($meta_title) && $meta_title != '' && $site['metatitle'] != '') - @endif{{ $site['metatitle'] ?? '' }}</title>
 
     <meta name="keywords" content="{{ $meta_keywords ?? '' }}">
@@ -25,36 +28,6 @@
     <!-- Styles -->
     @vite(['resources/css/app.css', 'resources/js/app.js'])
     @stack('styles')
-
-    <!-- Dark Mode Script (must use nonce to prevent flash) -->
-    <script nonce="{{ csp_nonce() }}">
-        // Initialize theme before page renders to prevent flash
-        (function() {
-            @auth
-                // Use user's database preference when authenticated
-                const userThemePreference = '{{ auth()->user()->theme_preference ?? 'light' }}';
-
-                if (userThemePreference === 'system') {
-                    // Use OS preference
-                    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
-                        document.documentElement.classList.add('dark');
-                    }
-                } else if (userThemePreference === 'dark') {
-                    document.documentElement.classList.add('dark');
-                }
-            @else
-                // Fallback to localStorage for non-authenticated users
-                const theme = localStorage.getItem('theme') || 'light';
-                if (theme === 'system') {
-                    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
-                        document.documentElement.classList.add('dark');
-                    }
-                } else if (theme === 'dark') {
-                    document.documentElement.classList.add('dark');
-                }
-            @endauth
-        })();
-    </script>
 </head>
 <body class="bg-gray-50 dark:bg-gray-900 font-sans antialiased transition-colors duration-200">
     <div class="h-screen flex">
diff --git a/resources/views/partials/theme-init.blade.php b/resources/views/partials/theme-init.blade.php
new file mode 100644
index 000000000..c0f01522b
--- /dev/null
+++ b/resources/views/partials/theme-init.blade.php
@@ -0,0 +1,19 @@
+{{--
+    Dark mode initialization - MUST be included at the very top of <head>,
+    BEFORE any CSS/Vite tags, to prevent white flash on page load.
+    This tiny blocking script applies the 'dark' class to <html> synchronously
+    before the browser paints any content.
+--}}
+<script nonce="{{ csp_nonce() }}">
+(function() {
+    var d = document.documentElement;
+    @auth
+        var t = '{{ auth()->user()->theme_preference ?? "light" }}';
+    @else
+        var t = localStorage.getItem('theme') || 'light';
+    @endauth
+    if (t === 'dark' || (t === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+        d.classList.add('dark');
+    }
+})();
+</script>
