Dark mode (mode gelap) sudah menjadi fitur standar yang diharapkan pengguna di website modern. Selain terlihat elegan, dark mode juga mengurangi kelelahan mata saat browsing di malam hari. Artikel ini membahas dua pendekatan membuat dark mode: otomatis mengikuti preferensi sistem operasi, dan manual dengan tombol toggle yang bisa diklik pengguna.
Konsep Dasar: CSS Variable untuk Theming
Kunci implementasi dark mode yang bersih adalah menggunakan CSS Variable. Definisikan semua warna sebagai variabel, lalu ubah nilainya untuk tema gelap:
/* Tema terang (default) */
:root {
--warna-bg: #ffffff;
--warna-bg-sekunder: #f8fafc;
--warna-teks: #1e293b;
--warna-teks-muted: #64748b;
--warna-border: #e2e8f0;
--warna-kartu: #ffffff;
--warna-shadow: rgba(0, 0, 0, 0.08);
--warna-utama: #3b82f6;
--warna-utama-hover: #2563eb;
}
/* Tema gelap */
[data-tema="gelap"] {
--warna-bg: #0f172a;
--warna-bg-sekunder: #1e293b;
--warna-teks: #f1f5f9;
--warna-teks-muted: #94a3b8;
--warna-border: #334155;
--warna-kartu: #1e293b;
--warna-shadow: rgba(0, 0, 0, 0.3);
--warna-utama: #60a5fa;
--warna-utama-hover: #93c5fd;
}Menerapkan Variabel ke Elemen
body {
background-color: var(--warna-bg);
color: var(--warna-teks);
transition: background-color 0.3s ease, color 0.3s ease;
font-family: system-ui, sans-serif;
}
.kartu {
background: var(--warna-kartu);
border: 1px solid var(--warna-border);
box-shadow: 0 2px 8px var(--warna-shadow);
border-radius: 12px;
padding: 24px;
}
.teks-muted {
color: var(--warna-teks-muted);
}
.tombol {
background: var(--warna-utama);
color: white;
border: none;
padding: 10px 20px;
border-radius: 8px;
cursor: pointer;
transition: background 0.2s;
}
.tombol:hover {
background: var(--warna-utama-hover);
}
input, textarea {
background: var(--warna-bg-sekunder);
color: var(--warna-teks);
border: 1px solid var(--warna-border);
padding: 10px 14px;
border-radius: 8px;
width: 100%;
}Cara 1: Otomatis via prefers-color-scheme
Browser dan CSS mendukung media query prefers-color-scheme yang mendeteksi preferensi tema sistem operasi pengguna secara otomatis:
/* Tema terang (default) */
:root {
--warna-bg: #ffffff;
--warna-teks: #1e293b;
--warna-kartu: #f8fafc;
--warna-border: #e2e8f0;
}
/* Otomatis beralih ke gelap jika OS menggunakan dark mode */
@media (prefers-color-scheme: dark) {
:root {
--warna-bg: #0f172a;
--warna-teks: #f1f5f9;
--warna-kartu: #1e293b;
--warna-border: #334155;
}
}Dengan pendekatan ini, tidak perlu JavaScript sama sekali. Website otomatis menyesuaikan tema dengan pengaturan sistem pengguna.
Cara 2: Toggle Manual dengan JavaScript
Buat tombol toggle yang mengubah atribut data-tema di elemen <html>:
<!-- HTML: Tombol Toggle -->
<button class="btn-toggle-tema" id="toggleTema" aria-label="Toggle dark mode">
<span id="ikonTema">☾</span> Mode Gelap
</button><!-- CSS Tombol Toggle -->
<style>
.btn-toggle-tema {
background: var(--warna-bg-sekunder);
color: var(--warna-teks);
border: 1px solid var(--warna-border);
padding: 8px 16px;
border-radius: 20px;
cursor: pointer;
font-size: 0.9rem;
transition: all 0.2s;
}
.btn-toggle-tema:hover {
border-color: var(--warna-utama);
color: var(--warna-utama);
}
</style><!-- JavaScript -->
<script>
const toggleBtn = document.getElementById('toggleTema');
const ikonTema = document.getElementById('ikonTema');
const html = document.documentElement;
// Cek preferensi tersimpan di localStorage
const temaDisimpan = localStorage.getItem('tema');
if (temaDisimpan === 'gelap') {
html.setAttribute('data-tema', 'gelap');
ikonTema.textContent = '☀'; // ikon matahari
toggleBtn.lastChild.textContent = ' Mode Terang';
}
toggleBtn.addEventListener('click', function () {
const temaSekarang = html.getAttribute('data-tema');
if (temaSekarang === 'gelap') {
html.removeAttribute('data-tema');
localStorage.setItem('tema', 'terang');
ikonTema.textContent = '☽'; // ikon bulan
toggleBtn.lastChild.textContent = ' Mode Gelap';
} else {
html.setAttribute('data-tema', 'gelap');
localStorage.setItem('tema', 'gelap');
ikonTema.textContent = '☀'; // ikon matahari
toggleBtn.lastChild.textContent = ' Mode Terang';
}
});
</script>Menggabungkan Kedua Pendekatan
Pendekatan terbaik adalah kombinasi keduanya: default mengikuti preferensi sistem, tapi pengguna tetap bisa mengubah secara manual:
/* Deteksi preferensi sistem secara default */
@media (prefers-color-scheme: dark) {
:root:not([data-tema="terang"]) {
--warna-bg: #0f172a;
--warna-teks: #f1f5f9;
--warna-kartu: #1e293b;
--warna-border: #334155;
}
}
/* Mode gelap manual */
[data-tema="gelap"] {
--warna-bg: #0f172a;
--warna-teks: #f1f5f9;
--warna-kartu: #1e293b;
--warna-border: #334155;
}Transisi yang Halus
Tambahkan transisi agar perpindahan tema terasa halus dan tidak tiba-tiba:
body,
.kartu,
input,
textarea,
button {
transition:
background-color 0.3s ease,
color 0.3s ease,
border-color 0.3s ease;
}Tips Dark Mode yang Baik
- Hindari warna hitam murni (
#000000) untuk background — gunakan warna gelap seperti#0f172aatau#111827yang lebih nyaman di mata. - Pastikan kontras teks dan background memenuhi standar aksesibilitas WCAG (minimal 4.5:1 untuk teks normal).
- Simpan preferensi pengguna di
localStorageagar pilihan tetap tersimpan saat halaman di-refresh. - Jangan lupa sesuaikan juga gambar dan ikon — pertimbangkan menggunakan filter CSS untuk gambar yang terlalu terang di dark mode.
/* Optimalkan gambar di dark mode */
[data-tema="gelap"] img:not([class*="logo"]) {
filter: brightness(0.85) contrast(1.05);
}Kesimpulan
Membuat dark mode dengan CSS tidaklah rumit jika kamu menggunakan CSS Variable sebagai fondasi. Pendekatan dengan prefers-color-scheme membuat website otomatis menyesuaikan tema sistem pengguna, sementara tombol toggle JavaScript memberikan kontrol penuh kepada pengguna. Simpan preferensi di localStorage agar pengalaman lebih konsisten. Dengan dark mode yang diimplementasikan dengan baik, website kamu akan terasa lebih modern, nyaman, dan profesional.
