- 1. Mode Gelap Standar (Berdasarkan Media Query)
- 2. Mode Gelap Berdasarkan Kelas (Class-based)
- 3. Tips Penggunaan Dark Mode
- Kesimpulan
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-..., dandark:border-...untuk memberikan konsistensi tema gelap. - Tambahkan
transition-colorsuntuk efek perpindahan warna yang halus. - Simpan preferensi pengguna di
localStorageagar 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
Artikel ini dibaca sebanyak 2.109 kali
SAWERIA
Memuat komentar...