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.

// This code should be added to <head>.
                      // It's used to prevent page load glitches.
                      const html = document.querySelector('html');
                      const isLightOrAuto = localStorage.getItem('hs_theme') === 'light' || (localStorage.getItem('hs_theme') === 'auto' && !window.matchMedia('(prefers-color-scheme: dark)').matches);
                      const isDarkOrAuto = localStorage.getItem('hs_theme') === 'dark' || (localStorage.getItem('hs_theme') === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches);

if (isLightOrAuto && html.classList.contains('dark')) html.classList.remove('dark');
                      else if (isDarkOrAuto && html.classList.contains('light')) html.classList.remove('light');
                      else if (isDarkOrAuto && !html.classList.contains('dark')) html.classList.add('dark');
                      else if (isLightOrAuto && !html.classList.contains('light')) html.classList.add('light');

Button toggle

Select

Use data-hs-theme-click-value.

Tailwind CSS Dark Mode

Switcher options

Switcher

Button toggle

Select

On this page