search results:

    Get started License Playground Services Free hosting Community
    • + D
    • Light
    • Dark
    Tailwind Elements
    • Getting started
      • Quick start
      • Dark mode
      • Theming
      • Changelog
      • Contribute
    • Integrations
      • Angular
      • Django
      • Express
      • Laravel
      • Next
      • Nuxt
      • React
      • Svelte
      • Vue
    • Content & styles
      • Animations
      • Colors
      • Dividers
      • Figures
      • Headings
      • Hover effects
      • Icons
      • Images
      • Mask
      • Shadows
      • Typography
    • Navigation
      • Breadcrumbs
      • Footer
      • Headers
      • Mega menu
      • Navbar
      • Offcanvas
      • Pagination
      • Pills
      • Scrollspy
      • Sidenav
      • Tabs
    • Components
      • Accordion
      • Alerts
      • Avatar
      • Badges
      • Button group
      • Buttons
      • Cards
      • Carousel
      • Chips
      • Collapse
      • Dropdown
      • Gallery
      • Jumbotron
      • Link
      • List group
      • Modal
      • Notifications
      • Paragraphs
      • Placeholders
      • Popover
      • Progress
      • Rating
      • Scroll back to top button
      • Social buttons
      • Spinners
      • Stepper
      • Testimonials
      • Timeline
      • Toast
      • Tooltip
      • Video
      • Video carousel
    • Forms
      • Checkbox
      • Datepicker
      • File input
      • Form templates
      • Input Group
      • Inputs
      • Login form
      • Radio
      • Range
      • Registration form
      • Search
      • Select
      • Switch
      • Textarea
      • Timepicker
    • Data
      • Charts
      • Tables
    • Methods
      • Ripple
    • Design Blocks
      • Banners
      • Contact
      • Content
      • CTA
      • FAQ
      • Features
      • Headers
      • Hero / Intro sections
      • Logo clouds
      • Mega menu
      • News
      • Newsletter
      • Pricing
      • Projects
      • Stats
      • Team
      • Testimonials
    • Coming Soon
      • Angular
      • Builder
      • React
      • Templates
      • Vue

    Dark Mode

    Tailwind CSS Dark Mode / Dark Theme

    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 py-2 px-3 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 py-2 px-3 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-te-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);
            });
          
            
        
    • Introduction
    • Toggling dark mode
    • Manual selection
    Get useful tips & free resources directly to your inbox along with exclusive subscriber-only content.
    Join our mailing list now
    © 2023 Copyright: MDBootstrap.com