Published on

Best Ways To Make A Tailwind CSS dark mode switcher With Tailwind CSS

Tags
Tailwind CSS dark mode switcher

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that allows you to rapidly build custom user interfaces. It provides a set of pre-defined classes that can be used to style HTML elements. Tailwind CSS is highly customizable and allows you to create unique designs with minimal effort.

The Description of Tailwind CSS Dark Mode Switcher UI Component

A dark mode switcher is a UI component that allows users to switch between a light and dark color scheme. This component is becoming increasingly popular as more and more users prefer to use dark mode on their devices. A Tailwind CSS dark mode switcher UI component is a switcher that is built using Tailwind CSS classes.

Why Use Tailwind CSS to Create a Tailwind CSS Dark Mode Switcher UI Component?

Tailwind CSS provides a set of pre-defined classes that can be used to style HTML elements. This makes it easy to create a Tailwind CSS dark mode switcher UI component without having to write a lot of custom CSS. Additionally, Tailwind CSS is highly customizable, which means that you can easily modify the switcher to fit your specific needs.

The Preview of Tailwind CSS Dark Mode Switcher UI Component

To create a Tailwind CSS dark mode switcher UI component, you will need to use a combination of HTML and Tailwind CSS classes. The switcher will consist of a toggle button that allows users to switch between light and dark mode.

Free download of the Tailwind CSS dark mode switcher's source code

The Source Code of Tailwind CSS Dark Mode Switcher UI Component

To create a Tailwind CSS dark mode switcher UI component, you will need to use a combination of HTML and Tailwind CSS classes. The switcher will consist of a toggle button that allows users to switch between light and dark mode.

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

<!-- This is an example component -->
<div class="max-w-lg mx-auto dark:bg-gray-800 p-12 rounded">

    <link rel="stylesheet" href="https://unpkg.com/@themesberg/[email protected]/dist/flowbite.min.css" />
    
    <button id="theme-toggle" type="button" class="text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5">
        <svg id="theme-toggle-dark-icon" class="w-5 h-5 hidden" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path></svg>
        <svg id="theme-toggle-light-icon" class="w-5 h-5 hidden" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
    </button>

    <p class="mt-5 dark:text-white">This dark mode switcher is part of a larger, open-source library of Tailwind CSS components. Learn more by going to the official <a class="text-blue-600 dark:text-blue-400 hover:underline" href="https://flowbite.com/docs/getting-started/introduction/" target="_blank">Flowbite Documentation</a>.</p>
</div>

<script>
    var themeToggleDarkIcon = document.getElementById('theme-toggle-dark-icon');
var themeToggleLightIcon = document.getElementById('theme-toggle-light-icon');

// Change the icons inside the button based on previous settings
if (localStorage.getItem('color-theme') === 'dark' || (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
    themeToggleLightIcon.classList.remove('hidden');
} else {
    themeToggleDarkIcon.classList.remove('hidden');
}

var themeToggleBtn = document.getElementById('theme-toggle');

themeToggleBtn.addEventListener('click', function() {

    // toggle icons inside button
    themeToggleDarkIcon.classList.toggle('hidden');
    themeToggleLightIcon.classList.toggle('hidden');

    // if set via local storage previously
    if (localStorage.getItem('color-theme')) {
        if (localStorage.getItem('color-theme') === 'light') {
            document.documentElement.classList.add('dark');
            localStorage.setItem('color-theme', 'dark');
        } else {
            document.documentElement.classList.remove('dark');
            localStorage.setItem('color-theme', 'light');
        }

    // if NOT set via local storage previously
    } else {
        if (document.documentElement.classList.contains('dark')) {
            document.documentElement.classList.remove('dark');
            localStorage.setItem('color-theme', 'light');
        } else {
            document.documentElement.classList.add('dark');
            localStorage.setItem('color-theme', 'dark');
        }
    }
    
});
</script>
<script src="https://unpkg.com/@themesberg/[email protected]/dist/flowbite.bundle.js"></script>

How to Create a Tailwind CSS Dark Mode Switcher with Tailwind CSS?

To create a Tailwind CSS dark mode switcher, follow these steps:

  1. Create a new HTML file and add the following code:
<div class="flex items-center justify-center h-screen">
  <label for="toggle" class="flex items-center cursor-pointer">
    <div class="relative">
      <input id="toggle" type="checkbox" class="sr-only" />
      <div class="block bg-gray-600 w-14 h-8 rounded-full"></div>
      <div class="dot absolute left-1 top-1 bg-white w-6 h-6 rounded-full transition"></div>
    </div>
    <div class="ml-3 text-gray-700 font-medium">Dark Mode</div>
  </label>
</div>
  1. Add the following CSS to your stylesheet:
/* Toggle */
input[type="checkbox"].toggle:checked + .dot {
  transform: translateX(100%);
  background-color: #4f46e5;
}

/* Dot */
.dot {
  transition: transform 0.2s ease-in-out;
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
  body {
    background-color: #1a202c;
    color: #f7fafc;
  }
  
  .block {
    background-color: #2d3748;
  }
  
  .dot {
    background-color: #cbd5e0;
  }
  
  .text-gray-700 {
    color: #cbd5e0;
  }
}
  1. Save the file and open it in your browser.

You should now have a working Tailwind CSS dark mode switcher that allows users to switch between light and dark mode.

Conclusion

In this article, we have discussed how to create a Tailwind CSS dark mode switcher UI component. We have covered the benefits of using Tailwind CSS to create this component, as well as provided a preview and source code for the switcher. By following the steps outlined in this article, you can easily create a Tailwind CSS dark mode switcher for your own projects.