Tailwind CSS Dark Mode
Add dark mode to your site with ready-made Preline UI switcher, button toggle, and dropdown examples.
Requires JS
This page requires our Theme Switch plugin. You can skip this step if you're already using Preline UI as a package.
With dark mode becoming a first-class feature in many operating systems, it's increasingly common to design a dark version of your website alongside the default design. By integrating dark mode, you can meet user preferences and improve readability in low-light environments, ensuring your site is both functional and aesthetically pleasing.
Tailwind and Preline UI make this easy by including a dark variant, allowing you to style your site differently when dark mode is enabled.
Toggling dark mode manually
To enable manual dark mode toggling instead of relying on the operating system preference, override the dark variant to use your custom selector:
@import 'tailwindcss';
@custom-variant dark (&:where(.dark, .dark *));
Now instead of dark:* utilities being applied based on prefers-color-scheme, they will be applied whenever the dark class is present earlier in the HTML tree:
You can add the dark class to the html element any way you like, but a common approach is to use a small JavaScript snippet that updates the class attribute and stores that preference in localStorage.
For more information, visit Tailwind CSS Dark Mode
Switcher
Use data-hs-theme-switch to create a simple dark mode toggle. Add the JavaScript snippet in <head> so the saved theme is applied before the page renders.
Button toggle
Use icon buttons with data-hs-theme-click-value to switch between light and dark mode with a single click.
Select
Use data-hs-theme-click-value to build a dropdown-style theme selector with light, dark, and auto options.
Destroy and Reinitialize
Use the destroy method to remove a theme switch instance, then call HSThemeSwitch.autoInit() to initialize it again.