Menyimpan Pilihan Mode Gelap dengan localStorage

Pengunjung biasanya berharap pilihan tema tidak hilang setelah berpindah halaman. localStorage dapat menyimpan preferensi mode terang atau gelap di browser pengguna.

Hal yang perlu diperhatikan

• Preferensi tersimpan lokal
• Tombol pengalih tema
• Atribut data-theme sederhana
• Warna elemen konsisten

Cara menerapkannya

Mulailah dari versi paling sederhana dan pastikan struktur HTML tetap mudah dipahami. Setelah fungsi dasar bekerja, atur tampilan melalui CSS seperlunya. Coba skenario layar besar, layar kecil, serta kondisi ketika isi artikel lebih panjang dari perkiraan.

Contoh JavaScript

const root = document.documentElement;
const saved = localStorage.getItem("tema");
if (saved) root.dataset.theme = saved;
document.querySelector("#ganti-tema")?.addEventListener("click", () => {
  const next = root.dataset.theme === "dark" ? "light" : "dark";
  root.dataset.theme = next;
  localStorage.setItem("tema", next);
});

Tips sebelum dipublikasikan

1. Hormati preferensi sistem sebagai default.
2. Uji warna teks dan latar.
3. Periksa ketika penyimpanan browser diblokir.

Catatan untuk pengguna FajriLab

Contoh ini dibuat sebagai materi demonstrasi untuk menguji gaya artikel FajriLab. Sesuaikan kode, pengaturan, dan kebutuhan aksesibilitas sebelum digunakan pada situs produksi.

Saat artikel sebenarnya siap diterbitkan, ganti gambar sementara, perbarui isi sesuai hasil pengujian, lalu periksa tautan serta tampilan responsif. Artikel contoh ini tidak dimaksudkan sebagai klaim bahwa suatu produk atau fitur sudah tersedia.