Selain bikin mata pembaca gak cepat lelah, fitur ini juga memberikan kesan modern, estetis, dan profesional pada blog Anda.
Kabar baiknya, Anda gak perlu plugin berat yang bisa bikin loading blog jadi lemot. Di artikel ini, kita akan membahas Tutorial Membuat Dark Mode Toggle Keren di Blog Hanya dengan CSS & Vanilla JavaScript. Caranya sangat simpel, ringan, dan bisa dipraktikkan di Blogger (Blogspot) maupun WordPress. Yuk, langsung kita eksekusi!
Mengapa Harus Pakai Vanilla JavaScript dan CSS?
Sebelum masuk ke langkah teknis, mungkin Anda bertanya-tanya, "Kenapa harus pakai Vanilla JS dan CSS saja?" Jawabannya adalah kecepatan. Vanilla JavaScript adalah istilah untuk bahasa JavaScript murni tanpa bantuan library pihak ketiga seperti jQuery.
Sangat Ringan: Tidak membebani performa blog Anda (bagus untuk SEO).
Kompatibilitas Tinggi: Bisa berjalan lancar di hampir semua browser modern.
Mudah Dikustomisasi: Anda bebas mengubah warna mode gelap sesuai selera.
Langkah 1: Menyiapkan Struktur HTML untuk Tombol Toggle
Langkah pertama adalah membuat tombol (toggle) yang akan diklik oleh pengunjung untuk mengubah mode terang ke mode gelap, atau sebaliknya.
Silakan salin kode HTML sederhana di bawah ini dan letakkan di bagian yang Anda inginkan (misalnya di dalam header atau sidebar blog Anda):
<div class="dark-mode-container">
<button id="darkModeToggle" aria-label="Ubah Mode Warna">
<span class="icon-sun">☀️ Light</span>
<span class="icon-moon" style="display:none;">🌙 Dark</span>
</button>
</div>
Tips Pemula: Jika Anda menggunakan Blogger, Anda bisa memasukkan kode ini lewat tata letak (Widget HTML/JavaScript) atau langsung ke dalam edit HTML tema Anda.
Langkah 2: Mengatur Tampilan Warna dengan CSS (Variabel CSS)
Kunci utama dari tutorial membuat dark mode toggle keren di blog ini adalah penggunaan CSS Variables. Dengan variabel, kita bisa mengubah seluruh warna blog hanya dengan mengganti satu baris kode di bagian root.
Tambahkan kode CSS berikut ke dalam bagian gaya <style> blog Anda:
/* Warna Default (Light Mode) */
:root {
--bg-color: #ffffff;
--text-color: #222222;
--toggle-bg: #e0e0e0;
}
/* Warna Ketika Dark Mode Aktif */
[data-theme="dark"] {
--bg-color: #121212;
--text-color: #f5f5f5;
--toggle-bg: #333333;
}
/* Terapkan Variabel ke Elemen Blog */
body {
background-color: var(--bg-color);
color: var(--text-color);
transition: background-color 0.3s ease, color 0.3s ease;
font-family: sans-serif;
}
/* Gaya Tombol Toggle */
#darkModeToggle {
background-color: var(--toggle-bg);
color: var(--text-color);
border: none;
padding: 10px 15px;
border-radius: 20px;
cursor: pointer;
font-weight: bold;
transition: all 0.3s ease;
}
Penjelasan Singkat:
Efek transisi transition: background-color 0.3s ease sengaja ditambahkan agar perubahan dari mode terang ke mode gelap terasa halus dan tidak kaku saat tombol diklik.
Langkah 3: Menghidupkan Fitur dengan Vanilla JavaScript
Sekarang, mari kita buat tombol tersebut berfungsi menggunakan Vanilla JavaScript. Kode ini bertugas untuk mendeteksi klik pengguna dan menyimpan pilihan mereka ke dalam Local Storage browser. Jadi, saat pengunjung membuka halaman lain di blog Anda, modenya tidak akan reset kembali ke awal.
Letakkan kode JavaScript berikut tepat sebelum tag penutup </body>:
const toggleBtn = document.getElementById('darkModeToggle');
const sunIcon = toggleBtn.querySelector('.icon-sun');
const moonIcon = toggleBtn.querySelector('.icon-moon');
// 1. Cek pilihan mode pengguna di masa lalu (jika ada)
const currentTheme = localStorage.getItem('theme');
if (currentTheme) {
document.documentElement.setAttribute('data-theme', currentTheme);
if (currentTheme === 'dark') {
updateIcon(true);
}
}
// 2. Fungsi ketika tombol diklik
toggleBtn.addEventListener('click', () => {
let theme = document.documentElement.getAttribute('data-theme');
if (theme === 'dark') {
document.documentElement.removeAttribute('data-theme');
localStorage.setItem('theme', 'light');
updateIcon(false);
} else {
document.documentElement.setAttribute('data-theme', 'dark');
localStorage.setItem('theme', 'dark');
updateIcon(true);
}
});
// 3. Fungsi untuk mengubah ikon tombol
function updateIcon(isDark) {
if (isDark) {
sunIcon.style.display = 'none';
moonIcon.style.display = 'inline';
} else {
sunIcon.style.display = 'inline';
moonIcon.style.display = 'none';
}
}
Tips Tambahan untuk Optimasi Dark Mode
Agar fitur mode gelap di blog Anda makin sempurna dan ramah pengguna, coba terapkan beberapa tips berikut:
Sesuaikan Warna Gambar: Gambar yang terlalu terang kadang merusak estetika mode gelap. Anda bisa menambahkan CSS
img { filter: opacity(0.8); }khusus pada mode gelap agar gambar terlihat sedikit lebih redup dan nyaman di mata.Gunakan Kontras yang Pas: Jangan gunakan warna hitam pekat (
#000000) untuk background mode gelap. Gunakan warna abu-abu sangat tua seperti#121212atau#1a1a1aagar teks putih di atasnya tidak terlalu mencolok dan menusuk mata.Ganti Ikon dengan SVG: Jika ingin tampilan yang lebih modern, Anda bisa mengganti teks emoji (☀️ dan 🌙) dengan ikon SVG yang bisa berubah warna secara otomatis mengikuti teks.
Kesimpulan
Membuat fitur mode gelap ternyata tidak sesulit yang dibayangkan, bukan? Dengan mengikuti Tutorial Membuat Dark Mode Toggle Keren di Blog Hanya dengan CSS & Vanilla JavaScript di atas, blog Anda kini sudah selangkah lebih maju dalam hal kenyamanan pengguna (user experience).
Metode ini sangat ramah SEO karena kodenya yang bersih dan tidak menggunakan framework eksternal yang berat. Pengunjung pun dijamin bakal betah berlama-lama membaca artikel di blog Anda, bahkan di dalam ruangan yang minim cahaya sekalipun.
Selamat mencoba, dan semoga tampilan blog Anda makin keren maksimal! Jika ada langkah yang membingungkan, jangan ragu untuk bertanya di kolom komentar, ya. Tetap semangat ngeblog!
0 Response to "Tutorial Membuat Dark Mode Toggle Keren di Blog Hanya dengan CSS & Vanilla JavaScript"
Posting Komentar