Dark mode
How to use dark mode in your application
How it works
PhlexUI seamlessly integrates dark mode, a crucial feature for modern applications, enhancing user experience and catering to diverse user preferences.
PhlexUI is setup to use the TailwindCSS 'class' strategy. This means that you can toggle dark mode by adding or removing the dark class from the <body> element.
To enable dark mode, follow the installation below.
Installation
To implement Dark mode, add the ThemeToggle component (below) to your application layout file. This ensures it's available on all pages.
This component is a button that toggles the dark class on the <body> element, using the ToggleThemeController Stimulus controller.
Pro tip
You can hide the theme toggle on specific pages, like so:
ThemeToggle(class: 'hidden').