In this article, I will show you how to create a Dark Mode Toggle with Alpine.js. It’s a simple and effective way to add a modern touch to your website. With just a few lines of code, you can switch between light and dark themes effortlessly.
Alpine.js makes the whole process easy, even if you’re new to JavaScript. By the end, you’ll have a smooth toggle feature that’s both functional and fun to build.”
Dark mode is not just trendy — it’s easier on the eyes and can make your site feel modern. In this quick tutorial, you’ll learn how to build a dark mode toggle using Alpine.js and Tailwind CSS, with no frameworks or complex setup needed.
Table of Contents
What You’ll Need
- Basic HTML knowledge
- Tailwind CSS (with dark mode enabled)
- Alpine.js (v3+)
Dark Mode Toggle Demo #1
Dark Mode Toggle Demo #2
Let’s Building a Dark Mode Toggle with Alpine.js
Now, let’s dive into the implementation. I’ll guide you through each step in a simple and easy-to-follow way, so you can quickly set up your Dark Mode Toggle using Alpine.js!
Step 1: Set Up Tailwind with Dark Mode
First, make sure Tailwind is set up with class-based dark mode. In your tailwind.config.js:
module.exports = {
darkMode: 'class', // Enable class-based dark mode
content: ['./index.html'],
theme: {
extend: {},
},
plugins: [],
}
This lets you control dark mode manually by adding a dark class to the <html> or <body> tag.
Step 2: Add Alpine.js to Your HTML
Include Alpine.js via CDN before the closing </body> tag:
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>
Step 3: Create the Toggle Button
Now let’s build the toggle itself:
<!DOCTYPE html>
<html lang="en" x-data="darkModeComponent()" x-init="init()">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>alpinejs Dark Mode Toggle</title>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
darkMode: 'class',
}
</script>
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>
</head>
<body class="min-h-screen bg-white dark:bg-gray-900 text-black dark:text-white flex items-center justify-center transition-all">
<div class="text-center">
<h1 class="text-3xl mb-6">🌗 Dark Mode Toggle</h1>
<!-- Toggle button -->
<button
@click="toggleDarkMode"
class="px-4 py-2 rounded-lg bg-gray-200 dark:bg-gray-800 text-black dark:text-white shadow transition-all">
Toggle Dark Mode
</button>
</div>
<!-- Main alpinejs code for darkmode -->
<script>
function darkModeComponent() {
return {
darkMode: false,
init() {
this.darkMode = localStorage.getItem('darkMode') === 'true';
this.updateHtmlClass();
},
toggleDarkMode() {
this.darkMode = !this.darkMode;
localStorage.setItem('darkMode', this.darkMode);
this.updateHtmlClass();
},
updateHtmlClass() {
document.documentElement.classList.toggle('dark', this.darkMode);
}
}
}
</script>
</body>
</html>
How It Works
- Alpine’s
x-datasets up adarkModevariable. - On load (
x-init), we checklocalStorageto remember the user’s last choice. x-effectwatchesdarkModeand updates both the DOM andlocalStorage.- The
document.documentElement.classList.toggle('dark')adds or removes thedarkclass on<html>.
You can also read these article: How to Create a Countdown Timer with Alpine.js
Download Code
Conclusion
Alpine.js is great if you want a small, easy tool for web pages or quick little projects. It’s simple to use and doesn’t slow anything down.
just a few lines of Alpine.js and Tailwind CSS, you’ve built a fully functional dark mode toggle that looks great and remembers user preferences. This approach keeps things lightweight, JavaScript-free (besides Alpine), and totally customizable.
Dark mode is a small feature that makes a big impact on user experience — and now you’ve got the skills to add it to any project quickly.
Keep experimenting, and don’t be afraid to level it up with icons, transitions, or even system preference detection!
Happy coding!