Published on

What You Need To Make A Darkmode Toggle Button With Tailwind CSS

Darkmode Toggle Button

Tailwind CSS is a utility-first CSS framework that allows developers to quickly create responsive and customizable user interfaces. It provides a set of pre-defined classes that can be used to style HTML elements, making it easy to create complex layouts without having to write custom CSS code.

The description of Darkmode Toggle Button ui component

A Darkmode Toggle Button is a user interface component that allows users to switch between light and dark modes on a website or application. When the button is clicked, the color scheme of the website or application changes to a darker theme, making it easier to view in low-light conditions.

Why use Tailwind CSS to create a Darkmode Toggle Button ui component?

Tailwind CSS is an excellent choice for creating a Darkmode Toggle Button because it provides a wide range of utility classes that can be used to style the button and its associated elements. Additionally, Tailwind CSS makes it easy to create responsive designs that work well on a variety of devices.

The preview of Darkmode Toggle Button ui component

To create a Darkmode Toggle Button with Tailwind CSS, we will use a combination of HTML, CSS, and JavaScript. The button will consist of a toggle switch that changes from a light mode icon to a dark mode icon when clicked.

Free download of the Darkmode Toggle Button's source code

The source code of Darkmode Toggle Button ui component

To create the Darkmode Toggle Button, we will use the following HTML, CSS, and JavaScript code.

<button 
    title="Toggle Theme" 
    onclick="theme()"
    class="
        w-12 
        h-6 
        rounded-full 
        p-1 
        bg-gray-400 
        dark:bg-gray-600 
        relative 
        transition-colors 
        duration-500 
        ease-in
        focus:outline-none 
        focus:ring-2 
        focus:ring-blue-700 
        dark:focus:ring-blue-600 
        focus:border-transparent
      ">
      <div id="toggle"
        class="
            rounded-full 
            w-4 
            h-4 
            bg-blue-600 
            dark:bg-blue-500 
            relative 
            ml-0 
            dark:ml-6 
            pointer-events-none 
            transition-all 
            duration-300 
            ease-out
        ">
      </div>
</button>


  <script>
   function theme(event) {
       console.log('theme')
      document.documentElement.classList.toggle('dark')
    }
  </script>

<!-- imitate dark mode styles enabled -->
<style>
   html.dark {
        --tw-bg-opacity: 1;
        background-color: rgba(31, 41, 55, var(--tw-bg-opacity));
    }
   
   html.dark .dark\:ml-6 {
       	margin-left: 1.5rem;
    }

   html.dark .dark\:bg-blue-500 {
       	--tw-bg-opacity: 1;
        background-color: rgba(59, 130, 246, var(--tw-bg-opacity));
    }
</style>

How to create a Darkmode Toggle Button with Tailwind CSS?

To create a Darkmode Toggle Button with Tailwind CSS, follow these steps:

  1. Create a new HTML file and add the following code:
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Darkmode Toggle Button</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css">
</head>
<body>
  <div class="flex items-center justify-center h-screen bg-gray-200 dark:bg-gray-800">
    <div class="relative inline-block w-10 mr-2 align-middle select-none transition duration-200 ease-in">
      <input type="checkbox" name="toggle" id="toggle" class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer"/>
      <label for="toggle" class="toggle-label block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"></label>
    </div>
    <label for="toggle" class="text-xs text-gray-700 dark:text-gray-300">Dark mode</label>
  </div>
  <script>
    const toggleSwitch = document.querySelector('.toggle-checkbox');
    const currentTheme = localStorage.getItem('theme');
    if (currentTheme) {
        document.documentElement.setAttribute('data-theme', currentTheme);
        if (currentTheme === 'dark') {
            toggleSwitch.checked = true;
        }
    }
    function switchTheme(e) {
        if (e.target.checked) {
            document.documentElement.setAttribute('data-theme', 'dark');
            localStorage.setItem('theme', 'dark');
        }
        else {
            document.documentElement.setAttribute('data-theme', 'light');
            localStorage.setItem('theme', 'light');
        }
    }
    toggleSwitch.addEventListener('change', switchTheme, false);
  </script>
</body>
</html>
  1. In the head section of the HTML file, add a link to the Tailwind CSS stylesheet.

  2. Create a div element with the flex, items-center, justify-center, h-screen, bg-gray-200, and dark:bg-gray-800 classes. This will create a container for the Darkmode Toggle Button.

  3. Inside the div element, create another div element with the relative, inline-block, w-10, mr-2, align-middle, select-none, transition, duration-200, and ease-in classes. This will create the toggle switch.

  4. Inside the toggle switch div element, create an input element with the toggle-checkbox, absolute, block, w-6, h-6, rounded-full, bg-white, border-4, appearance-none, and cursor-pointer classes. This will create the actual toggle switch.

  5. Still inside the toggle switch div element, create a label element with the toggle-label, block, overflow-hidden, h-6, rounded-full, bg-gray-300, and cursor-pointer classes. This will create the background for the toggle switch.

  6. Create a label element with the text-xs, text-gray-700, and dark:text-gray-300 classes. This will create the label for the Darkmode Toggle Button.

  7. Add a script element to the HTML file with the following JavaScript code:

const toggleSwitch = document.querySelector('.toggle-checkbox');
const currentTheme = localStorage.getItem('theme');
if (currentTheme) {
    document.documentElement.setAttribute('data-theme', currentTheme);
    if (currentTheme === 'dark') {
        toggleSwitch.checked = true;
    }
}
function switchTheme(e) {
    if (e.target.checked) {
        document.documentElement.setAttribute('data-theme', 'dark');
        localStorage.setItem('theme', 'dark');
    }
    else {
        document.documentElement.setAttribute('data-theme', 'light');
        localStorage.setItem('theme', 'light');
    }
}
toggleSwitch.addEventListener('change', switchTheme, false);

This JavaScript code will allow the Darkmode Toggle Button to switch between light and dark modes when clicked.

Conclusion

In this article, we have learned how to create a Darkmode Toggle Button with Tailwind CSS. By using Tailwind CSS, we were able to quickly and easily create a responsive and customizable user interface component that allows users to switch between light and dark modes on a website or application. With the help of this tutorial, you can now add a Darkmode Toggle Button to your own projects and improve the user experience for your users.