Dark mode sekarang sudah jadi fitur yang cukup banyak diminta. Banyak orang lebih nyaman baca di layar gelap, terutama malam hari atau di lingkungan pencahayaan rendah. Dan kalau blog-nya bisa otomatis mengikuti preferensi sistem pengguna — semakin bagus.

Saya implementasi dark mode di kawunganten.com tanpa Vue, tanpa React, tanpa library JavaScript apapun. Murni CSS dan sedikit vanilla JavaScript. Di artikel ini saya ceritakan pendekatannya.

CSS Custom Properties: Fondasi Dark Mode yang Elegan

Kunci dari implementasi dark mode yang bersih adalah CSS custom properties (atau CSS variables). Ideanya sederhana: daripada hardcode warna di setiap elemen, kita definisikan warna sebagai variabel di level root, lalu referensikan variabel itu di mana-mana. Ketika dark mode aktif, kita tinggal ubah nilai variabelnya — semua elemen yang menggunakan variabel itu otomatis ikut berubah.

:root {
--bg-primary: #ffffff;

--text-primary: #1a1a1a;

--border-color: #e5e5e5;

--card-bg: #f8f8f8;

}


[data-theme="dark"] {

--bg-primary: #1a1a1a;

--text-primary: #e5e5e5;

--border-color: #333333;

--card-bg: #252525;

}

Lalu di CSS elemen-elemen lain, saya gunakan variabel ini:

body {
background-color: var(--bg-primary);

color: var(--text-primary);

}


.card {

background: var(--card-bg);

border: 1px solid var(--border-color);

}

Deteksi Preferensi Sistem dengan CSS Media Query

Browser modern bisa mendeteksi apakah sistem operasi pengguna sedang dalam mode gelap lewat media query prefers-color-scheme:

@media (prefers-color-scheme: dark) {
:root {

--bg-primary: #1a1a1a;

--text-primary: #e5e5e5;

/* ... */

}

}

Dengan ini, kalau pengguna sistem operasinya sudah dark mode, blog otomatis tampil dengan warna gelap tanpa perlu klik apapun. Pengalaman yang seamless.

Toggle Manual — Karena Tidak Semua Orang Ikut Preferensi Sistem

Tapi ada juga pengguna yang sistemnya terang tapi ingin baca di blog dalam mode gelap — atau sebaliknya. Untuk itu saya tambahkan tombol toggle manual.

JavaScript-nya sederhana: ketika tombol diklik, tambahkan atau hapus atribut data-theme="dark" di elemen html atau body. Preferensinya disimpan di localStorage supaya tetap ingat pilihan pengguna meski halaman di-refresh.

const toggle = document.getElementById('theme-toggle');
const saved = localStorage.getItem('theme');


if (saved) {

document.documentElement.setAttribute('data-theme', saved);

}


toggle.addEventListener('click', () => {

const current = document.documentElement.getAttribute('data-theme');

const next = current === 'dark' ? 'light' : 'dark';

document.documentElement.setAttribute('data-theme', next);

localStorage.setItem('theme', next);

});

Transisi yang Halus

Tanpa transisi, pergantian tema itu kasar — tiba-tiba berubah dari putih ke hitam. Untuk membuatnya lebih halus, cukup tambahkan transition di elemen yang warnanya berubah:

body, .card, header, footer {
transition: background-color 0.3s ease, color 0.3s ease;

}

Durasi 0.3 detik itu sweet spot menurut saya — cukup smooth untuk dirasakan tapi tidak terlalu lambat sampai terasa lag.

Yang Perlu Diperhatikan: Gambar

Satu hal yang sering terlupakan waktu implementasi dark mode: gambar. Foto atau ilustrasi yang tampak bagus di background putih bisa terasa terlalu terang atau kontrasnya aneh di background gelap.

Untuk gambar konten artikel saya tidak ubah apa-apa — mengubah warna foto asli tidak masuk akal. Tapi untuk elemen UI seperti logo atau ikon SVG, saya pastikan ada versi yang cocok untuk kedua tema, atau menggunakan variabel warna dalam SVG supaya ikut berubah.

Hasilnya

Dark mode di blog ini sekarang berjalan dengan cukup baik. Otomatis mengikuti preferensi sistem, bisa di-override secara manual, dan preferensi tersimpan antar sesi. Tanpa framework, tanpa dependency eksternal — murni CSS dan kurang dari 20 baris JavaScript.

Tidak semua fitur butuh library berat untuk diimplementasikan. Kadang solusi paling sederhana yang paling elegan.

Blog kamu sudah ada dark mode-nya? Atau kamu lebih suka baca di mode terang? Apapun preferensinya, cerita di komentar — saya penasaran ternyata banyak tidak pengunjung kawunganten.com yang pakai dark mode.