Dark Mode Flash #1501
Description
Flux version
2.1.4
Livewire version
3.6.3
Tailwind version
4.1.4
Browser and Operating System
Chrome
What is the problem?
The page is flashing in dark mode. I am using Laravel 12 without starter kits.
bandicam.2025-04-15.21-42-58-930.mp4
Code snippets
layout
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ $title ?? 'Page Title' }}</title>
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />
@vite(['resources/css/app.css', 'resources/js/app.js'])
@fluxAppearance
@livewireStyles
</head>
<body class="min-h-screen bg-white dark:bg-zinc-800">
<flux:sidebar sticky stashable class="bg-zinc-50 dark:bg-zinc-900 border-r rtl:border-r-0 rtl:border-l border-zinc-200 dark:border-zinc-700">
<flux:sidebar.toggle class="lg:hidden" icon="x-mark" />
<flux:brand href="#" logo="https://fluxui.dev/img/demo/logo.png" name="Acme Inc." class="px-2 dark:hidden" />
<flux:brand href="#" logo="https://fluxui.dev/img/demo/dark-mode-logo.png" name="Acme Inc." class="px-2 hidden dark:flex" />
<flux:input as="button" variant="filled" placeholder="Search..." icon="magnifying-glass" />
<flux:navlist variant="outline">
<flux:navlist.item icon="home" :href="route('dashboard')" :current="request()->routeIs('dashboard')">Dashboard</flux:navlist.item>
<flux:navlist.item icon="user" badge="12" href="{{route('drivers')}}" :current="request()->routeIs('drivers')">Drivers</flux:navlist.item>
<flux:navlist.item icon="document-text" href="{{route('orders')}}">Orders</flux:navlist.item>
</flux:navlist>
<flux:spacer />
<flux:navlist variant="outline">
<flux:navlist.item icon="cog-6-tooth" href="#">Settings</flux:navlist.item>
<flux:navlist.item icon="information-circle" href="#">Help</flux:navlist.item>
</flux:navlist>
<flux:dropdown position="top" align="start" class="max-lg:hidden">
<flux:profile name="{{ Auth::user()->name }}" />
<flux:menu>
<flux:radio.group x-data variant="segmented" x-model="$flux.appearance">
<flux:radio value="light" icon="sun" />
<flux:radio value="dark" icon="moon" />
</flux:radio.group>
<flux:menu.item href="#">Integrations</flux:menu.item>
<flux:menu.item href="#">Support</flux:menu.item>
<flux:menu.separator />
<form method="POST" action="{{ route('logout') }}" id="logout-form">
@csrf
<flux:menu.item
icon="arrow-right-start-on-rectangle"
onclick="document.getElementById('logout-form').submit();"
>
Logout
</flux:menu.item>
</flux:menu>
</flux:dropdown>
</flux:sidebar>
<flux:header class="lg:hidden">
<flux:sidebar.toggle class="lg:hidden" icon="bars-2" inset="left" />
<flux:spacer />
<flux:dropdown position="top" alignt="start">
<flux:profile name="{{ Auth::user()->name }}" />
<flux:menu>
<flux:menu.separator />
<form method="POST" action="{{ route('logout') }}" id="logout-form">
@csrf
<flux:menu.item
icon="arrow-right-start-on-rectangle"
onclick="document.getElementById('logout-form').submit();"
>
Logout
</flux:menu.item>
</flux:menu>
</flux:dropdown>
</flux:header>
<flux:main>
{{ $slot }}
</flux:main>
@fluxScripts
@livewireScripts
@persist('toast')
<flux:toast />
@endpersist
</body>
</html>
app.css
@import 'tailwindcss';
@import '../../vendor/livewire/flux/dist/flux.css';
@custom-variant dark (&:where(.dark, .dark *));
/* Re-assign Flux's gray of choice... */
@theme {
--color-zinc-50: var(--color-slate-50);
--color-zinc-100: var(--color-slate-100);
--color-zinc-200: var(--color-slate-200);
--color-zinc-300: var(--color-slate-300);
--color-zinc-400: var(--color-slate-400);
--color-zinc-500: var(--color-slate-500);
--color-zinc-600: var(--color-slate-600);
--color-zinc-700: var(--color-slate-700);
--color-zinc-800: var(--color-slate-800);
--color-zinc-900: var(--color-slate-900);
--color-zinc-950: var(--color-slate-950);
}
@theme {
--color-accent: var(--color-violet-500);
--color-accent-content: var(--color-violet-600);
--color-accent-foreground: var(--color-white);
}
@layer theme {
.dark {
--color-accent: var(--color-violet-500);
--color-accent-content: var(--color-violet-400);
--color-accent-foreground: var(--color-white);
}
}
<?php
namespace App\Livewire\Dashboard;
use Livewire\Component;
class Dashboard extends Component
{
public function render()
{
return view('livewire..dashboard.dashboard');
}
}
<div>
<flux:heading size="xl" level="1">Dashboard</flux:heading>
<flux:separator variant="subtle" class="mb-4 mt-2"/>
</div>
<?php
namespace App\Livewire\Orders;
use Livewire\Component;
class Orders extends Component
{
public function render()
{
return view('livewire.orders.orders');
}
}
<div>
<flux:heading size="xl" level="1">Orders</flux:heading>
<flux:separator variant="subtle" class="mb-4 mt-2"/>
</div>
Vite
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import tailwindcss from '@tailwindcss/vite';
export default defineConfig({
plugins: [
laravel({
input: ['resources/css/app.css', 'resources/js/app.js'],
refresh: true,
}),
tailwindcss(),
],
});
How do you expect it to work?
Without flashing.
Please confirm (incomplete submissions will not be addressed)
- I have provided easy and step-by-step instructions to reproduce the bug.
- I have provided code samples as text and NOT images.
- I understand my bug report will be closed if I haven't met the criteria above.