Tailwind CSS Theme Switch

Installation

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

Example

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">
                          Dark
                        </button>
                        <button type="button" class="hs-dark-mode hs-dark-mode-active:inline-flex hidden" data-hs-theme-click-value="light">
                          Light
                        </button>
                      
                    

JavaScript behavior

Classes

Events

Demo examples

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

Check out Preline UI Dismiss