Dalam era modern saat ini, dark mode CSS telah menjadi salah satu fitur wajib dalam desain website modern. Mode gelap bukan hanya sekadar tren, tetapi juga memberikan pengalaman visual yang lebih nyaman bagi pengguna, terutama ketika mengakses situs pada malam hari atau di lingkungan minim cahaya.
Artikel ini akan membahas cara membuat dark mode menggunakan CSS secara lengkap, mulai dari konsep dasar hingga penerapan theme switcher otomatis dan manual, lengkap dengan contoh kode yang bisa langsung Anda praktikkan.
Daftar isi
- Apa Itu Dark Mode CSS
- Mengapa Website Perlu Mode Gelap
- Dasar Penerapan Dark Mode di CSS
- Menggunakan CSS Variable untuk Dark Theme
- Menggunakan prefers-color-scheme CSS
- Menambahkan Tombol Toggle Dark Mode CSS
- Membuat Transisi Warna Halus antar Mode
- Dark Mode Otomatis Tanpa JavaScript
- Best Practice CSS Dark Theme
- Kesimpulan
Baca juga: Belajar CSS Responsive Design untuk Semua Ukuran Layar
Apa Itu Dark Mode CSS
Dark mode CSS adalah gaya tampilan dengan dominasi warna gelap — biasanya menggunakan warna hitam, abu tua, atau biru keabu-abuan sebagai latar belakang, dan teks berwarna terang seperti putih atau abu muda agar tetap terbaca jelas.
Dalam konteks responsive web design, fitur dark theme CSS tidak hanya mempercantik tampilan, tetapi juga membantu menghemat baterai perangkat OLED, serta mengurangi ketegangan mata pengguna.
Mode ini dapat dibuat dengan CSS murni, tanpa bantuan JavaScript, dengan memanfaatkan fitur seperti:
- CSS variable
- prefers-color-scheme
- transition color
- dan sistem custom property theme.
Mengapa Website Perlu Mode Gelap
Penerapan mode gelap CSS memiliki berbagai manfaat, baik untuk pengguna maupun pemilik situs web:
- Kenyamanan Mata: Warna gelap membantu mengurangi pancaran cahaya terang yang berlebihan.
- Efisiensi Energi: Layar OLED dan AMOLED lebih hemat daya ketika menampilkan warna hitam.
- Konsistensi Desain Modern: Banyak platform besar seperti YouTube, Twitter, dan GitHub telah mengadopsi dark theme.
- Aksesibilitas Visual: Memberi opsi bagi pengguna dengan sensitivitas terhadap cahaya.
- User Retention: Pengguna cenderung bertahan lebih lama di situs yang menawarkan personalisasi tampilan.
Dasar Penerapan Dark Mode di CSS
Untuk memahami bagaimana cara membuat dark mode, mari mulai dengan contoh paling sederhana.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dark Mode Sederhana</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Selamat Datang di Website Mode Gelap</h1>
<p>Ini adalah contoh dasar dark mode CSS.</p>
</body>
</html>Code language: HTML, XML (xml)Dan berikut CSS-nya:
body {
background-color: #ffffff;
color: #000000;
}
body.dark {
background-color: #121212;
color: #ffffff;
}Code language: CSS (css)Dengan menambahkan class dark ke elemen body, kita bisa mengganti tema secara instan. Namun, ini masih manual — kita perlu tombol untuk menggantinya.
Menggunakan CSS Variable untuk Dark Theme
Pendekatan modern dalam tutorial dark mode CSS adalah dengan CSS Custom Property (variable). Teknik ini membuat kita bisa mengubah tema secara dinamis hanya dengan mengganti nilai variabel.
:root {
--bg-color: #ffffff;
--text-color: #000000;
}
body {
background-color: var(--bg-color);
color: var(--text-color);
}
body.dark {
--bg-color: #121212;
--text-color: #ffffff;
}Code language: CSS (css)Keunggulan:
- Mudah dikontrol dari satu tempat.
- Cocok untuk mode gelap dan terang.
- Dapat dikombinasikan dengan
prefers-color-scheme.
Menggunakan prefers-color-scheme CSS
Fitur prefers-color-scheme CSS memungkinkan browser mendeteksi preferensi tema pengguna secara otomatis (dark/light mode).
@media (prefers-color-scheme: dark) {
body {
background-color: #121212;
color: #f0f0f0;
}
}
@media (prefers-color-scheme: light) {
body {
background-color: #ffffff;
color: #000000;
}
}Code language: CSS (css)Penjelasan:
prefers-color-scheme: dark→ aktif jika perangkat dalam mode gelap.prefers-color-scheme: light→ aktif jika perangkat menggunakan mode terang.
Teknik ini membantu menciptakan dark mode otomatis tanpa JavaScript dan menjadi best practice dark theme CSS yang banyak direkomendasikan oleh pengembang modern.
Menambahkan Tombol Toggle Dark Mode CSS
Agar pengguna bisa mengganti mode secara manual, tambahkan tombol toggle.
<button id="toggle-theme">Ganti Mode</button>Code language: HTML, XML (xml)Tambahkan JavaScript ringan untuk menambahkan class .dark pada body:
const btn = document.getElementById('toggle-theme');
btn.addEventListener('click', () => {
document.body.classList.toggle('dark');
});Code language: JavaScript (javascript)Dengan cara ini, pengguna dapat berganti dari light mode vs dark mode CSS dengan mudah.
Namun, jika Anda ingin membuat dark mode tanpa JavaScript, Anda bisa menggunakan checkbox trick CSS yang akan dijelaskan di bagian selanjutnya.
Membuat Transisi Warna Halus antar Mode
Agar perubahan tema terasa lebih elegan, tambahkan efek transisi.
body {
transition: background-color 0.3s ease, color 0.3s ease;
}Code language: CSS (css)Dengan css transition color mode, perubahan antara terang dan gelap terasa lembut dan tidak “menyilaukan”.
Dark Mode Otomatis Tanpa JavaScript
Salah satu tantangan menarik adalah membuat dark mode tanpa satu baris pun JavaScript.
Gunakan elemen checkbox dan CSS selector untuk mengatur tema.
<input type="checkbox" id="dark-toggle">
<label for="dark-toggle">🌙 Mode Gelap</label>
<main>
<h1>Contoh Implementasi Dark Mode CSS</h1>
</main>Code language: HTML, XML (xml)body {
background: #fff;
color: #000;
transition: background 0.3s, color 0.3s;
}
#dark-toggle:checked ~ main {
background: #121212;
color: #fff;
}Code language: CSS (css)Best Practice CSS Dark Theme
Berikut beberapa praktik terbaik dalam menerapkan dark mode CSS modern:
- Gunakan kontras warna tinggi agar teks tetap terbaca.
- Hindari warna hitam pekat (pure black), gunakan #121212 atau #1a1a1a agar nyaman di mata.
- Gunakan CSS variable dark mode untuk kemudahan pemeliharaan.
- Gunakan prefers-color-scheme untuk otomatisasi tema.
- Tambahkan transisi halus antar tema.
- Gunakan CSS accessibility theme untuk mempertahankan keterbacaan.
- Pastikan ikon, gambar, dan tombol juga menyesuaikan warna tema.
Kesimpulan
Membuat dark mode CSS kini menjadi bagian penting dari desain website modern. Dengan memahami cara membuat dark mode menggunakan CSS, baik secara manual, otomatis, atau kombinasi keduanya, Anda dapat meningkatkan pengalaman pengguna (UX) dan daya tarik visual situs Anda.
Melalui tutorial dark mode CSS ini, Anda telah mempelajari:
- penggunaan CSS variable dan
prefers-color-scheme - pembuatan toggle dark mode
- serta penerapan responsive layout adaptif yang mendukung berbagai perangkat.
Mulailah menerapkan mode gelap CSS hari ini, dan jadikan situs Anda tampil modern, nyaman, serta profesional di mata pengunjung!
