Menerapkan Dark Mode Otomatis di Website dengan Tailwind & JavaScript

Dark mode telah menjadi fitur yang banyak digemari pengguna karena lebih nyaman di mata, menghemat baterai perangkat, dan tampil lebih modern. Dengan kombinasi Tailwind CSS dan JavaScript, kita bisa membuat fitur dark mode otomatis yang mendeteksi preferensi sistem pengguna. Artikel ini akan membahas cara lengkap menerapkan dark mode secara otomatis di website kamu.

Kenapa Harus Dark Mode?

Sebelum masuk ke teknis, berikut beberapa alasan kenapa dark mode penting:

Kenyamanan visual di malam hari.
Efisiensi baterai pada perangkat OLED.
Pengalaman pengguna yang lebih baik karena mengikuti preferensi sistem.
Tren desain modern yang semakin mengarah ke UI adaptif.

Prasyarat

Untuk mengikuti tutorial ini, kamu butuh:

Dasar penggunaan Tailwind CSS
Pengetahuan dasar tentang HTML dan JavaScript

1. Menyiapkan Tailwind CSS

Pastikan proyek kamu sudah menggunakan Tailwind CSS. Jika belum, kamu bisa instal melalui CDN untuk percobaan cepat:

htmlSalinEdit<script src="https://cdn.tailwindcss.com"></script>

Atau setup Tailwind di proyek kamu:

bashSalinEditnpm install -D tailwindcss
npx tailwindcss init

Lalu, di file tailwind.config.js, tambahkan konfigurasi dark mode:

jsSalinEditmodule.exports = {
  darkMode: 'class', // Gunakan mode class, bukan media
  content: ['./**/*.html'],
  theme: {
    extend: {},
  },
  plugins: [],
}

2. Struktur HTML Dasar

htmlSalinEdit<!DOCTYPE html>
<html lang="id" class="">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Dark Mode Tailwind</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-white text-gray-800 dark:bg-gray-900 dark:text-white transition-colors duration-300">
  <div class="min-h-screen flex items-center justify-center">
    <h1 class="text-3xl font-bold">Selamat Datang di Dark Mode Otomatis!</h1>
  </div>
  <script>
    // Deteksi preferensi sistem dan atur class dark
    if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
      document.documentElement.classList.add('dark');
    }

    // Update ketika sistem berubah
    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
      if (e.matches) {
        document.documentElement.classList.add('dark');
      } else {
        document.documentElement.classList.remove('dark');
      }
    });
  </script>
</body>
</html>

3. Penjelasan Kode

darkMode: 'class' di Tailwind memungkinkan kita mengontrol dark mode dengan menambahkan class dark pada <html> atau <body>.
JavaScript mendeteksi preferensi sistem dengan window.matchMedia('(prefers-color-scheme: dark)').
Class dark ditambahkan atau dihapus secara otomatis sesuai dengan preferensi pengguna.

4. Tips Tambahan

Kamu bisa menambahkan toggle manual (switch) agar pengguna bisa memilih secara manual.
Simpan preferensi pengguna ke localStorage jika ingin override dari sistem.
Gunakan transition-colors dari Tailwind untuk animasi halus saat berpindah tema.

Penutup

Menerapkan dark mode otomatis dengan Tailwind CSS dan JavaScript sangat mudah dan bermanfaat untuk meningkatkan pengalaman pengguna. Dengan hanya beberapa baris kode, website kamu akan terlihat lebih modern dan mengikuti standar UI masa kini.

Ingin website kamu tampil lebih interaktif dan responsif? Hubungi kami di Websweet Studio untuk jasa pembuatan website profesional.