Dark Mode

10 min Last updated 23 Mar 2026

Dark Mode dengan Tailwind

Tailwind menyediakan variant dark: yang memungkinkan kita mendefinisikan style untuk mode gelap secara langsung di HTML.

Konfigurasi Dark Mode

Ada dua strategi — media (mengikuti preferensi OS) dan class (dikontrol manual):

// tailwind.config.js
export default {
  darkMode: "class", // atau "media"
  // ...
}

Cara Kerja

<!-- Tambahkan class "dark" ke elemen <html> untuk mengaktifkan dark mode -->
<html class="dark">

<!-- Styling dark mode dengan prefix dark: -->
<div class="bg-white dark:bg-gray-900 text-gray-800 dark:text-gray-100">
  <h1 class="text-gray-900 dark:text-white">Judul</h1>
  <p class="text-gray-600 dark:text-gray-400">Paragraf</p>
</div>

Toggle Dark Mode dengan JavaScript

const toggleBtn = document.getElementById("toggle-dark");

toggleBtn.addEventListener("click", () => {
  document.documentElement.classList.toggle("dark");

  // Simpan preferensi
  const isDark = document.documentElement.classList.contains("dark");
  localStorage.setItem("theme", isDark ? "dark" : "light");
});

// Restore saat load
if (localStorage.theme === "dark") {
  document.documentElement.classList.add("dark");
}