Dark mode bukan lagi sekadar tren visual. Dalam beberapa tahun terakhir, fitur ini berubah menjadi standar desain modern yang hampir selalu tersedia di aplikasi dan website populer. Mulai dari media sosial, platform coding, hingga dashboard profesional, semuanya menyediakan opsi tampilan gelap karena alasan kenyamanan mata, efisiensi energi pada layar tertentu, dan preferensi estetika pengguna.
Menariknya, membuat dark mode saat ini tidak lagi membutuhkan JavaScript yang kompleks. Dengan perkembangan fitur CSS modern seperti "prefers-color-scheme", "color-scheme", dan CSS variables, kita bisa membangun sistem dark mode yang ringan, otomatis, dan tetap responsif. Artikel ini akan membahasnya secara lengkap dan terstruktur.
Dark mode bukan hanya soal mengganti warna putih menjadi hitam. Ada beberapa alasan kuat mengapa fitur ini penting dalam pengembangan website :
Pertama, dari sisi pengalaman pengguna. Banyak pengguna lebih nyaman membaca teks dalam kondisi cahaya redup menggunakan tampilan gelap. Kedua, dark mode membantu mengurangi silau layar terutama pada malam hari. Ketiga, pada perangkat dengan layar OLED atau AMOLED, warna gelap dapat membantu efisiensi daya.
Selain itu, menyediakan dark mode menunjukkan bahwa website kamu mengikuti standar UI modern. Hal ini meningkatkan kredibilitas dan profesionalitas tampilan web yang kamu bangun. Namun, dark mode yang baik tidak sekadar membalik warna. Ia membutuhkan perencanaan sistem warna, kontras yang tepat, dan struktur styling yang fleksibel.
Memahami prefers color scheme
Salah satu fitur CSS modern yang membuat dark mode menjadi sederhana adalah media query "prefers-color-scheme". Fitur ini memungkinkan website mendeteksi preferensi tampilan sistem pengguna secara otomatis.
Ketika pengguna mengaktifkan dark mode di sistem operasi atau browser mereka, website dapat langsung menyesuaikan tampilannya tanpa interaksi tambahan.
Contoh penggunaannya sederhana :
[@media (prefers-color-scheme: dark) { body { background-color: #121212; color: #ffffff; } }]
Dengan pendekatan ini, website akan otomatis berubah menjadi mode gelap jika sistem pengguna berada dalam dark mode. Jika tidak, maka tampilan default tetap digunakan. Pendekatan ini sangat direkomendasikan karena :
- Tidak membutuhkan JavaScript
- Ringan dan cepat
- Didukung oleh mayoritas browser modern
- Mengikuti preferensi pengguna secara otomatis
Sistem Warna yang Fleksibel
Agar dark mode lebih terstruktur dan mudah dikembangkan, sebaiknya gunakan CSS variables atau custom properties. Teknik ini memungkinkan kamu mendefinisikan warna utama di satu tempat, lalu menggantinya sesuai kebutuhan.
Contoh implementasi :
[:root { --bg-color: #ffffff; --text-color: #000000; } @media (prefers-color-scheme: dark) { :root { --bg-color: #121212; --text-color: #ffffff; } } body { background-color: var(--bg-color); color: var(--text-color); }]
Dengan metode ini :
- Struktur kode lebih rapi
- Mudah menambahkan tema tambahan di masa depan
- Memudahkan pengelolaan design system
- Lebih scalable untuk proyek besar
Pendekatan ini juga sangat cocok jika website kamu memiliki banyak komponen seperti card, navbar, button, dan form.
Properti color scheme
Selain media query, CSS modern juga menyediakan properti "color-scheme". Properti ini memberi tahu browser bahwa halaman mendukung dark mode sehingga elemen default seperti scrollbar, form input, dan UI bawaan browser ikut menyesuaikan.
[:root { color-scheme: light dark; }]
Dengan satu baris ini, browser akan membantu menyesuaikan komponen internalnya agar selaras dengan mode terang maupun gelap. Ini adalah detail kecil yang sering dilewatkan, tetapi sangat penting untuk menciptakan pengalaman yang konsisten.
Membuat Dark Mode dengan Transisi
Perubahan warna yang mendadak terkadang terasa kasar. Untuk meningkatkan pengalaman pengguna, kamu bisa menambahkan efek transisi.
[body { transition: background-color 0.3s ease, color 0.3s ease; }]
Dengan transisi ini, perpindahan antara mode terang dan gelap akan terasa lebih lembut dan profesional. Namun perlu diingat, jangan berlebihan dalam menambahkan animasi karena bisa mengganggu kenyamanan visual.
Secara default, CSS hanya bisa mengikuti preferensi sistem. Untuk membuat toggle manual murni tanpa JavaScript memang lebih terbatas. Biasanya diperlukan bantuan input checkbox dan selector CSS tertentu untuk mengubah tema secara lokal.
Namun untuk implementasi yang lebih fleksibel seperti menyimpan preferensi pengguna, JavaScript tetap menjadi solusi yang lebih praktis. Dalam konteks artikel ini, kita fokus pada dark mode otomatis berbasis CSS agar tetap ringan dan efisien.
Best Practice dalam Mendesain Dark Mode
Pertama, hindari menggunakan hitam pekat murni seperti #000000. Warna abu gelap seperti #121212 atau #1e1e1e lebih nyaman di mata.
Kedua, perhatikan kontras teks. Gunakan rasio kontras yang cukup agar tetap terbaca dengan jelas.
Ketiga, jangan hanya membalik warna. Pastikan elemen seperti border, shadow, dan icon tetap terlihat jelas.
Keempat, uji di berbagai perangkat dan browser untuk memastikan kompatibilitas.
Saat ini, "prefers-color-scheme" sudah didukung oleh Chrome, Edge, Firefox, Safari, dan sebagian besar browser mobile modern. Artinya, implementasi dark mode berbasis CSS sudah cukup aman digunakan di proyek produksi.
Namun, untuk browser lama, sebaiknya tetap sediakan tampilan default yang nyaman meskipun tanpa fitur dark mode otomatis.
Membuat dark mode website dengan CSS tanpa JavaScript kini jauh lebih mudah berkat fitur modern seperti "prefers-color-scheme," CSS variables, dan "properti color-scheme". Dengan pendekatan yang tepat, kamu bisa membangun sistem tema yang ringan, responsif, dan tetap profesional tanpa menambah kompleksitas kode.
Bagi pemula, ini adalah langkah awal yang sangat baik untuk memahami bagaimana CSS berkembang dan menjadi semakin powerful. Bagi developer yang lebih berpengalaman, pendekatan ini bisa menjadi fondasi untuk membangun design system yang scalable.
Dark mode bukan sekadar tren visual, tetapi bagian dari standar pengembangan web modern. Dan kabar baiknya, kamu bisa mulai menerapkannya sekarang hanya dengan CSS.
COMMENTS