Dark mode adalah tampilan gelap: latar gelap, teks terang, enak dibaca malam-malam. Di Tailwind, kamu cukup menempelkan awalan dark: di depan class. dark:bg-gray-800 artinya "pakai latar gray-800, tapi cuma waktu mode gelap aktif". Bayangin lampu teras yang pakai sensor cahaya. Siang hari lampunya mati, begitu langit gelap dia nyala sendiri, tanpa ada yang menekan saklar. dark: bekerja seperti itu: class di belakangnya cuma dipakai waktu "gelap", dan yang menentukan gelap atau gak, awalnya, adalah setelan tema di HP atau laptop pengguna.
🧪 Tebakan cepat: kartu
bg-white dark:bg-gray-800dibuka di HP yang temanya gelap. Kamu belum menulis satu baris JavaScript pun. Kartunya putih atau gelap? Tebak dulu, jawabannya ada di bagian "Siapa yang menentukan gelap?".
Satu class untuk terang, satu untuk gelap
Kamu sudah kenal awalan dari pelajaran responsive: md:flex artinya "flex mulai layar md". dark: sama cara kerjanya, cuma syaratnya beda: bukan lebar layar, tapi mode gelap. Ini kartu yang sama dengan yang ada di Lab:
<body class="bg-gray-100 dark:bg-gray-900 p-6">
<div id="card" class="bg-white dark:bg-gray-800 text-gray-900 dark:text-white p-4 rounded-lg">
Kartu Adaptif
</div>
</body>
bg-whitegak punya awalan, jadi selalu berlaku. Ini warna mode terang.dark:bg-gray-800menimpa latar itu, tapi cuma waktu mode gelap aktif.text-gray-900dandark:text-whiteadalah pasangan yang sama untuk warna teks: teks gelap di kartu putih, teks putih di kartu gelap.bg-gray-100 dark:bg-gray-900di<body>melakukan hal yang sama untuk halamannya.p-4(padding 16px) danrounded-lg(sudut 8px) gak punya awalan, jadi sama di dua mode.
| Bagian | Mode terang | Mode gelap |
|---|---|---|
| Latar kartu | bg-white: putih |
dark:bg-gray-800: abu-abu tua |
| Teks kartu | text-gray-900: hampir hitam |
dark:text-white: putih |
| Latar halaman | bg-gray-100: abu-abu muda |
dark:bg-gray-900: hampir hitam |
Polanya selalu sama: tulis warna terang tanpa awalan, lalu timpa dengan dark: untuk mode gelap. Urutan class di dalam atribut class gak ngaruh.
Siapa yang menentukan "gelap"?
Di Tailwind v4, dark: bawaannya mengikuti setelan tema di sistem operasi. Browser memberi tahu setelan itu lewat media query prefers-color-scheme. Dari dark:bg-gray-800, Tailwind membuat CSS ini:
@media (prefers-color-scheme: dark) {
.dark\:bg-gray-800 {
background-color: var(--color-gray-800);
}
}
@media (prefers-color-scheme: dark)artinya: aturan di dalamnya cuma berlaku kalau pengguna memilih tema gelap di HP atau laptopnya..dark\:bg-gray-800adalah nama class-nya. Garis miring terbalik di depan titik dua cuma cara CSS menulis titik dua di dalam nama class.var(--color-gray-800)adalah warna gray-800 dari tema Tailwind.
Jadi kartu tadi gelap, tanpa JavaScript. Itu jawaban tebakannya. Begitu pengguna mengganti tema HP-nya ke terang, kartunya ikut putih lagi.
Tombol tema sendiri: strategi class
Banyak website punya tombol bulan dan matahari, dan pilihan pengguna harus menang walaupun HP-nya bilang lain. Untuk itu, sensornya diganti jadi saklar: dark: dibuat mengikuti class dark di <html>, bukan setelan sistem. Caranya satu baris di file CSS kamu, sesudah @import "tailwindcss";:
@import "tailwindcss";
@custom-variant dark (&:where(.dark, .dark *));
Lalu tombolnya tinggal memasang atau mencabut class itu:
<html class="dark">
<body>
<button onclick="document.documentElement.classList.toggle('dark')">Ganti tema</button>
</body>
</html>
@custom-variant dark (...)mendefinisikan ulang artidark:.&:where(.dark, .dark *)artinya: berlaku untuk elemen yang punya classdark, atau yang ada di dalam elemen ber-classdark. Karena class-nya ditaruh di<html>, seluruh halaman ikut.document.documentElementadalah elemen<html>.classList.toggle('dark')memasang classdarkkalau belum ada, dan mencabutnya kalau sudah ada.- Sekarang setelan tema di HP gak dibaca lagi. Biasanya pilihan pengguna disimpan di
localStorage, supaya tetap gelap waktu halamannya dibuka lagi.
Kalau Tailwind-nya dipasang lewat CDN (seperti di Playground), tulis baris @custom-variant itu di dalam <style type="text/tailwindcss">. Tutorial lama menulis darkMode: "class" di tailwind.config.js. Itu cara Tailwind v3; di v4 file config itu gak dibaca lagi kecuali kamu memintanya.
⚠️ Jebakan yang sering ketemu
- Cuma latarnya yang diberi
dark:.dark:bg-gray-800tanpadark:text-whitebikin teks gray-900 di atas latar gray-800: hampir gak kebaca. Tiap warna (latar, teks, border) butuh pasangandark:-nya. - Lupa warna mode terangnya.
dark:bg-gray-800saja gak bikin kartunya putih di mode terang. Tanpabg-white, latarnya transparan, dan warna halaman di belakangnya yang kelihatan. - Class
darksudah dipasang di<html>, tapi@custom-variant-nya belum ditulis.dark:masih mengikuti setelan sistem, jadi tombol temamu gak ngaruh apa-apa. - Lupa
p-4ataurounded-lgdi latihan. Pemeriksa mengecek padding16pxdan sudut8px.rounded(4px) ataurounded-xl(12px) gak lolos.
TL;DR: dark: di depan class artinya class itu cuma dipakai di mode gelap, misalnya bg-white dark:bg-gray-800. Tulis warna terang tanpa awalan, lalu timpa dengan dark:, dan beri pasangan untuk tiap warna: latar, teks, border. Di Tailwind v4, dark: bawaannya mengikuti tema sistem lewat prefers-color-scheme, tanpa JavaScript. Mau tombol tema sendiri? Tulis @custom-variant dark (&:where(.dark, .dark *)); di CSS, lalu pasang atau cabut class dark di <html>.
