Building A Dark Mode Toggle With Alpine.js And Tailwind CSS

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.

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-data sets up a darkMode variable.
On load (x-init), we check localStorage to remember the user’s last choice.
x-effect watches darkMode and updates both the DOM and localStorage.
The document.documentElement.classList.toggle('dark') adds or removes the dark class on <html>.

You can also read these article: How to Create a Countdown Timer with Alpine.js

Download Code

Download Basic

Download Fancy

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!

Building a Dark Mode Toggle with Alpine.js and Tailwind CSS

Table of Contents