Published on

Learn How To Make A Switch to Darkmode With Tailwind CSS Like an Expert

Tags
AlpinejsButtonsInputs
Switch to Darkmode

As a FrontEnd technology blogger, you must be aware of the importance of user interface (UI) design. UI design plays a crucial role in providing a good user experience (UX) to your website visitors. One of the popular UI components that you can add to your website is the Switch to Darkmode button. In this article, we will learn how to create a Switch to Darkmode UI component with Tailwind CSS.

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that provides a set of pre-defined CSS classes to quickly build custom user interfaces. With Tailwind CSS, you can create complex UI components with minimal CSS code. Tailwind CSS is gaining popularity among developers because of its simplicity and flexibility.

The description of Switch to Darkmode UI component

The Switch to Darkmode UI component is a button that allows users to switch between light and dark modes on your website. This UI component is becoming popular because it provides a better user experience by reducing eye strain and improving readability.

Why use Tailwind CSS to create a Switch to Darkmode UI component?

Tailwind CSS provides a set of pre-defined CSS classes that can be used to create a Switch to Darkmode UI component quickly. With Tailwind CSS, you don't have to write custom CSS code to create this UI component. This saves time and effort, and you can focus on other aspects of your website.

The preview of Switch to Darkmode UI component

To create a Switch to Darkmode UI component with Tailwind CSS, we will use a button that changes color when clicked. The button will have two states: light and dark. When the button is in the light state, the background color will be white, and the text color will be black. When the button is in the dark state, the background color will be black, and the text color will be white.

Free download of the Switch to Darkmode's source code

The source code of Switch to Darkmode UI component

To create a Switch to Darkmode UI component with Tailwind CSS, we will use a combination of HTML and CSS code. The HTML code will define the button, and the CSS code will define the styles for the button.

<button 
    class="w-20 h-10 rounded-full bg-white flex items-center transition duration-300 focus:outline-none shadow"
    onclick="toggleTheme()">
    <div
        id="switch-toggle"
        class="w-12 h-12 relative rounded-full transition duration-500 transform bg-yellow-500 -translate-x-2 p-1 text-white">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
        </svg>
    </div>
</button>

<script>
const switchToggle = document.querySelector('#switch-toggle');
let isDarkmode = false

const darkIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
</svg>`

const lightIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
</svg>`

function toggleTheme (){
  isDarkmode = !isDarkmode
  localStorage.setItem('isDarkmode', isDarkmode)
  switchTheme()
}

function switchTheme (){
  if (isDarkmode) {
    switchToggle.classList.remove('bg-yellow-500','-translate-x-2')
    switchToggle.classList.add('bg-gray-700','translate-x-full')
    setTimeout(() => {
      switchToggle.innerHTML = darkIcon
    }, 250);
  } else {
    switchToggle.classList.add('bg-yellow-500','-translate-x-2')
    switchToggle.classList.remove('bg-gray-700','translate-x-full')
    setTimeout(() => {
      switchToggle.innerHTML = lightIcon
    }, 250);
  }
}

switchTheme()
</script>

How to create a Switch to Darkmode with Tailwind CSS?

To create a Switch to Darkmode UI component with Tailwind CSS, follow the steps below:

Step 1: Create the HTML code

Create a button element with an ID of "dark-mode-toggle". This ID will be used to toggle the button's state when clicked.

<button id="dark-mode-toggle">Switch to Darkmode</button>

Step 2: Create the CSS code

Add the following CSS code to your stylesheet to define the styles for the button.

/* Light mode styles */
#dark-mode-toggle {
  background-color: white;
  color: black;
}

/* Dark mode styles */
.dark-mode #dark-mode-toggle {
  background-color: black;
  color: white;
}

Step 3: Add JavaScript code

Add the following JavaScript code to toggle the button's state when clicked.

const darkModeToggle = document.querySelector('#dark-mode-toggle');

darkModeToggle.addEventListener('click', () => {
  document.body.classList.toggle('dark-mode');
});

Step 4: Add Tailwind CSS classes

To enhance the button's styles, we can add Tailwind CSS classes to the button element.

<button id="dark-mode-toggle" class="py-2 px-4 rounded-lg shadow-md bg-white text-black font-semibold hover:bg-gray-100 focus:outline-none dark:bg-gray-800 dark:text-white">
  Switch to Darkmode
</button>

In the above code, we have added the following Tailwind CSS classes to the button element:

  • py-2: adds padding of 0.5rem (8px) on the y-axis.
  • px-4: adds padding of 1rem (16px) on the x-axis.
  • rounded-lg: rounds the corners of the button.
  • shadow-md: adds a shadow to the button.
  • bg-white: sets the background color of the button to white.
  • text-black: sets the text color of the button to black.
  • font-semibold: sets the font weight of the button to semi-bold.
  • hover:bg-gray-100: changes the background color of the button to gray when hovered.
  • focus:outline-none: removes the outline when the button is focused.
  • dark:bg-gray-800: sets the background color of the button to gray in dark mode.
  • dark:text-white: sets the text color of the button to white in dark mode.

Step 5: Add dark mode styles

To enable dark mode on your website, add the following CSS code to your stylesheet.

@media (prefers-color-scheme: dark) {
  body {
    background-color: black;
    color: white;
  }
}

In the above code, we have added a media query that checks if the user's device has a dark color scheme preference. If the preference is dark, the background color of the body element will be set to black, and the text color will be set to white.

Conclusion

In this article, we have learned how to create a Switch to Darkmode UI component with Tailwind CSS. We have seen how Tailwind CSS can help us create complex UI components quickly and easily. By following the steps outlined in this article, you can add a Switch to Darkmode button to your website and provide a better user experience to your visitors.