What is Dark mode toggle with JavaScript in Tailwind?

Tailwindmarkup~5 mins

Dark mode toggle with JavaScript in Tailwind

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Introduction

Dark mode helps reduce eye strain in low light. A toggle lets users switch between light and dark themes easily.

You want your website to be easier to read at night.

You want to give users control over the website's look.

You want to save device battery on OLED screens.

You want to follow modern design trends.

You want to improve accessibility for sensitive eyes.

Syntax

Tailwind

<!-- HTML button -->
<button id="darkModeToggle">Toggle Dark Mode</button>

<!-- JavaScript -->
<script>
  const toggle = document.getElementById('darkModeToggle');
  toggle.addEventListener('click', () => {
    document.documentElement.classList.toggle('dark');
  });
</script>

The dark class on html triggers Tailwind's dark styles.

Use document.documentElement to add the class to the root element.

Examples

Basic toggle button that switches dark mode on and off.

Tailwind

<button id="darkModeToggle">Toggle Dark Mode</button>

<script>
  const toggle = document.getElementById('darkModeToggle');
  toggle.addEventListener('click', () => {
    document.documentElement.classList.toggle('dark');
  });
</script>

Improved toggle with accessibility using ARIA attributes.

Tailwind

<button id="darkModeToggle" aria-pressed="false" aria-label="Toggle dark mode">Toggle Dark Mode</button>

<script>
  const toggle = document.getElementById('darkModeToggle');
  toggle.addEventListener('click', () => {
    const isDark = document.documentElement.classList.toggle('dark');
    toggle.setAttribute('aria-pressed', isDark.toString());
  });
</script>

Sample Program

This page uses Tailwind CSS with a button to switch between light and dark modes. The background and text colors change smoothly. The button updates its ARIA state for accessibility.

Tailwind

<!DOCTYPE html>
<html lang="en" class="transition-colors duration-500">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Dark Mode Toggle</title>
  <script>
    tailwind.config = {
      darkMode: 'class',
    }
  </script>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 min-h-screen flex flex-col items-center justify-center">
  <button id="darkModeToggle" aria-pressed="false" aria-label="Toggle dark mode" class="px-6 py-3 bg-gray-200 dark:bg-gray-700 rounded-md focus:outline-none focus:ring-4 focus:ring-blue-500">
    Toggle Dark Mode
  </button>
  <p class="mt-6 text-lg">
    This text changes color based on the theme.
  </p>

  <script>
    const toggle = document.getElementById('darkModeToggle');
    toggle.addEventListener('click', () => {
      const isDark = document.documentElement.classList.toggle('dark');
      toggle.setAttribute('aria-pressed', isDark.toString());
    });
  </script>
</body>
</html>

OutputSuccess

Important Notes

Tailwind CSS must be configured to use class strategy for dark mode.

Adding smooth transitions improves user experience.

Always update ARIA attributes for accessibility when toggling states.

Summary

Dark mode toggle switches the dark class on the root html element.

Tailwind CSS uses this class to apply dark styles automatically.

Use JavaScript event listeners to handle user clicks on the toggle button.