logo

Dark Mode

Learn how to work with Light, Dark, and System mode using Tailwind CSS.

Dark Mode Switch (Toggle)

Dark mode is enabled by default using a single toggle button. The toggle cycles through Light , Dark , and System mode.

Light / Dark / System
Only Dark Mode

If you want your site to always use dark mode:

  1. Add the dark class to the <html> tag.
  2. Remove the theme toggle button.
  3. Remove the theme toggle JavaScript (recommended).
<!doctype html>
<html lang="en" class="dark">
Dark Mode Customization

Dark mode is controlled using CSS variables. When the dark class is applied to the html element, Tailwind automatically switches colors. 

.dark {
    --color-body-bg: #121519;
    --color-body-color: rgba(255, 255, 255, 0.7);
}

Note: If your primary brand color has low contrast in dark mode, you can override --color-primary inside .dark .

Show / Hide Elements by Theme

You can conditionally display elements using Tailwind utilities:

<!-- Light only -->
<div class="dark:hidden">
    Light mode content
</div>

<!-- Dark only -->
<div class="hidden dark:block">
    Dark mode content
</div>