Tailwind CSS Theme Switch Plugin API

Headless, unstyled Theme Switch plugin built with JavaScript and TypeScript, including installation, usage, options, methods, events, and selectors.

Installation

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

Terminal

                        
                          npm i @preline/theme-switch

Toggling dark mode manually

To enable manual toggling of dark mode instead of relying on the operating system preference, use Tailwind's @custom-variant strategy:

CSS

                        
                          @import "tailwindcss";

                          @custom-variant dark (&:where(.dark, .dark *));

                          ...

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

Data Options

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. Should be added to the button (trigger).	'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. Should be added to the input (checkbox).	No options	null

Tailwind Modifiers

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

Methods

The HSThemeSwitch object is contained within the global window object

Method	Description
Public methods
`destroy()`	Destroys the instance, removes generated markup (if any), removes added classes and attributes.
Static methods
`HSThemeSwitch.getInstance(target, isInstance)`	Returns the element associated to the `target`. `target` should be a Node or string (valid selector) `isInstance` boolean. Returns the instance instead of Node if `true`

Destroy instance.

                      
                        const { element } = HSThemeSwitch.getInstance('#theme-switch', true);
                        const destroyBtn = document.querySelector('#destroy-btn');
                        
                        destroyBtn.addEventListener('click', () => {
                          element.destroy();
                        });

Events

Method	Description
`on-hs-appearance-change`	An event that fires every time the mode changes.

When appearance was changed.

                      
                        window.addEventListener('on-hs-appearance-change', () => {
                          ...your code 
                        });

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 Components

Tailwind CSS Theme Switch Plugin API

On this page