- Published on
What You Need To Make A Darkmode Toggle Button With Tailwind CSS
- The description of Darkmode Toggle Button ui component
- Why use Tailwind CSS to create a Darkmode Toggle Button ui component?
- The preview of Darkmode Toggle Button ui component
- The source code of Darkmode Toggle Button ui component
- How to create a Darkmode Toggle Button with Tailwind CSS?
- Conclusion
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:
- 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>
In the
head
section of the HTML file, add a link to the Tailwind CSS stylesheet.Create a
div
element with theflex
,items-center
,justify-center
,h-screen
,bg-gray-200
, anddark:bg-gray-800
classes. This will create a container for the Darkmode Toggle Button.Inside the
div
element, create anotherdiv
element with therelative
,inline-block
,w-10
,mr-2
,align-middle
,select-none
,transition
,duration-200
, andease-in
classes. This will create the toggle switch.Inside the toggle switch
div
element, create aninput
element with thetoggle-checkbox
,absolute
,block
,w-6
,h-6
,rounded-full
,bg-white
,border-4
,appearance-none
, andcursor-pointer
classes. This will create the actual toggle switch.Still inside the toggle switch
div
element, create alabel
element with thetoggle-label
,block
,overflow-hidden
,h-6
,rounded-full
,bg-gray-300
, andcursor-pointer
classes. This will create the background for the toggle switch.Create a
label
element with thetext-xs
,text-gray-700
, anddark:text-gray-300
classes. This will create the label for the Darkmode Toggle Button.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.