Cara Mudah Memasang Fitur Dark Mode pada Template Viomagz

Updated: 13 Mei, 2025 • 0 • min read

Table of Contents

Berikut adalah cara mudah memasang fitur Dark Mode pada template Viomagz (Blogger) tanpa harus ganti template, cukup dengan menambahkan sedikit kode CSS dan JavaScript:

🔧 Langkah-langkah Pasang Dark Mode di Template Viomagz

✅ 1. Masuk ke Dashboard Blogger

Buka Blogger.com, login ke blog kamu.
Pilih blog dengan template Viomagz.
Masuk ke menu “Tema” → “Edit HTML”.

✅ 2. Tambahkan CSS Dark Mode

Cari tag <head> lalu di atas </head>, tambahkan kode berikut:

<style>
  body.dark-mode {
    background-color: #121212;
    color: #e0e0e0;
  }
  .dark-mode a {
    color: #bb86fc;
  }
  .dark-mode .post-body, .dark-mode .sidebar, .dark-mode .header, .dark-mode .footer {
    background-color: #1e1e1e !important;
    color: #e0e0e0 !important;
  }
</style>

✅ 3. Tambahkan Tombol Dark Mode

Cari tag <body> lalu tambahkan setelahnya:

<button onclick="toggleDarkMode()" style="position:fixed;bottom:20px;right:20px;z-index:9999;padding:10px 15px;background:#333;color:#fff;border:none;border-radius:5px;">
  🌙 Mode Gelap
</button>

✅ 4. Tambahkan JavaScript-nya

Cari bagian bawah sebelum </body>, lalu tambahkan:

<script>
  function toggleDarkMode() {
    document.body.classList.toggle("dark-mode");
    // Simpan preferensi ke localStorage
    if (document.body.classList.contains("dark-mode")) {
      localStorage.setItem("darkmode", "enabled");
    } else {
      localStorage.setItem("darkmode", "disabled");
    }
  }

  // Cek preferensi saat load halaman
  window.onload = function () {
    if (localStorage.getItem("darkmode") === "enabled") {
      document.body.classList.add("dark-mode");
    }
  }
</script>

📌 Hasil Akhir:

Tombol 🌙 akan muncul di kanan bawah halaman.
Saat diklik, halaman berubah ke mode gelap.
Pengaturan tersimpan bahkan setelah halaman ditutup (via localStorage).

Jika kamu ingin tampilan tombol lebih estetik atau memakai toggle switch modern, saya bisa bantu buatkan desain yang lebih keren juga. Mau dibuatkan versi tombol melayang yang modern?

AdinJava