1. Plugins
  2. Theme Switch


Tailwind CSS Theme Switch

Style your site in dark mode.

Theme Switch


To get started, install Theme Switch plugin via npm, else you can skip this step if you are already using Preline UI as a package.

                        npm i @preline/theme-switch

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.

For more information, visit Tailwind CSS Dark Mode


Remove card with a dismissable button.

Basic usage

Prefer to create your own style? Here is a completely unstylized example.

                        <button type="button" class="hs-dark-mode hs-dark-mode-active:hidden block" data-hs-theme-click-value="dark">
                        <button type="button" class="hs-dark-mode hs-dark-mode-active:inline-flex hidden" data-hs-theme-click-value="light">


Name Description Options Default value
data-hs-theme-click-value When you click on an element with this attribute, the theme changes to the one specified in the attribute. 'default' | 'dark' | 'auto' default
data-hs-theme-switch When you change an element with this attribute, the theme changes to the opposite one. Element should have change event, e.g. checkbox or radio button. No options null


Name Description
hs-dark-mode-active:* Defines CSS classes when dark mode is ON
hs-default-mode-active:* Defines CSS classes when default (light) mode is ON
hs-default-auto-active:* Defines CSS classes according to the System theme


Method Description
An event that fires every time the mode changes. Example of use:

Demo examples

Looking for prebuilt UI components based on the Tailwind CSS? Preline UI packs hundreds of component examples for all your website needs.

Image Description
Check out Preline UI Dismiss