1. Customization
  2. Dark Mode

Customization

Tailwind CSS Dark Mode - Preline UI

Style your site in dark mode.

Now that dark mode is a first-class feature of many operating systems, it’s becoming more and more common to design a dark version of your website to go along with the default design.

To make this as easy as possible, Tailwind and Preline UI include a dark variant that lets you style your site differently when dark mode is enabled.

Toggling dark mode manually

If you want to support toggling dark mode manually instead of relying on the operating system preference, use the class strategy:

                
                  // tailwind.config.js
                  module.exports = {
                    darkMode: 'class',
                    // ...
                  }
                
              

If you want to rely on the browser's color scheme preference, use the media strategy:

                
                  // tailwind.config.js
                  module.exports = {
                    darkMode: 'media',
                    // ...
                  }
                
              

How you add the dark class to the html element is up to you, but a common approach is to use a bit of JS that reads a preference from somewhere (like localStorage) and updates the DOM accordingly.

Switcher options

Switcher

Use data-hs-theme-switch If you want to create a dark mode switcher for Tailwind CSS and Preline UI, you'll have to add some JavaScript code and a toggle element that a user can use to change their preferences.

Copy

Button toggle

Copy

Select

Use data-hs-theme-click-value.

Copy

JavaScript behavior

Options

Parameters Description Options Default value
data-hs-theme-click-value Changing the theme when clicking on an element default | dark | auto null
data-hs-theme-switch Changing theme when changing checkbox/radio button No options null

Classes

Name Description
hs-dark-mode-active Dark mode is ON
hs-default-mode-active Default (light) mode is ON
hs-auto-mode-active Auto mode is ON

Events

Name Description
on-hs-appearance-change Fire theme changed for window object