Saat ini, hampir semua perangkat pintar modern—mulai dari smartphone layar Super AMOLED hingga laptop flagship—sudah dilengkapi dengan layar berteknologi tinggi yang mendukung tampilan serba gelap. Fitur mode gelap bukan lagi sekadar tren visual, melainkan kebutuhan mendasar untuk kenyamanan mata dan efisiensi daya baterai. Jika kamu seorang pemilik blog yang ingin memberikan pengalaman membaca terbaik bagi pengunjung, menerapkan dark mode vanilla js blogger adalah langkah tepat yang sangat direkomendasikan.
Mengapa harus menggunakan Vanilla JavaScript tanpa *library* tambahan seperti jQuery? Jawabannya sederhana: kecepatan dan efisiensi. Dalam dunia *web development* modern, setiap milidetik waktu muat (*loading time*) sangat berharga untuk skor Google Core Web Vitals. Dengan kode JavaScript murni (Vanilla JS), blog kamu tidak perlu memuat berkas eksternal yang berat, sehingga performa penelusuran tetap secepat kilat baik di desktop maupun perangkat seluler.
Mengapa Dark Mode Penting untuk Pengguna Gadget Modern?
Layar gadget masa kini, terutama panel OLED dan AMOLED pada smartphone pertengahan hingga kelas atas, bekerja dengan cara mematikan piksel secara individual saat menampilkan warna hitam sempurna (#000000). Hal ini secara signifikan mengurangi konsumsi daya baterai. Bagi kamu yang sering bekerja atau menulis konten menggunakan 5 Laptop Ringan di Bawah 1 Kg Terbaik untuk Mobilitas, menggunakan mode gelap pada aplikasi dan situs web terbukti dapat memperpanjang daya tahan baterai laptop hingga 15–30% lebih lama.
Selain faktor hemat energi, mode gelap juga mengurangi emisi *blue light* yang dapat menyebabkan kelelahan mata (*eye strain*), terutama saat pengunjung membaca artikel blog kamu di ruang redup atau malam hari. Kombinasi antara estetika modern, penghematan baterai, dan kesehatan mata membuat fitur ini wajib ada di template Blogger kamu.
Langkah-Langkah Memasang Dark Mode Vanilla JS di Blogger
Berikut adalah tutorial bertahap cara mengintegrasikan fitur dark mode vanilla js blogger yang sangat ringan, responsif, dan langsung menyimpan preferensi pengunjung menggunakan fitur localStorage web browser.
1. Menambahkan CSS Variable pada Template
Langkah pertama adalah mendefinisikan warna tema terang dan gelap menggunakan CSS Variables. Buka dashboard Blogger kamu > pilih menu Tema > klik Edit HTML. Cari kode <style> atau <b:skin>, lalu tambahkan kode CSS berikut di dalamnya:
:root {
--bg-color: #ffffff;
--text-color: #1a1a1a;
--card-bg: #f5f5f5;
}
[data-theme="dark"] {
--bg-color: #121212;
--text-color: #e0e0e0;
--card-bg: #1e1e1e;
}
body {
background-color: var(--bg-color);
color: var(--text-color);
transition: background-color 0.3s ease, color 0.3s ease;
}2. Membuat Tombol Toggle Switch HTML
Selanjutnya, letakkan tombol pengubah mode di lokasi yang mudah diakses pembaca, misalnya di bagian navigasi header atau floating button di sudut layar. Masukkan kode HTML ini di dalam struktur header template kamu:
<button id="dark-mode-toggle" aria-label="Toggle Dark Mode" class="theme-btn">
<span id="theme-icon">🌙</span>
</button>
3. Menyisipkan Script Vanilla JS dan LocalStorage
Script ini bertugas membaca preferensi pengguna dari browser dan mengganti atribut warna secara instan tanpa perlu memuat ulang (*reload*) halaman. Letakkan kode berikut tepat sebelum tag penutup </body>:
<script>
const toggleBtn = document.getElementById('dark-mode-toggle');
const themeIcon = document.getElementById('theme-icon');
const currentTheme = localStorage.getItem('theme');
if (currentTheme) {
document.documentElement.setAttribute('data-theme', currentTheme);
if (currentTheme === 'dark') {
themeIcon.textContent = '☀️';
}
}
toggleBtn.addEventListener('click', () => {
let theme = document.documentElement.getAttribute('data-theme');
if (theme === 'dark') {
document.documentElement.setAttribute('data-theme', 'light');
localStorage.setItem('theme', 'light');
themeIcon.textContent = '🌙';
} else {
document.documentElement.setAttribute('data-theme', 'dark');
localStorage.setItem('theme', 'dark');
themeIcon.textContent = '☀️';
}
});
</script>Penggunaan fitur localStorage API pada JavaScript MDN memastikan bahwa begitu pengunjung memilih mode gelap, preferensi tersebut akan terus tersimpan saat mereka membuka halaman lain di blog kamu.
Uji Coba Performa dan Pengaruhnya Terhadap Baterai
Setelah selesai memasang script, selalu lakukan pengujian melalui fitur Inspect Element di browser Chrome atau Edge pada laptop kamu. Saat mengembangkan blog dan melakukan coding, memantau daya tahan baterai laptop juga tak kalah penting. Kamu bisa membaca panduan Cara Cek Battery Health Windows 11 Sendiri Tanpa Aplikasi untuk memastikan baterai laptop kamu tetap sehat selama beraktivitas marathon membuat konten.
Selain itu, karena skrip Vanilla JS ini berukuran sangat kecil (kurang dari 1 KB), proses eksekusinya tidak akan membebani jaringan internet kamu sama sekali. Namun jika koneksi internet rumah kamu terasa lambat saat melakukan pengujian halaman, pastikan untuk menerapkan 7 Cara Mempercepat WiFi Rumah yang Lemot, 100% Ampuh! agar proses *debugging* berjalan lancar.
Tabel Perbandingan: Vanilla JS vs jQuery Dark Mode
| Parameter | Vanilla JS (Tanpa Framework) | jQuery Script |
|---|---|---|
| Ukuran File | < 1 KB (Sangat Ringan) | ~85 KB (Memperberat Loading) |
| Kecepatan Eksekusi | Instan (Native Browser) | Bergantung pada pemuatan library |
| Kompatibilitas Blogger | 100% Cocok untuk semua template | Sering bentrok dengan script lain |
| Dampak Baterai Gadget | Sangat Efisien | Memakan resource CPU lebih besar |
Kesimpulan
Penerapan fitur dark mode vanilla js blogger merupakan solusi paling modern, efisien, dan ramah pengguna untuk meningkatkan kualitas tampilan blog kamu. Tanpa ketergantungan pada *library* pihak ketiga yang berat, blog kamu tidak hanya terlihat makin elegan di layar smartphone OLED maupun laptop modern, tetapi juga tetap mempertahankan kecepatan akses yang maksimal. Selamat mencoba tutorial ini dan rasakan bedanya di blog kamu!