Cara Membuat Dark Mode di Blogger dengan JavaScript Tanpa Mengubah Struktur Template

Mode gelap atau dark mode Blogger semakin banyak digunakan pada berbagai website karena memberikan pilihan tampilan yang berbeda bagi pengunjung, terutama ketika membaca pada kondisi cahaya yang rendah. Pada Blogger, fitur ini dapat ditambahkan tanpa harus mengganti template atau membangun ulang struktur HTML secara keseluruhan.

Cara yang akan digunakan dalam tutorial ini cukup sederhana. CSS bertugas mengatur warna ketika mode gelap aktif, sedangkan JavaScript digunakan untuk mengaktifkan dan menonaktifkan mode tersebut melalui sebuah tombol toggle. Preferensi pengguna juga dapat disimpan di browser sehingga pilihan mode tidak langsung kembali ke tampilan terang ketika halaman dibuka kembali.

Pendekatan ini cocok untuk Blogger yang sudah memahami dasar HTML dan CSS. Anda tidak perlu mengganti layout utama, memindahkan widget, atau membuat template baru. Yang ditambahkan hanya beberapa aturan CSS, sebuah tombol, dan script JavaScript yang mengontrol keadaan tema.

Apa Itu Dark Mode Blogger?

Dark mode adalah tampilan antarmuka yang menggunakan warna latar lebih gelap dengan warna teks dan elemen pendukung yang disesuaikan agar tetap mudah dibaca. Pada blog, mode ini biasanya mengubah latar belakang halaman, warna teks, kartu artikel, sidebar, menu, border, serta elemen lain yang sebelumnya dirancang untuk mode terang.

Pada tutorial ini, istilah seperti dark theme Blogger, mode malam Blogger, dan dark mode Blogspot mengacu pada konsep yang sama, yaitu menyediakan alternatif tampilan gelap untuk blog.

Yang perlu diperhatikan adalah dark mode bukan hanya mengubah warna body. Jika template memiliki banyak bagian dengan warna yang ditentukan secara terpisah, setiap bagian tersebut mungkin membutuhkan aturan CSS tambahan agar tampilan gelap terlihat konsisten.

Bagaimana Dark Mode Bekerja di Blogger?

Konsep dasarnya adalah memberi tanda bahwa mode gelap sedang aktif, kemudian CSS membaca tanda tersebut dan mengganti warna berbagai elemen halaman.

Alurnya dapat digambarkan seperti ini:

Komponen	Fungsi
HTML	Menyediakan tombol untuk mengubah mode.
CSS	Menentukan tampilan terang dan gelap.
JavaScript	Mengubah status mode dan menyimpan pilihan pengguna.
localStorage	Menyimpan preferensi mode pada browser pengguna.

Kelebihan Membuat Dark Mode dengan CSS dan JavaScript

Membuat mode malam secara manual memberikan kontrol yang lebih besar terhadap tampilan. Anda dapat menentukan elemen mana yang ikut berubah dan mana yang tetap menggunakan warna tertentu.

• Tidak perlu mengganti template Blogger secara keseluruhan.
• Tidak membutuhkan library JavaScript tambahan.
• Warna dapat disesuaikan dengan desain template yang sudah digunakan.
• Status tema dapat disimpan agar preferensi pengguna tetap dipertahankan.
• Tombol toggle dapat ditempatkan di area template atau gadget yang sesuai.

Persiapan Sebelum Menambahkan Dark Mode

Sebelum melakukan perubahan pada tema, sebaiknya lakukan backup template terlebih dahulu. Meskipun kode yang ditambahkan relatif sederhana, kesalahan penempatan kode dapat menyebabkan tema tidak bekerja seperti sebelumnya.

Anda juga perlu mengetahui beberapa selector utama pada template, misalnya area artikel, header, navigasi, sidebar, footer, dan widget. Nama selector setiap template dapat berbeda sehingga CSS pada tutorial ini perlu disesuaikan jika struktur tema Anda tidak menggunakan selector yang sama.

Cara Membuat Dark Mode Blogger Tanpa Mengubah Struktur Template

Langkah 1: Buat CSS untuk Mode Gelap

Pertama, kita membuat aturan CSS yang aktif ketika atribut tema tertentu berada pada elemen html. Pendekatan ini tidak memerlukan perubahan struktur konten artikel.

Masukkan CSS berikut ke area CSS template Blogger, biasanya di dalam bagian <b:skin>:

html[data-theme="dark"] {
  background: #111827;
  color-scheme: dark;
}

html[data-theme="dark"] body {
  background: #111827;
  color: #e5e7eb;
}

html[data-theme="dark"] a {
  color: #60a5fa;
}

html[data-theme="dark"] .post,
html[data-theme="dark"] .post-body,
html[data-theme="dark"] .widget,
html[data-theme="dark"] .sidebar,
html[data-theme="dark"] .footer {
  background: #111827;
  color: #e5e7eb;
}

html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6 {
  color: #f9fafb;
}

html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
  background: #1f2937;
  color: #f9fafb;
  border-color: #374151;
}

html[data-theme="dark"] table {
  color: #e5e7eb;
}

html[data-theme="dark"] th,
html[data-theme="dark"] td {
  border-color: #374151 !important;
}

html[data-theme="dark"] img {
  opacity: .96;
}

.dark-mode-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
}

.dark-mode-toggle:hover {
  opacity: .85;
}

html[data-theme="dark"] .dark-mode-toggle {
  border-color: #4b5563;
}

CSS tersebut menggunakan atribut data-theme="dark" pada elemen html. Ketika atribut tersebut aktif, aturan CSS khusus mode gelap akan diterapkan.

Langkah 2: Buat Tombol Toggle

Selanjutnya buat sebuah tombol yang akan digunakan untuk mengubah tema. Anda dapat menempatkannya di area navbar, header, menu, atau gadget HTML/JavaScript sesuai desain template.

Contoh tombol sederhana:

<button
  class="dark-mode-toggle"
  id="dark-mode-toggle"
  type="button"
  aria-label="Aktifkan mode gelap">
  Dark
</button>

Anda bebas mengganti tulisan Dark sesuai kebutuhan, misalnya menjadi Mode Gelap, Dark Mode, atau label singkat lainnya.

Langkah 3: Tambahkan JavaScript untuk Toggle

Sekarang kita membutuhkan JavaScript untuk mengubah atribut data-theme pada elemen html.

Masukkan script berikut pada area JavaScript template, misalnya sebelum penutup </body>:

<script>
document.addEventListener("DOMContentLoaded", function () {
  var toggle = document.getElementById("dark-mode-toggle");
  var root = document.documentElement;
  var savedTheme = localStorage.getItem("blogger-theme");

  if (savedTheme === "dark") {
    root.setAttribute("data-theme", "dark");
  }

  function updateButton() {
    var isDark = root.getAttribute("data-theme") === "dark";

    if (isDark) {
      toggle.textContent = "Light";
      toggle.setAttribute("aria-label", "Aktifkan mode terang");
    } else {
      toggle.textContent = "Dark";
      toggle.setAttribute("aria-label", "Aktifkan mode gelap");
    }
  }

  if (!toggle) {
    return;
  }

  updateButton();

  toggle.addEventListener("click", function () {
    var isDark = root.getAttribute("data-theme") === "dark";

    if (isDark) {
      root.removeAttribute("data-theme");
      localStorage.setItem("blogger-theme", "light");
    } else {
      root.setAttribute("data-theme", "dark");
      localStorage.setItem("blogger-theme", "dark");
    }

    updateButton();
  });
});
</script>

Script tersebut melakukan tiga pekerjaan utama. Pertama, membaca preferensi yang tersimpan. Kedua, mengubah atribut tema ketika tombol diklik. Ketiga, menyimpan pilihan baru ke localStorage.

Cara Mencegah Dark Mode Kembali ke Light Mode Saat Halaman Dibuka

Tanpa penyimpanan preferensi, pengguna yang sudah mengaktifkan mode gelap bisa kembali mendapatkan tampilan terang ketika halaman berikutnya dimuat. Karena itu, kita menggunakan localStorage untuk menyimpan pilihan.

Agar tema dapat diterapkan sedini mungkin sebelum seluruh halaman selesai dirender, Anda dapat menggunakan script kecil yang membaca preferensi di bagian awal halaman.

Contohnya:

<script>
(function () {
  var theme = localStorage.getItem("blogger-theme");

  if (theme === "dark") {
    document.documentElement.setAttribute("data-theme", "dark");
  }
})();
</script>

Script tersebut dapat ditempatkan di bagian awal template. Script toggle utama tetap digunakan untuk menangani perubahan ketika tombol ditekan.

Pada beberapa kondisi, cara ini dapat membantu mengurangi perubahan tampilan dari terang ke gelap ketika halaman sedang dimuat. Namun, posisi script dan kondisi loading tetap bergantung pada struktur template dan browser pengguna.

Versi Dark Mode yang Lebih Rapi Menggunakan CSS Variables

Jika template Anda cukup besar, menuliskan warna gelap untuk setiap selector bisa menjadi sulit dirawat. Salah satu pendekatan yang lebih rapi adalah menggunakan CSS custom properties atau CSS variables.

Contohnya:

:root {
  --bg-color: #ffffff;
  --text-color: #222222;
  --card-color: #ffffff;
  --border-color: #dddddd;
  --link-color: #2563eb;
}

html[data-theme="dark"] {
  --bg-color: #111827;
  --text-color: #e5e7eb;
  --card-color: #1f2937;
  --border-color: #374151;
  --link-color: #60a5fa;
}

body {
  background: var(--bg-color);
  color: var(--text-color);
}

a {
  color: var(--link-color);
}

.post,
.widget {
  background: var(--card-color);
  border-color: var(--border-color);
}

Dengan metode ini, Anda hanya perlu mengganti nilai variabel ketika tema berubah. Pendekatan tersebut sangat berguna jika template memiliki banyak bagian yang menggunakan warna dasar yang sama.

Contoh Struktur CSS Variables untuk Blogger

Anda dapat memperluas variabel berdasarkan kebutuhan desain blog.

:root {
  --body-bg: #ffffff;
  --body-text: #222222;
  --header-bg: #ffffff;
  --header-text: #222222;
  --content-bg: #ffffff;
  --sidebar-bg: #ffffff;
  --footer-bg: #f5f5f5;
  --border: #dddddd;
  --accent: #2563eb;
}

html[data-theme="dark"] {
  --body-bg: #0f172a;
  --body-text: #e5e7eb;
  --header-bg: #111827;
  --header-text: #f9fafb;
  --content-bg: #111827;
  --sidebar-bg: #111827;
  --footer-bg: #0b1120;
  --border: #334155;
  --accent: #60a5fa;
}

body {
  background: var(--body-bg);
  color: var(--body-text);
}

header {
  background: var(--header-bg);
  color: var(--header-text);
}

.post,
.post-body {
  background: var(--content-bg);
}

.sidebar {
  background: var(--sidebar-bg);
}

footer {
  background: var(--footer-bg);
}

a {
  color: var(--accent);
}

hr {
  border-color: var(--border);
}

Perlu dicatat bahwa selector seperti header, footer, atau .sidebar tidak selalu sama pada setiap template Blogger. Anda perlu menyesuaikannya dengan struktur tema yang digunakan.

Cara Menyesuaikan Dark Mode dengan Warna Template

Jangan langsung menggunakan warna gelap yang terlalu kontras untuk semua elemen. Latar belakang hitam pekat dengan teks putih dapat menghasilkan tampilan yang terlalu keras jika seluruh halaman menggunakan kombinasi tersebut.

Untuk tampilan yang lebih seimbang, Anda dapat menggunakan beberapa tingkat warna gelap, misalnya:

• Latar halaman: warna gelap utama.
• Container artikel: warna sedikit lebih terang.
• Sidebar atau kartu: warna tingkat kedua.
• Border: warna abu-abu gelap.
• Teks utama: putih lembut atau abu-abu terang.
• Teks sekunder: abu-abu yang sedikit lebih redup.
• Link dan aksen: gunakan warna yang tetap terbaca pada latar gelap.

Cara Membuat Toggle Dark Mode Lebih Ringkas

Jika ruang pada navbar terbatas, Anda tidak harus menggunakan tombol dengan teks panjang. Gunakan tombol kecil yang tetap memiliki atribut aksesibilitas.

Contohnya:

<button
  class="dark-mode-toggle"
  id="dark-mode-toggle"
  type="button"
  aria-label="Aktifkan mode gelap">
  D
</button>

Anda dapat mengganti tampilannya melalui CSS tanpa mengubah JavaScript. Dengan begitu, fungsi dan desain dapat dikelola secara terpisah.

Cara Membuat Dark Mode Tidak Mengubah Struktur Konten

Yang dimaksud “tanpa mengubah struktur template” pada tutorial ini adalah Anda tidak perlu memindahkan elemen utama, membuat ulang layout, atau mengganti markup artikel. Script hanya menambahkan atribut pada elemen root saat mode gelap diaktifkan.

Contoh perubahan yang dilakukan JavaScript adalah:

<html data-theme="dark">

Ketika mode terang digunakan, atribut tersebut dihapus kembali. Artinya, JavaScript tidak perlu mengubah elemen artikel satu per satu.

Cara Mengatur Tombol agar Menampilkan Status Light dan Dark

Pada script utama, tulisan tombol dapat berubah berdasarkan mode aktif. Ketika dark mode aktif, tombol berubah menjadi Light. Ketika mode terang aktif, tombol kembali menjadi Dark.

Jika ingin menggunakan teks lain, cukup ubah bagian:

toggle.textContent = "Light";

dan:

toggle.textContent = "Dark";

Cara Menangani Elemen yang Tidak Ikut Berubah

Pada praktiknya, bagian yang tidak ikut berubah merupakan salah satu masalah paling umum. Misalnya body sudah menjadi gelap, tetapi kotak artikel masih berwarna putih.

Penyebabnya biasanya karena elemen tersebut memiliki background sendiri yang lebih spesifik daripada aturan dark mode.

Contohnya, jika template menggunakan:

.post {
  background: #ffffff;
}

Anda perlu memberikan override untuk mode gelap:

html[data-theme="dark"] .post {
  background: #111827;
}

Jika aturan asli memiliki tingkat spesifisitas lebih tinggi, Anda mungkin perlu selector yang lebih spesifik. Gunakan !important hanya ketika benar-benar diperlukan agar CSS lebih mudah dirawat.

Elemen Blogger yang Sebaiknya Diperiksa Saat Dark Mode Aktif

Setelah CSS dasar berfungsi, jangan hanya memeriksa background halaman. Beberapa elemen berikut juga perlu diuji:

• Header dan logo.
• Navbar dan menu dropdown.
• Judul artikel dan subjudul.
• Paragraf dan link.
• Sidebar dan widget.
• Kotak kode atau syntax highlighting.
• Tabel.
• Form pencarian dan form komentar.
• Footer.
• Tombol floating seperti WhatsApp atau back to top.

Cara Membuat Gambar Tetap Terlihat dengan Baik

Gambar tidak selalu membutuhkan perubahan warna ketika dark mode aktif. Jika gambar merupakan foto atau ilustrasi biasa, biarkan tampilannya tetap normal.

Namun, gambar yang memiliki latar putih atau screenshot antarmuka mode terang dapat terlihat terlalu terang dibandingkan halaman. Karena itu, periksa jenis gambar yang digunakan sebelum memberikan filter secara global.

Hindari memberikan filter seperti invert() kepada semua gambar tanpa pengecualian. Cara tersebut dapat menyebabkan foto dan ilustrasi berubah warna secara tidak semestinya.

Cara Menjaga Code Block Tetap Nyaman pada Dark Theme Blogger

Blog tutorial yang memiliki banyak kode perlu memberikan perhatian khusus pada code block. Warna code block biasanya memiliki aturan tersendiri dan belum tentu otomatis mengikuti warna halaman.

Contoh sederhana:

html[data-theme="dark"] pre,
html[data-theme="dark"] .code-box {
  background: #0b1120;
  color: #e5e7eb;
  border-color: #334155;
}

Jika template menggunakan syntax highlighter seperti Prism atau highlight.js, warna syntax highlighting dapat dikontrol oleh CSS library tersebut dan mungkin membutuhkan penyesuaian tambahan. Jangan mengubah warna seluruh elemen code secara global sebelum mengetahui bagaimana template memproses syntax highlighting.

Cara Membuat Dark Mode untuk Tabel Blogger

Tabel juga perlu diperiksa karena beberapa template menetapkan background putih langsung pada th atau td.

Contoh aturan dark mode:

html[data-theme="dark"] table {
  background: #111827;
}

html[data-theme="dark"] th {
  background: #1f2937;
  color: #f9fafb;
}

html[data-theme="dark"] td {
  background: #111827;
  color: #e5e7eb;
  border-color: #374151;
}

Sesuaikan selector apabila template Anda menggunakan class khusus untuk tabel artikel.

Kesalahan yang Sering Terjadi Saat Membuat Dark Mode Blogger

Kesalahan	Masalah	Solusi
Hanya mengubah warna body	Widget, artikel, dan sidebar mungkin tetap terang.	Periksa setiap komponen penting.
Selector tidak sesuai template	CSS tidak memberikan perubahan pada elemen tertentu.	Periksa selector menggunakan Developer Tools.
JavaScript dimasukkan berulang kali	Kode menjadi sulit dikelola dan berpotensi menimbulkan konflik.	Gunakan satu script utama untuk toggle.
Tidak menyimpan preferensi	Mode dapat kembali ke tampilan awal setiap kali halaman dimuat.	Gunakan localStorage.
Mengubah warna semua gambar	Foto atau ilustrasi dapat berubah warna secara tidak semestinya.	Tentukan gambar yang memang membutuhkan perlakuan khusus.
Mengabaikan elemen floating	Tombol WhatsApp atau back to top dapat terlihat berbeda dari desain utama.	Atur CSS elemen floating secara terpisah bila diperlukan.

Cara Mengetahui Selector yang Harus Diubah

Jika ada elemen template yang tidak berubah menjadi gelap, Anda dapat memeriksanya menggunakan Developer Tools pada browser desktop.

Klik kanan pada elemen yang bermasalah, pilih opsi untuk memeriksa elemen, kemudian lihat class atau selector yang digunakan. Setelah mengetahui selector tersebut, Anda dapat membuat aturan khusus seperti:

html[data-theme="dark"] .nama-selector {
  background: #111827;
  color: #e5e7eb;
}

Cara ini lebih baik daripada menambahkan banyak aturan secara acak karena Anda mengetahui elemen mana yang sebenarnya perlu diperbaiki.

Tips Membuat Dark Mode Blogger yang Nyaman

• Gunakan warna teks yang cukup kontras. Teks tidak boleh terlalu redup sehingga sulit dibaca.
• Gunakan beberapa tingkat warna gelap. Hal ini membantu membedakan halaman, kartu, widget, dan navigasi.
• Simpan preferensi pengguna. localStorage dapat digunakan agar mode yang dipilih tetap tersimpan di browser.
• Jangan mengubah gambar secara global. Foto dan ilustrasi biasanya tidak perlu diinvert.
• Periksa code block dan tabel. Kedua elemen tersebut sering mempunyai warna background sendiri.
• Uji perangkat mobile. Tombol toggle harus tetap mudah digunakan pada layar kecil.
• Periksa elemen floating. Pastikan tombol WhatsApp, back to top, atau elemen lain tetap terlihat dengan baik.

Cara Menguji Dark Mode Setelah Dipasang

Setelah kode ditambahkan, jangan hanya menguji tombol pada halaman utama. Gunakan beberapa halaman agar Anda dapat melihat apakah selector pada template bekerja secara konsisten.

1. Buka halaman utama blog.
2. Aktifkan dark mode.
3. Buka salah satu artikel.
4. Periksa judul, paragraf, link, gambar, tabel, dan code block.
5. Buka halaman statis dan periksa kembali warnanya.
6. Reload halaman dan pastikan preferensi tetap tersimpan.
7. Tutup lalu buka kembali halaman untuk memeriksa konsistensi.
8. Uji pada smartphone.

Apakah Dark Mode Bisa Mengganggu Template Blogger?

Dark mode tidak harus mengubah struktur layout template. Namun, CSS tambahan dapat memengaruhi tampilan elemen yang mempunyai selector sama dengan aturan yang Anda buat.

Karena itu, gunakan nama class khusus untuk tombol dan selector mode gelap yang cukup spesifik. Hindari mengubah aturan CSS template utama secara langsung jika sebenarnya cukup menambahkan override pada kondisi data-theme="dark".

Backup template sebelum melakukan perubahan tetap disarankan, terutama jika Anda sedang mengedit XML tema secara langsung.

Apakah Dark Mode Blogger Mengubah SEO?

Penambahan mode gelap pada dasarnya merupakan perubahan presentasi atau tampilan antarmuka. Fitur tersebut tidak perlu dianggap sebagai strategi SEO tersendiri.

Yang lebih penting adalah memastikan perubahan warna tidak membuat teks sulit dibaca, elemen navigasi menghilang, konten menjadi tidak terlihat, atau fungsi penting halaman terganggu. Pengalaman pengguna tetap perlu menjadi pertimbangan utama.

Versi Lengkap: CSS dan JavaScript Dark Mode Blogger

Jika Anda ingin menggunakan contoh yang lebih terstruktur, berikut rangkaian kode inti yang dapat dijadikan dasar. CSS digunakan untuk kondisi dark mode, sedangkan JavaScript mengontrol toggle dan penyimpanan preferensi.

/* CSS */
:root {
  --bg: #ffffff;
  --text: #222222;
  --card: #ffffff;
  --border: #dddddd;
  --link: #2563eb;
}

html[data-theme="dark"] {
  --bg: #0f172a;
  --text: #e5e7eb;
  --card: #111827;
  --border: #334155;
  --link: #60a5fa;
}

body {
  background: var(--bg);
  color: var(--text);
}

a {
  color: var(--link);
}

.post,
.widget {
  background: var(--card);
  color: var(--text);
  border-color: var(--border);
}

<button
  id="dark-mode-toggle"
  class="dark-mode-toggle"
  type="button"
  aria-label="Aktifkan mode gelap">
  Dark
</button>

<script>
(function () {
  var root = document.documentElement;
  var savedTheme = localStorage.getItem("blogger-theme");

  if (savedTheme === "dark") {
    root.setAttribute("data-theme", "dark");
  }

  document.addEventListener("DOMContentLoaded", function () {
    var toggle = document.getElementById("dark-mode-toggle");

    if (!toggle) {
      return;
    }

    function updateButton() {
      var dark = root.getAttribute("data-theme") === "dark";

      toggle.textContent = dark ? "Light" : "Dark";

      toggle.setAttribute(
        "aria-label",
        dark ? "Aktifkan mode terang" : "Aktifkan mode gelap"
      );
    }

    updateButton();

    toggle.addEventListener("click", function () {
      var dark = root.getAttribute("data-theme") === "dark";

      if (dark) {
        root.removeAttribute("data-theme");
        localStorage.setItem("blogger-theme", "light");
      } else {
        root.setAttribute("data-theme", "dark");
        localStorage.setItem("blogger-theme", "dark");
      }

      updateButton();
    });
  });
})();
</script>

Contoh tersebut merupakan fondasi. Anda tetap perlu menyesuaikan selector seperti .post dan .widget dengan template Blogger yang digunakan. Tidak semua tema mempunyai struktur class yang sama.

FAQ Dark Mode Blogger JavaScript

1. Apakah dark mode Blogger bisa dibuat tanpa mengganti template?

Bisa. Anda dapat menambahkan CSS, tombol toggle, dan JavaScript ke template yang sudah digunakan tanpa membangun ulang struktur layout utama.

2. Apakah dark mode Blogspot membutuhkan plugin?

Tidak. Untuk fungsi dasar, HTML, CSS, dan JavaScript sudah cukup.

3. Apa fungsi JavaScript pada dark mode Blogger?

JavaScript digunakan untuk mengubah status tema ketika tombol ditekan serta menyimpan preferensi pengguna menggunakan localStorage.

4. Apakah pilihan dark mode bisa disimpan?

Bisa. Pada tutorial ini, pilihan disimpan menggunakan localStorage pada browser pengguna. Dengan demikian, ketika halaman dimuat kembali pada browser yang sama, script dapat membaca preferensi tersebut.

5. Kenapa beberapa bagian template tidak ikut menjadi gelap?

Biasanya karena elemen tersebut mempunyai selector atau background sendiri yang belum mendapatkan aturan dark mode. Periksa selector menggunakan Developer Tools kemudian tambahkan CSS override yang sesuai.

6. Apakah dark mode harus mengubah warna semua gambar?

Tidak. Foto dan ilustrasi umumnya tidak perlu diubah. Terapkan perubahan hanya pada gambar tertentu apabila memang dibutuhkan.

7. Apakah dark mode bisa dipasang di navbar Blogger?

Bisa. Tombol toggle dapat ditempatkan pada area navbar atau header selama struktur template menyediakan lokasi yang sesuai untuk menampilkan tombol tersebut.

8. Apakah dark mode bekerja di HP?

Bisa selama HTML, CSS, dan JavaScript berjalan dengan baik pada browser perangkat. Tombol toggle juga perlu dirancang agar mudah disentuh pada layar kecil.

9. Apakah localStorage aman digunakan untuk menyimpan pilihan dark mode?

localStorage dirancang untuk menyimpan data sederhana pada sisi browser. Dalam contoh ini hanya digunakan untuk menyimpan preferensi tema, bukan informasi sensitif.

10. Apakah dark mode Blogger dapat dibuat otomatis mengikuti tema perangkat?

Bisa. CSS menyediakan media query prefers-color-scheme untuk membaca preferensi tampilan sistem pengguna. Namun, jika Anda menyediakan tombol manual, Anda perlu menentukan bagaimana preferensi sistem dan pilihan pengguna akan berinteraksi.

Kesimpulan

Membuat dark mode Blogger JavaScript dapat dilakukan tanpa mengganti template secara keseluruhan. Pendekatan yang sederhana adalah menggunakan CSS untuk mendefinisikan warna mode gelap, tombol untuk mengontrol tampilan, lalu JavaScript untuk mengubah atribut tema pada elemen html.

Dengan menambahkan localStorage, pilihan mode pengguna juga dapat dipertahankan ketika halaman dimuat kembali. Cara tersebut membuat toggle lebih praktis dibandingkan mode gelap yang selalu kembali ke tampilan awal.

Hal terpenting dalam penerapannya adalah menyesuaikan selector dengan template yang digunakan. Jangan hanya mengubah warna body, tetapi periksa juga artikel, sidebar, widget, navbar, footer, tabel, code block, form, dan elemen floating.

Dengan struktur yang tepat, fitur dark mode Blogspot dapat ditambahkan sebagai lapisan tampilan tanpa harus membongkar layout utama template. Anda juga dapat mengembangkan sistem ini lebih lanjut dengan ikon toggle, transisi ringan, CSS variables, atau dukungan terhadap preferensi tema perangkat.