Halo teman-teman semuanya, setelah kita mempelajari Typography Plugin, sekarang kita akan membahas salah satu fitur penting dalam desain modern: Dark Mode. Tailwind CSS v4 memungkinkan kita membuat tema terang dan gelap dengan mudah menggunakan utility variant dark:.
1. Mode Gelap Standar (Berdasarkan Media Query)
Secara default, Tailwind menerapkan mode gelap berdasarkan preferensi sistem pengguna menggunakan prefers-color-scheme:
| Class Default |
Class Dark |
Fungsi |
bg-white |
dark:bg-slate-800 |
Ubah latar dari putih ke abu gelap saat mode gelap |
text-gray-900 |
dark:text-white |
Ubah teks menjadi putih saat mode gelap |
text-gray-500 |
dark:text-gray-400 |
Ubah teks abu ke abu muda saat mode gelap |
Contoh:
<div class="bg-white dark:bg-slate-800 p-6 rounded">
<h3 class="text-gray-900 dark:text-white">Contoh Dark Mode</h3>
<p class="text-gray-500 dark:text-gray-400">Teks akan berubah sesuai tema.</p>
</div>
Ini sudah langsung berfungsi tanpa konfigurasi tambahan.
2. Mode Gelap Berdasarkan Kelas (Class-based)
Jika kita ingin memberikan kontrol manual terhadap mode gelap, kita dapat mengubah strategy melalui konfigurasi CLI (bukan CDN) di dalam file css:
@import 'tailwindcss';
@custom-variant dark (&:where(.dark, .dark *));
Kemudian tambahkan class dark ke elemen <html> atau gunakan atribut lain:
<html class="dark">
<!-- ... -->
</html>
3. Tips Penggunaan Dark Mode
- Gunakan kombinasi
dark:bg-..., dark:text-..., dan dark:border-... untuk memberikan konsistensi tema gelap.
- Tambahkan
transition-colors untuk efek perpindahan warna yang halus.
- Simpan preferensi pengguna di
localStorage agar tema tetap sama saat reload.
Kesimpulan
Dengan dark: variant, Tailwind v4 membuat pengaturan mode gelap menjadi mudah dan efisien. Kita bisa mengikuti mode sistem atau memberi kontrol manual melalui class.
Terima Kasih