Tutorial Simpel Membuat Dark Mode Toggle Menggunakan CSS Variables dan JavaScript

Pernahkah kalian mengunjungi sebuah situs di malam hari, lalu merasa mata seperti disengat tawon karena latar belakangnya yang putih benderang? Ya, itulah alasan mengapa Dark Mode bukan lagi sekadar tren estetik, melainkan fitur wajib demi kenyamanan pengguna (user experience).

Sebagai pengembang web, memberikan opsi mode gelap menunjukkan bahwa kita peduli pada audiens kita. Berita baiknya, kalian tidak perlu menulis ulang seluruh file CSS untuk mendukung fitur ini. Cukup dengan CSS Variables dan sedikit sentuhan JavaScript, kita bisa membuat toggle mode gelap yang seamless.

Di artikel ini, saya akan memandu kalian langkah demi langkah untuk membangun sistem Dark Mode dari nol yang ringan, efisien, dan tentunya mudah dipahami.

Mengapa Menggunakan CSS Variables?

Dulu, untuk membuat mode gelap, kita sering kali harus membuat class baru (seperti .dark-theme) dan mendefinisikan ulang setiap warna satu per satu. Cara ini sangat melelahkan dan sulit dikelola jika proyek kalian makin besar.

Dengan CSS Variables (atau CSS Custom Properties), kita hanya perlu:

Menentukan variabel warna di satu tempat.
Mengubah nilai variabel tersebut saat mode gelap aktif.
Menikmati perubahan warna otomatis di seluruh elemen situs.

Ini jauh lebih bersih dan mengikuti prinsip DRY (Don't Repeat Yourself).

Persiapan Struktur HTML

Mari kita mulai dengan fondasi yang sederhana. Kita butuh sebuah tombol untuk memicu perubahan mode.

HTML

<!DOCTYPE html>

<head>

<title>Tutorial Dark Mode Simpel</title>

</head>

<body>

<h1>Halo, Selamat Datang!</h1>

<p>Ini adalah demo cara membuat dark mode menggunakan CSS Variables dan JavaScript.</p>

</label>

<em>Aktifkan Mode Gelap</em>

</div>

</body>

</html>

CSS Variables Sebagai Kekuatan Pertama

Sekarang bagian paling seru. Kita akan mendefinisikan warna utama di dalam :root. Variabel ini akan menjadi "sumber kebenaran" untuk semua warna di situs kita.

CSS

/* Definisi Warna Default (Light Mode) */

:root {

--primary-color: #405cf5;

--bg-color: #ffffff;

--text-color: #333333;

--card-bg: #f4f4f4;

}

/* Definisi Warna untuk Dark Mode */

[data-theme="dark"] {

--primary-color: #1a73e8;

--bg-color: #121212;

--text-color: #f1f1f1;

--card-bg: #1e1e1e;

}

/* Penerapan pada Elemen */

body {

background-color: var(--bg-color);

color: var(--text-color);

transition: 0.3s; /* Agar transisi warna halus */

font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

margin: 0;

}

.container {

background-color: var(--card-bg);

padding: 2rem;

border-radius: 10px;

box-shadow: 0 4px 6px rgba(0,0,0,0.1);

text-align: center;

}

Penjelasan Singkat:

:root. Sebagai tempat menyimpan variabel global. Di sini kita mengatur skema Light Mode.
[data-theme="dark"]. Ini adalah atribut selektor. Saat JavaScript menambahkan atribut ini ke elemen <html>, CSS akan otomatis menimpa nilai variabel lama dengan nilai baru.
var(--nama-variabel). Cara kita memanggil warna tersebut.

Logika JavaScript Sebagai Otak di Balik Perubahan

Tanpa JavaScript, tombol kita hanya akan menjadi hiasan. Kita butuh script untuk mendengarkan klik pengguna, mengganti tema, dan yang paling penting: mengingat pilihan pengguna.

Bayangkan betapa menyebalkannya jika pengunjung mengaktifkan mode gelap, lalu saat mereka pindah halaman, situs kembali menjadi putih terang. Kita akan menggunakan localStorage untuk mencegah hal itu.

JavaScript

const toggleSwitch = document.querySelector('.theme-switch input[type="checkbox"]');

const currentTheme = localStorage.getItem('theme');

// Cek apakah ada tema yang tersimpan di localStorage sebelumnya

if (currentTheme) {

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

if (currentTheme === 'dark') {

toggleSwitch.checked = true;

}

// Fungsi untuk mengganti tema

function switchTheme(e) {

if (e.target.checked) {

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

localStorage.setItem('theme', 'dark');

} else {

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

localStorage.setItem('theme', 'light');

}

// Event listener untuk klik

toggleSwitch.addEventListener('change', switchTheme, false);

Mengapa document.documentElement?

Kita menargetkan elemen paling atas, yaitu <html>. Dengan menambahkan atribut data-theme di sana, semua variabel CSS yang ada di bawahnya (di dalam body dan elemen lainnya) akan terpengaruh secara instan.

Mendeteksi Preferensi Sistem Pengguna

Tahukah kalian bahwa Windows, macOS, Android, dan iOS memiliki pengaturan mode gelap sistem? Kita bisa membuat situs kita lebih pintar dengan mendeteksi pengaturan ini secara otomatis menggunakan media query prefers-color-scheme.

Kalian bisa menambahkan logika ini di JavaScript untuk pengalaman yang lebih "ajaib":

JavaScript

if (!currentTheme) {

const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;

if (prefersDark) {

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

toggleSwitch.checked = true;

}

Mengapa Strategi Ini Bagus untuk SEO?

Mungkin kalian bertanya-tanya, "Apa hubungannya Dark Mode dengan SEO?". Secara teknis, tidak ada hubungan langsung antara warna latar belakang dengan algoritma Google. Namun, secara tidak langsung, ini sangat berpengaruh:

Meningkatkan Time on Site

Pengguna yang merasa nyaman dengan tampilan mata mereka cenderung betah berlama-lama membaca artikel kalian.

Menurunkan Bounce Rate

Tampilan modern dan fitur yang intuitif membuat situs terlihat lebih profesional dan kredibel.

Aksesibilitas (Accessibility)

Dark mode membantu orang dengan sensitivitas cahaya tertentu untuk mengonsumsi konten kalian dengan lebih baik.

Google sangat mencintai situs yang memberikan pengalaman pengguna (UX) yang luar biasa. Jika metrik UX kalian bagus, posisi di hasil pencarian (SERP) pun akan ikut naik.

Kesimpulan

Membuat Dark Mode tidak harus rumit. Dengan kombinasi CSS Variables untuk manajemen warna yang rapi dan JavaScript untuk kontrol logika, kalian sudah bisa meningkatkan kualitas situs kalian secara signifikan.

Ingatlah tiga pilar utama yang kita pelajari:

Gunakan Variables agar kode CSS mudah dikelola.
Gunakan Data Attributes untuk memicu perubahan tema.
Gunakan LocalStorage agar pilihan pengguna tidak hilang saat halaman di-refresh.

Dunia web terus berkembang, dan hal-hal kecil seperti Dark Mode inilah yang membedakan situs amatir dengan situs profesional. Jadi, tunggu apa lagi? Cobalah terapkan kode di atas pada proyek kalian hari ini!