Tutorial: Implementing Dark Mode with Tailwind CSS
When searching for a tutorial to implement dark mode on an HTML page, it can be challenging to find resources that explain it clearly. That's why I'm providing this tutorial to help those who are looking to achieve this functionality.
Steps to Follow:
1. Include Tailwind CSS JavaScript File
First, include the Tailwind CSS JavaScript file in the <head> section of your HTML page. You can do this using the Tailwind CSS CDN or by downloading the file and adding it locally:
<!-- Include Tailwind CSS JavaScript file with class strategy -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- OR download tailwind.min.js file and add it locally -->
<!-- <script src="./path/to/tailwind.min.js"></script> -->
2. Configure Dark Mode Strategy
Before enabling dark mode, configure the dark mode strategy in the <script> tag within the <head>. In this example, we are using the class strategy to enable dark mode:
<!-- Configure dark mode strategy -->
<script>
tailwind.config = {
darkMode: 'class', /* 'class' or 'media', we use 'class' to enable dark mode manually */
}
</script>
3. Load Theme on Page Load
If you want the theme to load automatically right from the start, add the following script within the <script> tag in the <head>:
<!-- Load theme on page load -->
<script>
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>
4. Create a Card with Dark Mode Button
Now, create a card with text content and a button to toggle dark mode on and off. You can customize the card's content as you like:
<body class="bg-slate-100 dark:bg-slate-800 relative flex min-h-screen flex-col justify-center overflow-hidden py-6 sm:py-12">
<div class="flex justify-center items-center h-screen">
<a href="#" class="block max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700">
<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Quote by Agent K</h5>
<p class="font-normal text-gray-700 dark:text-gray-400">"A person is smart. People are dumb, panicky, dangerous animals and you know it." - Agent K, Men in Black</p>
</a>
<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="hidden w-5 h-5" 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="hidden w-5 h-5" 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>
</div>
</body>
5. Script to Toggle Dark Mode
Finally, add the following script at the end of your HTML page to toggle dark mode on and off when the button is clicked:
<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>
That's it! You have successfully implemented dark mode with Tailwind CSS on your HTML page. Feel free to customize the styles and content according to your preferences.
Conclusion
This tutorial has guided you through the necessary steps to enable and disable dark mode on an HTML page using Tailwind CSS. Enjoy your new dark mode feature!
Below the complete code
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Arabic-Roman Numeral Converter</title>
<link rel="icon" type="image/svg+xml" href="./assets/favicon/icon.svg">
<!-- Tailwind CSS with class strategy -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- OR download tailwind.min cdn file and paste your file -->
<!-- <script src="./assets/tailwind/tailwind.min.js"></script> -->
<!-- Configure your strategy -->
<script>
tailwind.config = {
darkMode: 'class', /* class/media, here we use class to enable manually dark mode */
}
</script>
<script>
/**
* Loads the theme stored
*/
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>
</head>
<body class="bg-slate-100 dark:bg-slate-800 relative flex min-h-screen flex-col justify-center overflow-hidden py-6 sm:py-12">
<div class="flex justify-center items-center h-screen">
<a href="#" class="block max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700">
<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Quote by Agent K</h5>
<p class="font-normal text-gray-700 dark:text-gray-400">"A person is smart. People are dumb, panicky, dangerous animals and you know it." - Agent K, Men in Black</p>
</a>
<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="hidden w-5 h-5" 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="hidden w-5 h-5" 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>
</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>
</body>
</html>
Top comments (0)