Implementasi Dark Mode: Panduan Lengkap Membuat Tema Gelap untuk Website Modern

Fitur dark mode kini bukan lagi sekadar pilihan estetika, melainkan kebutuhan fundamental bagi banyak pengguna website. Dari kenyamanan mata hingga efisiensi baterai perangkat, dark mode telah menjadi standar baru dalam pengembangan antarmuka pengguna modern. Jika Anda seorang developer yang ingin meningkatkan pengalaman pengguna di website Anda, memahami cara mengimplementasikan dark mode secara efektif adalah keterampilan yang wajib dikuasai.

Artikel ini akan memandu Anda melalui proses implementasi dark mode di website, mulai dari konsep dasar hingga teknik-teknik lanjutan menggunakan kombinasi HTML, CSS, dan JavaScript. Kita akan membahas cara mendeteksi preferensi sistem pengguna, menyediakan toggle manual, hingga menyimpan pilihan pengguna agar pengalaman mereka tetap konsisten.

Mengapa Dark Mode Penting untuk Website Anda?

Sebelum masuk ke teknis implementasi, penting untuk memahami alasan di balik popularitas dan urgensi dark mode. Bukan hanya tentang tampilan yang “keren”, ada beberapa manfaat nyata yang ditawarkannya:

Kenyamanan Mata

Paparan cahaya biru yang berlebihan dari layar terang, terutama di malam hari atau dalam kondisi cahaya redup, dapat menyebabkan kelelahan mata digital, sakit kepala, dan bahkan mengganggu pola tidur. Dark mode mengurangi intensitas cahaya ini, membuat pengalaman membaca dan berinteraksi menjadi lebih nyaman, terutama untuk sesi penggunaan yang panjang.

Hemat Energi Baterai

Untuk perangkat dengan layar OLED atau AMOLED (seperti kebanyakan smartphone dan beberapa laptop modern), piksel hitam adalah piksel yang mati, artinya tidak mengonsumsi daya. Menggunakan dark mode secara signifikan dapat mengurangi konsumsi daya baterai, memperpanjang masa pakai perangkat pengguna.

Estetika & Pengalaman Pengguna

Secara subjektif, banyak pengguna merasa dark mode lebih elegan dan modern. Ia menawarkan kontras yang berbeda, seringkali menonjolkan konten visual dan memberikan “depth” pada antarmuka. Pengguna yang memiliki preferensi ini akan merasa dihargai dan lebih nyaman menggunakan website Anda.

Accessibility

Dark mode juga dapat meningkatkan aksesibilitas bagi pengguna dengan kondisi mata tertentu, seperti fotofobia (sensitivitas terhadap cahaya terang) atau astigmatisme. Bagi mereka, latar belakang gelap dengan teks terang jauh lebih mudah untuk dibaca dan mengurangi ketidaknyamanan.

Pondasi Implementasi Dark Mode: CSS Variables dan Media Query

Dalam dunia pengembangan web modern, ada dua pilar utama yang sangat membantu dalam mengimplementasikan dark mode secara efisien: CSS Variables (Custom Properties) dan media query prefers-color-scheme.

Kekuatan CSS Variables

CSS Variables memungkinkan Anda untuk mendefinisikan nilai-nilai yang dapat digunakan kembali di seluruh stylesheet Anda. Ini sangat ideal untuk mengelola tema karena Anda bisa mendefinisikan variabel untuk warna teks, latar belakang, border, dan elemen lainnya. Ketika Anda ingin beralih ke dark mode, Anda hanya perlu memperbarui nilai-nilai variabel ini, bukan mengubah setiap properti warna secara individual. Ini membuat kode lebih bersih, mudah dikelola, dan mengurangi potensi error.

Mengenal prefers-color-scheme

Media query prefers-color-scheme adalah fitur CSS yang memungkinkan website Anda mendeteksi preferensi tema warna yang diatur pengguna di sistem operasi mereka (misalnya, Windows, macOS, Android, iOS). Jika pengguna memilih dark mode di pengaturan sistem mereka, Anda bisa secara otomatis menampilkan website dalam dark mode tanpa perlu interaksi tambahan dari pengguna. Ini adalah langkah penting untuk memberikan pengalaman yang mulus dan sesuai harapan pengguna.

Langkah-Langkah Membuat Dark Mode (Step-by-Step)

Mari kita mulai dengan implementasi praktis. Kita akan membangun dark mode yang responsif terhadap preferensi sistem dan juga menyediakan toggle manual.

Persiapan HTML dan CSS Dasar

Mulailah dengan struktur HTML sederhana dan CSS dasar. Anda akan mendefinisikan variabel-variabel warna di root dokumen CSS Anda untuk mode terang secara default.

Pada file HTML, Anda akan memiliki struktur dasar seperti:

• Tag <html> dengan atribut lang="id".
• Bagian <head> untuk metadata dan link ke stylesheet.
• Bagian <body> yang akan berisi konten website Anda, termasuk sebuah tombol untuk toggle dark mode.

Dalam file CSS Anda, tentukan variabel-variabel warna global. Misalnya:

• Variabel --bg-color untuk warna latar belakang utama (misalnya, putih terang).
• Variabel --text-color untuk warna teks utama (misalnya, hitam pekat).
• Variabel --accent-color untuk warna aksen.

Kemudian, terapkan variabel ini ke elemen-elemen dasar di website Anda seperti body, h1, p, dll.

Mendefinisikan Variabel untuk Dark Mode

Setelah itu, gunakan media query @media (prefers-color-scheme: dark) untuk mendefinisikan kembali nilai variabel-variabel yang sama khusus untuk dark mode. Ini akan berlaku otomatis jika sistem pengguna diatur ke dark mode.

Di dalam blok media query ini, Anda akan menimpa nilai variabel-variabel warna yang sudah Anda definisikan sebelumnya. Misalnya:

• --bg-color akan diubah menjadi warna gelap (misalnya, abu-abu gelap atau hitam).
• --text-color akan diubah menjadi warna terang (misalnya, putih atau abu-abu terang).
• --accent-color mungkin disesuaikan agar tetap terlihat baik di latar belakang gelap.

Dengan cara ini, browser akan secara otomatis menerapkan warna dark mode jika preferensi sistem pengguna cocok.

Menambahkan Toggle Pengguna (JavaScript)

Tidak semua pengguna ingin website mengikuti preferensi sistem mereka, atau mungkin mereka ingin beralih secara manual. Untuk ini, Anda perlu tombol toggle dan sedikit JavaScript.

Tambahkan sebuah elemen tombol di HTML Anda (misalnya, <button id="theme-toggle">). Dengan JavaScript, Anda akan mendengarkan event klik pada tombol ini. Ketika tombol diklik, JavaScript akan menambahkan atau menghapus sebuah class (misalnya, dark-theme) pada elemen <body> atau <html>.

Di CSS, Anda kemudian akan membuat blok aturan baru yang menargetkan class ini. Misalnya, body.dark-theme. Di dalam blok ini, Anda akan menimpa lagi variabel-variabel warna yang sama dengan nilai dark mode. Ini akan bekerja sebagai override manual terhadap preferensi sistem.

Menyimpan Preferensi Pengguna dengan LocalStorage

Agar pilihan dark mode pengguna tetap tersimpan saat mereka mengunjungi kembali website Anda, gunakan localStorage. Setiap kali pengguna mengklik tombol toggle, Anda akan menyimpan nilai (misalnya, 'dark' atau 'light') di localStorage.

Saat halaman dimuat, JavaScript Anda akan memeriksa localStorage. Jika ada preferensi yang tersimpan, Anda akan langsung menerapkan tema tersebut (misalnya, dengan menambahkan class dark-theme pada body) sebelum halaman dirender sepenuhnya. Ini mencegah “Flash of Unstyled Content” (FOUC) yang akan kita bahas nanti.

Workflow Optimal: Kombinasi prefers-color-scheme & User Toggle

Implementasi terbaik adalah kombinasi dari kedua pendekatan ini. Saat halaman dimuat:

1. Periksa localStorage untuk preferensi pengguna yang tersimpan. Jika ada, terapkan preferensi tersebut.
2. Jika tidak ada preferensi yang tersimpan di localStorage, baru kemudian gunakan prefers-color-scheme untuk menentukan tema awal.
3. Ketika pengguna mengklik toggle, simpan preferensi mereka di localStorage dan timpa preferensi sistem.

Pendekatan ini memberikan kontrol penuh kepada pengguna sambil tetap menghargai preferensi sistem mereka sebagai default.

Contoh Kode Lengkap (HTML, CSS, JavaScript)

Berikut adalah penjelasan struktur kode yang bisa Anda terapkan. Ingat, ini adalah konsep dan struktur, bukan kode yang langsung siap copy-paste tanpa adaptasi.

Struktur HTML

File index.html akan berisi struktur dasar. Di dalam <head>, Anda akan menyertakan stylesheet dan, yang penting, sebuah script kecil untuk menangani FOUC. Di dalam <body>, Anda akan memiliki konten dan tombol toggle.

Sebuah contoh struktur HTML sederhana:

• <!DOCTYPE html>
• <html lang="id">
• <head>
  • <meta charset="UTF-8">
  • <meta name="viewport" content="width=device-width, initial-scale=1.0">
  • <title>Website dengan Dark Mode</title>
  • <link rel="stylesheet" href="style.css">
  • Script JavaScript kecil untuk FOUC (akan dijelaskan di bawah).
• <body>
  • <header> dengan judul dan tombol toggle.
  • <main> dengan beberapa paragraf dan heading sebagai konten.
  • <script src="script.js"></script> di bagian akhir <body>.
• </html>

CSS Styling dengan Variabel

File style.css akan mendefinisikan variabel-variabel. Awalnya, tetapkan nilai untuk mode terang di :root. Kemudian, gunakan media query untuk mendefinisikan ulang variabel untuk preferensi sistem dark mode. Selanjutnya, tambahkan selektor body[data-theme='dark'] atau body.dark-theme untuk menimpa variabel saat pengguna mengaktifkan dark mode secara manual.

Contoh definisi variabel warna:

• :root { --bg-color: #f0f0f0; --text-color: #333; --link-color: #007bff; }
• @media (prefers-color-scheme: dark) { :root { --bg-color: #222; --text-color: #eee; --link-color: #8bbaff; } }
• body[data-theme='dark'] { --bg-color: #222; --text-color: #eee; --link-color: #8bbaff; }
• Pastikan elemen-elemen HTML Anda menggunakan variabel ini, misalnya background-color: var(--bg-color); color: var(--text-color);.

JavaScript Logic untuk Toggle dan Storage

File script.js akan berisi logika inti. Dapatkan elemen tombol toggle Anda. Buat fungsi untuk beralih tema: fungsi ini akan memanipulasi atribut data-theme pada elemen body atau menambahkan/menghapus class. Simpan status tema saat ini ke localStorage. Saat halaman dimuat, periksa localStorage. Jika ada tema tersimpan, terapkan. Jika tidak, periksa prefers-color-scheme.

Contoh alur logika JavaScript:

1. Dapatkan referensi ke tombol toggle dan elemen body.
2. Definisikan fungsi applyTheme(theme) yang akan mengatur atribut data-theme pada body dan menyimpan tema ke localStorage.
3. Definisikan fungsi getPreferredTheme() yang akan mengambil tema dari localStorage. Jika tidak ada, gunakan window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'.
4. Saat dokumen siap (DOMContentLoaded), panggil applyTheme(getPreferredTheme()) untuk menerapkan tema awal.
5. Tambahkan event listener ke tombol toggle. Saat diklik, periksa tema saat ini di body, lalu panggil applyTheme() dengan tema yang berlawanan.

Pengalaman dan Pertimbangan Praktis dalam Implementasi Dark Mode

Menerapkan dark mode lebih dari sekadar mengubah warna. Ada beberapa pertimbangan praktis yang seringkali muncul di proyek nyata:

Mengatasi “Flash of Unstyled Content” (FOUC)

Salah satu masalah yang sering dihadapi adalah FOUC, di mana halaman sebentar muncul dalam mode terang (default) sebelum beralih ke dark mode saat JavaScript dimuat. Ini terjadi karena JavaScript yang mengatur tema membutuhkan waktu untuk dieksekusi.

Solusi: Tambahkan script kecil untuk membaca preferensi tema dari localStorage dan menerapkannya langsung di <head> sebelum CSS atau JavaScript lainnya dimuat. Ini memastikan tema yang benar diterapkan sangat awal, bahkan sebelum sisa halaman dirender.

Konsistensi UI/UX dan Accessibility

Dalam praktiknya, pemilihan warna di dark mode tidak bisa sembarangan. Kontras harus tetap optimal untuk memastikan teks mudah dibaca. Hindari warna teks yang terlalu terang pada latar belakang gelap yang terlalu pekat, karena bisa menyebabkan “halasi” atau silau. Pastikan elemen interaktif seperti tombol dan link tetap menonjol.

Selain itu, perhatikan pengguna dengan disabilitas. Penggunaan warna saja tidak cukup untuk menyampaikan informasi penting. Misalnya, jika Anda menggunakan warna merah untuk pesan error, pastikan ada indikator visual lain seperti ikon atau teks tambahan.

Mengelola Ikon dan Gambar

Ikon dan gambar seringkali menjadi tantangan. Ikon yang dirancang untuk latar belakang terang mungkin tidak terlihat bagus atau bahkan hilang di latar belakang gelap. Solusinya:

• SVG: Ideal karena mudah diubah warnanya dengan CSS (fill atau stroke).
• Gambar PNG/JPG: Jika gambar memiliki latar belakang, pastikan gambar tersebut transparan atau siapkan versi dark mode untuk gambar tersebut.
• CSS Filter: Untuk gambar sederhana, Anda bisa menggunakan properti CSS filter: invert(1) hue-rotate(180deg); untuk “membalikkan” warna gambar, meskipun ini tidak selalu menghasilkan estetika yang sempurna.

Testing Across Devices dan Browser

Sama seperti fitur web lainnya, dark mode perlu diuji secara menyeluruh di berbagai browser (Chrome, Firefox, Safari, Edge) dan perangkat (desktop, tablet, mobile). Pastikan prefers-color-scheme berfungsi sebagaimana mestinya, toggle berfungsi, dan preferensi tersimpan dengan benar. Perhatikan juga perilaku di browser yang lebih lama yang mungkin tidak mendukung fitur-fitur ini.

Dampak pada Performa

Meskipun penggunaan CSS Variables dan JavaScript kecil umumnya tidak memberatkan, penting untuk memastikan bahwa logika tema Anda tidak menyebabkan perlambatan signifikan. Hindari operasi DOM yang berlebihan atau JavaScript yang tidak efisien yang dapat mempengaruhi First Contentful Paint (FCP) atau Largest Contentful Paint (LCP), terutama saat menangani FOUC.

Masalah yang Sering Terjadi dan Solusinya

Saat mengimplementasikan dark mode, ada beberapa masalah umum yang seringkali dihadapi developer. Berikut adalah beberapa di antaranya dan cara mengatasinya:

Toggle Tidak Berfungsi

• Gejala: Tombol toggle dark mode diklik, tetapi tema tidak berubah.
• Penyebab:
  • JavaScript tidak terhubung dengan benar (file script tidak di-load atau salah path).
  • ID atau class elemen tombol tidak cocok dengan yang ada di JavaScript.
  • Listener event tidak ditambahkan dengan benar.
  • Ada error JavaScript lain yang menghentikan eksekusi script toggle.
• Solusi: Periksa console browser untuk error JavaScript. Pastikan ID dan class di HTML dan JavaScript sama. Verifikasi bahwa file JavaScript Anda di-load dengan benar (periksa tab Network di DevTools). Tambahkan console.log() di berbagai titik di JavaScript untuk melihat alur eksekusi.

Warna Tidak Berubah Setelah Refresh

• Gejala: Pengguna memilih dark mode, tetapi saat halaman di-refresh, website kembali ke mode terang.
• Penyebab: Preferensi pengguna tidak disimpan di localStorage atau tidak dimuat kembali saat halaman di-load.
• Solusi: Pastikan fungsi yang menyimpan preferensi ke localStorage dipanggil setiap kali tema diubah. Juga, pastikan ada logika JavaScript yang memeriksa localStorage saat halaman dimuat (idealnya di DOMContentLoaded) dan menerapkan tema yang tersimpan.

Flash of Unstyled Content (FOUC)

• Gejala: Website sebentar muncul dalam mode terang (default) sebelum beralih ke dark mode, menciptakan efek “kedipan”.
• Penyebab: JavaScript yang mengatur tema membutuhkan waktu untuk dieksekusi, sementara browser sudah mulai merender HTML dan CSS default.
• Solusi: Tempatkan script JavaScript kecil yang membaca preferensi dari localStorage dan menerapkan tema (misalnya, menambahkan class dark-theme ke html atau body) langsung di <head> tag HTML, sebelum stylesheet utama. Ini memastikan tema diterapkan sangat awal, sebelum konten terlihat oleh pengguna.

Kontras Buruk di Dark Mode

• Gejala: Teks sulit dibaca, elemen tidak terlihat jelas, atau ada efek silau di dark mode.
• Penyebab: Pemilihan kombinasi warna untuk dark mode kurang optimal, atau kontras tidak memenuhi standar aksesibilitas.
• Solusi: Gunakan tool checker kontras online (misalnya, WebAIM Contrast Checker) untuk memastikan kombinasi warna teks dan latar belakang Anda memenuhi standar WCAG (Web Content Accessibility Guidelines). Hindari warna hitam pekat untuk latar belakang yang dikombinasikan dengan putih murni untuk teks; seringkali abu-abu gelap dan putih pucat lebih nyaman secara visual.

FAQ

Apakah dark mode benar-benar menghemat baterai?

Ya, untuk perangkat dengan layar OLED atau AMOLED, dark mode secara signifikan dapat menghemat baterai karena piksel hitam pada layar tersebut benar-benar mati dan tidak mengonsumsi daya. Untuk layar LCD, penghematan baterainya minimal karena piksel backlight selalu menyala.

Bisakah saya membuat dark mode tanpa JavaScript?

Anda bisa membuat dark mode yang responsif terhadap preferensi sistem menggunakan hanya CSS dan media query @media (prefers-color-scheme: dark). Namun, untuk menambahkan toggle manual atau menyimpan preferensi pengguna agar bertahan setelah refresh halaman, Anda akan memerlukan JavaScript.

Bagaimana cara mengimplementasikan dark mode untuk aplikasi mobile?

Prinsip dasarnya mirip dengan web: mendefinisikan set warna untuk mode terang dan gelap, lalu beralih di antara keduanya. Di Android, Anda akan menggunakan tema dan sumber daya yang berbeda (misalnya, colors.xml di folder values-night). Di iOS, Anda akan menggunakan Semantic Colors dan Asset Catalogs untuk mengatur warna yang beradaptasi secara otomatis dengan tema sistem.

Apa itu prefers-color-scheme?

prefers-color-scheme adalah sebuah media query di CSS yang memungkinkan developer untuk mendeteksi preferensi tema warna (terang atau gelap) yang diatur oleh pengguna pada sistem operasi perangkat mereka. Ini memungkinkan website untuk secara otomatis menyesuaikan tampilannya agar sesuai dengan preferensi pengguna tanpa interaksi manual.

Kesimpulan

Mengimplementasikan dark mode di website Anda adalah investasi yang berharga untuk meningkatkan pengalaman pengguna, memperkuat branding, dan mengikuti standar desain web modern. Dengan memanfaatkan kekuatan CSS Variables, media query prefers-color-scheme, dan sedikit sentuhan JavaScript untuk persistensi, Anda dapat menciptakan tema gelap yang mulus dan fungsional.

Ingatlah untuk selalu memprioritaskan aksesibilitas dan konsistensi UI/UX dalam setiap langkah implementasi. Dark mode bukan sekadar fitur, melainkan bagian penting dari desain inklusif yang menghargai kenyamanan dan pilihan setiap pengguna. Jadi, tunggu apa lagi? Mulailah mengimplementasikan dark mode di project Anda berikutnya dan rasakan perbedaannya!

TAGS: dark mode, web development, CSS, JavaScript, frontend, UI/UX, prefers-color-scheme, tutorial, programming

---

Baca Juga

• Panduan Lengkap Belajar Coding untuk Pemula hingga Profesional