htmlcssjavascripttemaPemula9 mnt baca

Dark Mode Toggle

Sakelar tema gelap/terang dengan CSS variables dan preferensi tersimpan.

Kenapa Dark Mode?

Dark mode bukan sekadar gaya: mengurangi silau di malam hari dan menghemat baterai layar OLED. Pengguna kini mengharapkan setiap web punya sakelar tema. Kabar baiknya: dengan CSS variables, implementasinya hanya belasan baris.

Langkah Membangun

HTML: Tombol toggle (🌙/☀️) plus contoh konten: kartu, teks, dan tombol agar perubahan tema terlihat jelas.

CSS: Kuncinya adalah CSS variables di :root:

css
:root { --bg: #ffffff; --teks: #1a1a1a; --kartu: #f3f4f6; }
body.gelap { --bg: #111827; --teks: #f9fafb; --kartu: #1f2937; }

Semua elemen memakai var(--bg), var(--teks), dst. Ganti tema = ganti SATU class di body, semua warna ikut berubah otomatis. Tambahkan transition: background-color 0.3s agar perpindahan mulus.

JS: Klik tombol -> toggle class gelap di body, simpan pilihan ke localStorage (localStorage.setItem("tema", "gelap")). Saat halaman dibuka, baca simpanan dan terapkan. localStorage adalah "kotak penyimpanan" kecil di browser yang tidak hilang saat refresh.

Kesalahan Umum

  • Warna ditulis langsung (hardcode) di tiap elemen sehingga ganti tema harus ubah puluhan tempat (solusinya: SELALU pakai variables).
  • Lupa menerapkan tema tersimpan saat halaman dimuat sehingga pilihan pengguna hilang.
  • Kontras buruk di salah satu tema (uji kedua tema, pastikan teks tetap terbaca).
Live Playground
export default function App(): JSX.Element {
  return <h1>Hello world</h1>
}
Edit kode di kiri, preview kanan ter-update otomatis.

Tantangan

Tantangan: Ikuti Tema Sistem

Jika pengguna belum pernah memilih tema, ikuti tema sistem operasi secara otomatis memakai window.matchMedia("(prefers-color-scheme: dark)"). Pilihan manual pengguna tetap mengalahkan tema sistem.

Kuis Bab

Uji pemahamanmu: Utilitas Sehari-hari

Jawab 5 soal berikut, lalu tekan "Periksa Jawaban".

1.Kenapa setInterval tidak akurat untuk mengukur waktu di stopwatch?

2.Bagaimana cara memastikan jam tampil '09:05' bukan '9:5'?

3.Apa trik implementasi dark mode yang paling rapi?

4.Fungsi JavaScript apa yang mengubah angka 10 menjadi '0a' dalam heksadesimal?

5.Kenapa Math.random() tidak disarankan untuk password sungguhan?