Flux supports dark mode out of the box.
Set up Tailwind
To take full advantage of Flux's dark mode controls, you will need to ensure that Tailwind CSS is configured to use the
selector
strategy for dark mode by adding this to your
resources/views/app.css
file:
By doing this, Flux can now toggle on and off dark mode by adding/removing a
.dark
class to the
<html>
element of your application.
Disabling dark mode handling
By default, Flux will handle the appearance of your application by adding a dark class to the html element depending on the user's system preference or selected appearance.
If you don't want Flux to handle this for you, you can remove the
@fluxAppearance
directive from your layout file.
Now you can handle the appearance of your application manually.
JavaScript utilities
Managing dark mode in your own application is cumbersome. Here are a few essential behaviors you have to implement:
-
Add/remove the
.dark
class to the <html>
element
-
Store the users preference in local storage
-
Honor the system preference if
system
is selected
-
Listen for changes in the system preference after a page has loaded
To save you from this complexity, Flux provides two JavaScript/Alpine utilities for making it easy to manage dark mode:
Given these two utilities, you can now use Alpine to easily build widgets to manage dark mode.
For example, here's how you would write a simple dark mode toggle button:
Or if you wanted to allow a user to choose their preferred color scheme, you could write:
If you want to use these utilities outside of Alpine, you can instead access
.appearance
and
.dark
on the global
window.Flux
JavaScript object from anywhere in your application:
Examples
Rather than offer a one-size-fits-allnone solution, Flux provides a few examples of how you can use these utilities to build your own dark mode controls.
Dropdown menu
More robust than a simple toggle button, this dropdown menu allows users to choose between light, dark, and system modes.