Tailwind CSS Dark Mode / Theme - Free Examples & Tutorial

Use our dark mode toggle switch to enable the dark theme UI in Tailwind CSS. Dark mode supports typography, dark mode colors, easy config customization & more.

Introduction

It is more and more common to design a dark version of your project to go along with the default design. To make this as easy as possible, Tailwind includes a dark variant that lets you style your site differently when dark mode is enabled: you can simply check this feature out by pressing theme switcher located at the right corner or use a shortcut shift + D.

Enabling dark mode

By default dark mode uses the prefers-color-scheme CSS media feature, but you can also build sites that support toggling dark mode manually using the class strategy. After that all you got to do is add dark class on your html element.

darkMode: 'media' is the default value and is not required to write it explicit.

tailwind.config.js
index.html

        
            
        module.exports = {
          darkMode: 'class',
          // ...
        }

        
            
      <!-- Dark mode not enabled -->
      <html>
        <body>
          <!-- Will be white -->
          <div class="bg-white dark:bg-black">
            <!-- ... -->
          </div>
        </body>
      </html>

      <!-- Dark mode enabled -->
      <html class="dark">
        <body>
          <!-- Will be black -->
          <div class="bg-white dark:bg-black">
            <!-- ... -->
          </div>
        </body>
      </html>

Manually switching

More practical is setting a manual type of changing version of your website. By implementing this you need to write a little bit of JavaScript code. The class strategy can be used to support both the user's system preference or a manually selected mode by using the Window.matchMedia() API.

index.html
theme.js

        
            
      <div>
        <a
          id="theme-switcher"
          class="block w-full whitespace-nowrap bg-transparent px-3 py-2 text-sm font-normal text-gray-700 hover:bg-gray-100 focus:bg-gray-200 focus:outline-none active:text-zinc-800 active:no-underline disabled:pointer-events-none disabled:bg-transparent disabled:text-gray-400 dark:text-gray-100 dark:hover:bg-gray-600 focus:dark:bg-gray-600"
          href="#"
          data-theme="light">
          <div class="pointer-events-none">
            <div
              class="inline-block w-[24px] text-center"
              data-theme-icon="light">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                fill="currentColor"
                class="inline-block h-6 w-6">
                <path
                  d="M12 2.25a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0V3a.75.75 0 01.75-.75zM7.5 12a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM18.894 6.166a.75.75 0 00-1.06-1.06l-1.591 1.59a.75.75 0 101.06 1.061l1.591-1.59zM21.75 12a.75.75 0 01-.75.75h-2.25a.75.75 0 010-1.5H21a.75.75 0 01.75.75zM17.834 18.894a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 10-1.061 1.06l1.59 1.591zM12 18a.75.75 0 01.75.75V21a.75.75 0 01-1.5 0v-2.25A.75.75 0 0112 18zM7.758 17.303a.75.75 0 00-1.061-1.06l-1.591 1.59a.75.75 0 001.06 1.061l1.591-1.59zM6 12a.75.75 0 01-.75.75H3a.75.75 0 010-1.5h2.25A.75.75 0 016 12zM6.697 7.757a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 00-1.061 1.06l1.59 1.591z" />
              </svg>
            </div>
            <span data-theme-name="light">Light</span>
          </div>
        </a>
        <a
          id="theme-switcher"
          class="block w-full whitespace-nowrap bg-transparent px-3 py-2 text-sm font-normal text-gray-700 hover:bg-gray-100 focus:bg-gray-200 focus:outline-none active:text-zinc-800 active:no-underline disabled:pointer-events-none disabled:bg-transparent disabled:text-gray-400 dark:text-gray-100 dark:hover:bg-gray-600 focus:dark:bg-gray-600"
          href="#"
          data-theme="dark"
          data-twe-dropdown-item-ref>
          <div class="pointer-events-none">
            <div
              class="inline-block w-[24px] text-center"
              data-theme-icon="dark">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                fill="currentColor"
                class="inline-block h-6 w-6">
                <path
                  fill-rule="evenodd"
                  d="M9.528 1.718a.75.75 0 01.162.819A8.97 8.97 0 009 6a9 9 0 009 9 8.97 8.97 0 003.463-.69.75.75 0 01.981.98 10.503 10.503 0 01-9.694 6.46c-5.799 0-10.5-4.701-10.5-10.5 0-4.368 2.667-8.112 6.46-9.694a.75.75 0 01.818.162z"
                  clip-rule="evenodd" />
              </svg>
            </div>
            <span data-theme-name="dark">Dark</span>
          </div>
        </a>
      </div>

        
            
        // On page load or when changing themes, best to add inline in `head` to avoid FOUC
        if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
          document.documentElement.classList.add('dark');
        } else {
          document.documentElement.classList.remove('dark');
        };

        function setDarkTheme() {
          document.documentElement.classList.add("dark");
          localStorage.theme = "dark";
        };
      
        function setLightTheme() {
          document.documentElement.classList.remove("dark");
          localStorage.theme = "light";
        };

        function onThemeSwitcherItemClick(event) {
          const theme = event.target.dataset.theme;

          if (theme === "system") {
            localStorage.removeItem("theme");
            setSystemTheme();
          } else if (theme === "dark") {
            setDarkTheme();
          } else {
            setLightTheme();
          }
        };

        const themeSwitcherItems = document.querySelectorAll("#theme-switcher");
        themeSwitcherItems.forEach((item) => {
          item.addEventListener("click", onThemeSwitcherItemClick);
        });

Dark Mode

Tailwind CSS Dark Mode / Dark Theme

Introduction

Enabling dark mode

Manually switching

Access restricted

To view this section you must have an active PRO account