Belajar Tailwind CSS - Dark Mode, Theming & CSS Variables
Episode ini membahas strategi dark mode Tailwind: media versus class beserta kelebihan dan kekurangannya. Kalian juga belajar menyusun tema dengan theme.extend, memakai CSS custom properties untuk dynamic theme switching, serta integrasi dengan prefers-color-scheme dan pertimbangan aksesibilitas.
#Pendahuluan
Dark mode sudah menjadi fitur yang diharapkan pengguna. Tailwind mendukungnya lewat variant dark: dengan dua strategi: mengikuti preferensi sistem via media, atau dikontrol manual lewat kelas class. Episode 6 membahas keduanya, cara menyusun tema dengan theme.extend, dan pendekatan modern memakai CSS variables untuk dynamic theming.
Pilihan strategi sangat memengaruhi arsitektur. media paling sederhana dan murni mengikuti sistem; class memberi kontrol penuh termasuk toggle manual dan persistensi pilihan pengguna. Sebagian besar aplikasi modern memilih class karena fleksibilitasnya.
#Dark Mode: media vs class
#Strategi media
Ini default Tailwind. Variant dark: aktif otomatis saat sistem pengguna dalam dark mode:
<div class="bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100">
Konten menyesuaikan preferensi sistem.
</div>Keuntungannya nol konfigurasi. Kekurangannya: kalian tidak bisa menawarkan toggle manual, karena keputusan sepenuhnya di tangan sistem operasi.
#Strategi class
Aktifkan dengan darkMode: "class" di config:
module.exports = {
darkMode: "class",
content: ["./src/**/*.{html,js,ts,jsx}"],
theme: { extend: {} },
plugins: [],
};Lalu tambahkan kelas dark pada elemen akar:
<html class="dark">
<body class="bg-white dark:bg-gray-900">...</body>
</html>darkMode: "class" membuat dark: hanya aktif jika ada elemen dengan kelas dark di atasnya — biasanya html. Toggle manual kini dimungkinkan dengan menambah atau menghapus kelas itu lewat JavaScript.
#Membuat Tema dengan theme.extend
Untuk project besar, hindari menyebar nilai warna langsung di markup. Definisikan token di theme.extend:
theme: {
extend: {
colors: {
brand: {
50: "#eff6ff",
500: "#3b82f6",
600: "#2563eb",
900: "#1e3a8a",
},
},
},
},Setelah itu bg-brand-500 dan text-brand-600 tersedia sebagai utility. Token inilah yang menjadi sumber kebenaran desain — mengubah satu nilai di sini mengubah seluruh aplikasi.
#CSS Custom Properties dan Dynamic Theme Switching
Pendekatan yang lebih modern: definisikan token sebagai CSS variables di :root, lalu referensikan dari config. Ini memungkinkan tema diganti saat runtime tanpa rebuild:
:root {
--color-bg: #ffffff;
--color-text: #111827;
}
html.dark {
--color-bg: #111827;
--color-text: #f9fafb;
}theme: {
extend: {
colors: {
bg: "var(--color-bg)",
text: "var(--color-text)",
},
},
},Sekarang bg-bg dan text-text otomatis mengikuti nilai variable, sehingga mengganti tema cukup dengan menukar nilai di CSS — Tailwind tidak perlu di-build ulang. Pola colors: { bg: "var(--color-bg)" } ini sangat berguna untuk white-label atau multi-tenant.
Untuk persistensi pilihan pengguna, simpan preferensi dan terapkan sebelum render:
const isDark = localStorage.getItem("theme") === "dark";
document.documentElement.classList.toggle("dark", isDark);Pindahkan script ini ke head agar tidak terjadi flash of wrong theme saat halaman dimuat.
#prefers-color-scheme dan Aksesibilitas
Jika tetap ingin menghormati preferensi sistem saat memakai strategi class, kombinasikan keduanya:
<script>
if (localStorage.theme === "dark" ||
(!("theme" in localStorage) &&
window.matchMedia("(prefers-color-scheme: dark)").matches)) {
document.documentElement.classList.add("dark");
}
</script>Pertimbangan aksesibilitas: pastikan kontras teks terhadap latar tetap memenuhi rasio minimum di kedua mode, dan jangan mengandalkan warna sebagai satu-satunya penanda status — tambahkan ikon atau label teks.
Warning
Rasio kontras yang cukup di light mode belum tentu cukup di dark mode. Token seperti gray-700 di atas white bisa jatuh di bawah rasio 4.5:1 setelah dibalik. Selalu audit kontras di kedua tema sebelum rilis.
#Penutup
Episode 6 membekali kalian dengan theming: strategi media dan class, penyusunan token lewat theme.extend, dynamic theme switching dengan CSS variables, serta integrasi prefers-color-scheme yang menghormati preferensi sistem sekaligus memberi kontrol manual.
Inti yang harus dibawa pulang:
- Strategi
mediamengikuti sistem; strategiclassmemberi kontrol penuh. - Aktifkan
classlewatdarkMode: "class"lalu tambahkan kelasdarkdihtml. - Token warna disimpan di
theme.extend.colorssebagai sumber kebenaran. - CSS variables memungkinkan ganti tema saat runtime tanpa rebuild.
- Simpan preferensi pengguna dan terapkan di
headuntuk mencegah flash. - Audit kontras dan penanda status di kedua mode.
Di episode 7 selanjutnya kita akan membahas composing utilities — kapan memakai @apply versus utility inline, membuat component classes di dalam components layer, serta komposisi lanjutan dengan variants dan plugin untuk pattern yang bisa dipakai ulang.