Bikin websitemu nyaman di mata dengan tema gelap! Pelajari cara kerja dan implementasi dark mode di Tailwind CSS menggunakan varian `dark:` yang praktis.
16m bacaanKuis WajibMicro Badge Lesson
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:
html
<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:
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).
javascript
// Contoh di tailwind.config.js (v3 style, untuk ilustrasi konsep)module.exports = { darkMode: 'media', // atau bisa juga true (sama dengan media di v3) // ...}
V4
css
@import "tailwindcss"; @custom-variant dark (&:is(.dark *));
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.
: Jika menggunakan , pastikan file CSS utama Anda (yang mengimpor tailwindcss) benar-benar diproses oleh Tailwind CLI atau plugin PostCSS/Vite agar class 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>.
html
<button id="tombolDarkMode">Toggle Dark Mode</button>
javascript
const
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:
html
<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.
Checkpoint KuisTarget: 70%
Kuis Dark Mode dengan Tailwind CSS
Kuis ini wajib untuk sertifikat. Kamu tetap bisa lanjut ke pelajaran berikutnya dan mengerjakannya nanti.
