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 set
darkMode
to
selector
in your
tailwind.config.js
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
If you don't want your application to support dark mode at all, you will need to change
darkMode
from
'selector'
to
null
in your
tailwind.config.js
file:
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.