Dark Mode dengan Tailwind

Dark Mode dengan Tailwind

Bikin websitemu nyaman di mata dengan tema gelap! Pelajari cara kerja dan implementasi dark mode di Tailwind CSS menggunakan varian `dark:` yang praktis.

Bikin Mata Adem: Gampang Banget Nerapin Dark Mode Pake Tailwind CSS!

Siapa sih yang gak suka dark mode (mode gelap)? Selain keliatan keren, dark mode juga bisa lebih nyaman buat mata, apalagi pas kita lagi ngoding atau browsing malem-malem. Kabar baiknya, Tailwind CSS nyediain cara yang super gampang buat nambahin dukungan dark mode ke website-mu!

Gak perlu lagi pusing nulis banyak media query CSS manual atau ngelola banyak variabel warna. Tailwind udah nyiapin "jurus"-nya sendiri.

Konsep Dasar Dark Mode di Tailwind: Varian dark:

Sama kayak state variants (hover:, focus:) atau responsive variants (md:, lg:), Tailwind punya varian khusus buat dark mode: yaitu prefix dark:.

  • Cara Kerja: Kamu tinggal tambahin dark: di depan utility class biasa. Utility class itu bakal otomatis diterapin kalau dark mode lagi aktif di sistem operasi pengguna atau kalau kamu "maksa" dark mode pake class di elemen <html>.

  • Contoh:

    htmlhtml
    <body class="bg-white text-gray-800 dark:bg-gray-900 dark:text-gray-100">
  <h1 class="text-2xl font-bold text-blue-600 dark:text-blue-400">
    Halo Dunia, Terang dan Gelap!
  </h1>
  <p class="mt-2 text-gray-600 dark:text-gray-300">
    Ini paragraf yang warnanya bisa ganti pas dark mode.
  </p>
  <button class="bg-indigo-500 hover:bg-indigo-600 text-white p-2 rounded
                 dark:bg-indigo-700 dark:hover:bg-indigo-800">
    Tombol Adaptif
  </button>
</body>

    Di contoh ini:

    • Secara default (light mode): <body> background-nya putih (bg-white), teksnya abu-abu tua (text-gray-800). Judulnya biru (text-blue-600).
    • Pas Dark Mode Aktif:
      • <body> background-nya jadi abu-abu sangat gelap (dark:bg-gray-900), teksnya jadi abu-abu terang (dark:text-gray-100).
      • Judul <h1> warnanya jadi biru lebih muda (dark:text-blue-400) biar kontrasnya pas di background gelap.
      • Tombol juga punya style dark: sendiri buat background-nya.

Gampang banget kan? Kamu cukup definisiin style default (light mode), terus tambahin versi dark:-nya buat properti yang mau kamu ubah.

Cara Mengaktifkan Dark Mode di Tailwind

Tailwind CSS ngedukung dua strategi utama buat ngaktifin dark mode:

  1. Berdasarkan Preferensi Sistem Operasi Pengguna (media strategy - Default di v3+, termasuk v4 via browser/JIT):

    • Ini cara yang paling umum dan otomatis. Tailwind bakal "ngedengerin" settingan dark mode di sistem operasi (Windows, macOS, Linux, Android, iOS) pengguna.
    • Kalau pengguna nyalain dark mode di OS-nya, varian dark: di Tailwind-mu bakal otomatis aktif. Kalau pengguna pake light mode, varian dark: gak aktif.
    • Cara Setup (Kalau pake @tailwindcss/browser via CDN di v4, biasanya udah otomatis aktif ngikutin preferensi OS!):
      • Kamu gak perlu ngelakuin apa-apa lagi di HTML atau CSS-mu selain nambahin class dark:...! Skrip CDN @tailwindcss/browser udah pinter nanganin prefers-color-scheme dari browser.
      • Kalau kamu pake setup Tailwind dengan build tool (misal, tailwind.config.js atau konfigurasi di file CSS utama di v4), pastikan opsi darkMode diset ke 'media' (ini biasanya default di versi baru) atau tidak diset sama sekali (karena akan default ke media).
        javascriptjavascript
        // Contoh di tailwind.config.js (v3 style, untuk ilustrasi konsep)
module.exports = {
  darkMode: 'media', // atau bisa juga true (sama dengan media di v3)
  // ...
}
        csscss
        /* Di file CSS utama (v4 style dengan @tailwindcss/browser atau build tool) */
/* Tidak perlu setting khusus untuk 'media' strategy, ini defaultnya */

  2. Berdasarkan Class di Elemen <html> (class strategy):

    • Di strategi ini, dark mode gak aktif otomatis ngikutin OS. Kamu yang secara manual nambahin class dark ke elemen <html> (biasanya pake JavaScript) buat ngaktifin dark mode.

    • Ini ngasih kamu kontrol penuh buat bikin tombol toggle dark/light mode di websitemu.

    • Cara Setup (Kalau pake @tailwindcss/browser via CDN di v4): Kamu perlu ngasih tau skrip browsernya buat pake strategi 'class'. Ini bisa dilakuin dengan nambahin atribut data-tailwindcss-darkMode ke tag <script> CDN-nya, atau lewat sedikit JavaScript sebelum skrip CDN.

      • Cara 1: Atribut di tag script (lebih simpel)
        htmlhtml
        <head>
    <script 
        src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4" 
        data-tailwindcss-darkMode="class"> 
    </script>
    <!-- ... -->
</head>
      • Cara 2: JavaScript sebelum skrip CDN (jika perlu lebih banyak kontrol)
        htmlhtml
        <head>
    <script>
        // Pastikan ini ada SEBELUM skrip CDN Tailwind
        if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
            document.documentElement.classList.add('dark');
            window.tailwindMe = {darkMode: 'class'} // Ngasih tau skrip browser
        } else {
            document.documentElement.classList.remove('dark');
            window.tailwindMe = {darkMode: 'class'} // Ngasih tau skrip browser
        }
    </script>
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
    <!-- ... -->
</head>
      • Cara Setup (Kalau pake setup build tool): Di file konfigurasi Tailwind (tailwind.config.js untuk v3, atau di @theme atau file config CSS untuk v4):
        javascriptjavascript
        // Contoh di tailwind.config.js (v3 style)
module.exports = {
  darkMode: 'class', 
  // ...
}
        csscss
        /* Di file CSS utama (v4 style dengan build tool, di file config CSS-nya) */
/* @config "path/to/your/tailwind.config.js" jika masih pakai JS config */
/* atau cara lain untuk set darkMode ke 'class' jika ada di v4 CSS config */
/* Saat ini (awal v4), 'class' strategy lebih sering dikonfigurasi via file JS config */
/* atau dikontrol manual dengan JavaScript di client-side. */
        Penting untuk v4 dengan build tool: Jika menggunakan darkMode: 'class', pastikan file CSS utama Anda (yang mengimpor tailwindcss) benar-benar diproses oleh Tailwind CLI atau plugin PostCSS/Vite agar class dark bisa bekerja sesuai harapan.

    • Cara Ngaktifin/Nonaktifin Dark Mode (Pake JavaScript): Kamu perlu bikin tombol atau mekanisme lain yang pas diklik bakal nambahin atau ngapus class dark dari elemen <html>.

      htmlhtml
      <button id="tombolDarkMode">Toggle Dark Mode</button>
      javascriptjavascript
      const tombolDarkMode = document.getElementById('tombolDarkMode');
const htmlElement = document.documentElement; // Ini elemen <html>
 
// Cek preferensi tersimpan (opsional)
if (localStorage.getItem('theme') === 'dark') {
    htmlElement.classList.add('dark');
}
 
tombolDarkMode.addEventListener('click', function() {
    htmlElement.classList.toggle('dark');
 
    // Simpen preferensi (opsional)
    if (htmlElement.classList.contains('dark')) {
        localStorage.setItem('theme', 'dark');
    } else {
        localStorage.setItem('theme', 'light');
    }
});

      Ini contoh JavaScript yang sangat dasar. Implementasi yang lebih bagus biasanya juga ngecek preferensi OS awal.

Mana Strategi yang Dipilih?

  • media strategy: Lebih simpel, otomatis, gak perlu JavaScript. Cocok kalau kamu mau ngikutin settingan OS pengguna aja.
  • class strategy: Ngasih kontrol penuh ke pengguna buat milih tema terang/gelap di websitemu, gak peduli settingan OS-nya. Butuh sedikit JavaScript buat tombol toggle-nya. Ini yang paling sering dipake kalau mau ada tombol manual.

Tips Mendesain untuk Dark Mode

  • Kontras itu Kunci: Pastiin teks tetep gampang dibaca di background gelap. Jangan pake warna teks yang terlalu redup atau background yang gak cukup gelap.
  • Warna Aksen: Warna aksen (misal, buat link atau tombol) mungkin perlu sedikit disesuaiin biar tetep keliatan bagus dan punya kontras cukup di dark mode. Kadang warna yang cerah di light mode jadi terlalu "nonjok" di dark mode, jadi perlu sedikit diredam saturasinya.
  • Gambar & Ikon: Pikirin gimana gambar atau ikonmu tampil di background gelap. Gambar dengan background transparan mungkin lebih aman. Ikon SVG warnanya bisa diubah pake fill="currentColor" biar ngikutin warna teks.
  • Shadows: Efek box-shadow mungkin perlu disesuaiin. Bayangan item gelap di atas background item gelap mungkin gak terlalu keliatan. Kadang di dark mode, orang pake "glow" tipis warna terang sebagai pengganti shadow gelap.
  • Jangan Cuma Invert Warna: Dark mode yang bagus itu bukan cuma ngebalikin warna dari light mode. Perlu pertimbangan desain sendiri biar tetep estetik dan fungsional.
  • Tes, Tes, Tes!: Selalu tes tampilan dark mode-mu.

Kustomisasi Warna Dark Mode di Tema (via CDN)

Kalau kamu pake CDN dan strategi media, kamu bisa ngeset warna-warna spesifik buat dark mode langsung di blok <style type="text/tailwindcss"> pake @theme:

htmlhtml
<style type="text/tailwindcss">
  @theme {
    /* Warna default (light mode) */
    --color-background: oklch(0.98 0.01 240); /* Abu-abu sangat terang */
    --color-text-primary: oklch(0.2 0.02 240); /* Abu-abu sangat gelap */
    --color-accent: oklch(0.6 0.2 260); /* Ungu */
 
    /* Override untuk Dark Mode */
    @media (prefers-color-scheme: dark) {
      --color-background: oklch(0.2 0.02 240); /* Abu-abu sangat gelap */
      --color-text-primary: oklch(0.9 0.01 240); /* Abu-abu sangat terang */
      --color-accent: oklch(0.7 0.2 260); /* Ungu lebih terang */
    }
  }
</style>
 
<body class="bg-[--color-background] text-[--color-text-primary]">
  <a href="#" class="text-[--color-accent]">Link Keren</a>
</body>

Di sini kita mendefinisikan CSS Custom Properties di dalam @theme. Skrip @tailwindcss/browser akan membaca ini dan mengaplikasikannya. Kamu bisa menggunakan variabel ini di utility classmu (misal bg-[--color-background]).

(Catatan: Sintaks kustomisasi tema di v4, terutama dengan @tailwindcss/browser, mungkin masih berkembang. Selalu cek dokumentasi resmi Tailwind untuk cara paling update).

Dengan varian dark: dari Tailwind CSS, nambahin dukungan dark mode ke websitemu jadi jauh lebih gampang dan terintegrasi sama alur kerja utility-first-mu. Pengguna yang suka tema gelap pasti bakal berterima kasih!

Ingat, pilih strategi (media atau class) yang paling sesuai sama kebutuhanmu, dan selalu perhatiin kontras dan keterbacaan pas ngedesain buat dark mode.

Uji Pemahamanmu!

Memeriksa status login...

Sebelumnya

State Variants Tailwind

Selanjutnya

Kustomisasi Dasar Tailwind (CDN)

Cara Mudah Implementasi Dark Mode di Website Menggunakan Varian `dark:` Tailwind CSS - Dasar Tailwind CSS v4.0 - Dasar Tailwind CSS v4.0