Dark Mode and Night Mode with Tailwind CSS and CSS Variables

Dark mode and night mode are must-haves for modern websites. They improve accessibility and give users the flexibility to choose their preferred look. Let’s dive into how you can build this feature using Tailwind CSS and CSS variables.

Why Tailwind CSS and CSS Variables Work So Well

• CSS Variables: Simplify managing colors for different themes.
• Parent Class: Toggle themes by switching a single parent class.
• JavaScript Integration: Dynamically update themes with minimal effort.

Setting Up Theme Colors with CSS Variables

Start by defining the colors for your themes. These CSS variables will be inside a parent class to make switching themes easy.

/* Light Theme (Default) */
:root {
  --bg-color: #ffffff;
  --text-color: #000000;
}

/* Dark Theme */
.theme-dark {
  --bg-color: #000000;
  --text-color: #ffffff;
}

/* Solarized Theme */
.theme-solarized {
  --bg-color: #002b36;
  --text-color: #839496;
}

Using CSS Variables in Tailwind Classes

Tailwind makes it easy to use CSS variables for styling.

<div class="min-h-screen flex flex-col items-center justify-center bg-[var(--bg-color)] text-[var(--text-color)]">
  <h1 class="text-4xl font-bold mb-6">Dark Mode Demo</h1>
  <button class="px-4 py-2 rounded bg-[var(--text-color)] text-[var(--bg-color)] font-semibold">
    Click Me
  </button>
  <select id="theme-select" class="mt-6 p-2 border border-gray-300 rounded">
    <option value="theme-light">Light Theme</option>
    <option value="theme-dark">Dark Theme</option>
    <option value="theme-solarized">Solarized Theme</option>
  </select>
</div>

Adding JavaScript for Dynamic Theme Switching

Here’s the JavaScript to handle theme changes dynamically:

const themeSelect = document.getElementById("theme-select");
const rootElement = document.documentElement;

// Listen for dropdown changes
themeSelect.addEventListener("change", (event) => {
  const selectedTheme = event.target.value;

  // Remove all theme classes
  rootElement.classList.remove("theme-light", "theme-dark", "theme-solarized");

  // Add the selected theme class
  rootElement.classList.add(selectedTheme);
});

// Set default theme on load
window.addEventListener("DOMContentLoaded", () => {
  rootElement.classList.add("theme-light");
});

Real-Time Theme Switching in Action

When users pick a theme from the dropdown, the background and text colors change instantly. This dynamic update makes the experience seamless and interactive.

Why This Approach is Awesome

• Scalability: Add new themes by defining additional CSS variables.
• Clean Separation: CSS handles theming; JavaScript manages logic.
• Performance: CSS variables make updates smooth and efficient.

Save Theme Preferences with LocalStorage

Take it up a notch by saving the selected theme so it persists across sessions.

// Save the theme
themeSelect.addEventListener("change", (event) => {
  const selectedTheme = event.target.value;
  rootElement.classList.remove("theme-light", "theme-dark", "theme-solarized");
  rootElement.classList.add(selectedTheme);
  localStorage.setItem("theme", selectedTheme);
});

// Load the saved theme
window.addEventListener("DOMContentLoaded", () => {
  const savedTheme = localStorage.getItem("theme") || "theme-light";
  rootElement.classList.add(savedTheme);
});

Extra Tips for Dark Mode and Night Mode

• More Themes: Add high-contrast or custom user-defined themes.
• Transitions: Use CSS transitions for smooth background and text color changes.
• Accessibility: Make sure your theme switcher works well with keyboards and screen readers.

With Tailwind CSS and CSS variables, creating a dynamic dark mode or night mode is straightforward and efficient. Try it out and see how it transforms your website’s user experience!