1. Plugins
  2. Theme Switch

Plugins

Tailwind CSS Theme Switch

Style your site in dark mode with ready made Preline UI's dark mode toggle plugin.

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

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

@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.

Plugins UI Mockups
Check out Preline UI Components