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 PhlexUI::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 using classes, like so: render PhlexUI::ThemeToggle.new(class: 'hidden').

Toggle component