1. Components
  2. Dark Mode


Tailwind CSS Dark Mode

Style your site in dark mode.

Now that dark mode is a first-class feature of many operating systems, it’s becoming more and more common to design a dark version of your website to go along with the default design.

To make this as easy as possible, Tailwind and Preline UI include a dark variant that lets you style your site differently when dark mode is enabled.


Use data-hs-theme-switch If you want to create a dark mode switcher for Tailwind CSS and Preline UI, you'll have to add some JavaScript code and a toggle element that a user can use to change their preferences.

Button toggle


Use data-hs-theme-click-value.