starred/newznab-tmux
1
0
Fork 0
mirror of https://github.com/NNTmux/newznab-tmux.git synced 2026-08-28 17:01:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix white flicker

Browse Source
This commit is contained in:
DariusIII
2026-02-10 12:15:33 +01:00
parent 8cafe409b1
commit a73d90c0cb
5 changed files with 35 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/layouts/admin.blade.php
+7 -4
View File
@@ -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">
resources/views/layouts/app.blade.php
+3
View File
@@ -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 -->
resources/views/layouts/guest.blade.php
+3
View File
@@ -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 -->
resources/views/layouts/main.blade.php
+3 -30
View File
@@ -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">
resources/views/partials/theme-init.blade.php
+19
View File
@@ -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>