- Plugins
- Theme Switch
Plugins
Tailwind CSS Theme Switch
Style your site in dark mode with ready made Preline UI's dark mode toggle plugin.
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
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>
Methods
The HSThemeSwitch object is contained within the global window object
Destroy instance.
const { element } = HSThemeSwitch.getInstance('#theme-switch', true);
const destroyBtn = document.querySelector('#destroy-btn');
destroyBtn.addEventListener('click', () => {
element.destroy();
});
Events
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.
