Persist dark mode in your Livewire Flux app

Posted on December 14, 2025

Laravel PHP Livewire Flux UI

If you're like me and you only want to render dark mode on your website, you can easily disable light mode altogether using Flux UI.

On your HTML tag, (usually in header.blade.php) add the dark class.

e.g.

<html class="dark">

Then, between your <head> tags, you will need to set dark mode to always be "on" in the browser's local storage.

<script>
    window.localStorage.setItem('flux.appearance', 'dark')
</script>

You may already have it, but ensure you have the following in your css file.

@import "tailwindcss";
@import "../../vendor/livewire/flux/dist/flux.css";
@custom-variant dark (&:where(.dark, .dark *));

Finally, restart your Vite server e.g. npm run dev.

Back to Posts