Mode gelap untuk situs web kamu · Kode bersama Martin

Pengalih tema terang/gelap yang diingat situs web bahkan setelah kamu menutup browser.

Bagaimana cara kerjanya

Mode gelap adalah mantra yang terdiri dari dua bagian:

CSS menyiapkan “kostum” kedua – aturan yang hanya berlaku bila halaman memiliki kelas gelap.
JavaScript menambah atau menghapus kelas tersebut ketika diklik. Dan itu menulis apa yang kamu pilih ke dalam memori browser, sehingga masih berlaku besok.

Tunjukkan pada saya: kostum gelap di CSS

Tambahkan ini ke akhir style.css:

body.dark {
  background-color: #1c1917;
  color: #f5f0ea;
}

body.dark h1,
body.dark h2 {
  color: #93c5fd;
}

body.dark .card {
  background-color: #292524;
  color: #f5f0ea;
}

Bacalah seperti ini: “Jika tubuh memiliki kelas gelap, aturan ini berlaku.” Tanpa kelas, semua ini tidak akan digunakan.

💡

Sesuaikan warna agar sesuai dengan situs web kamu – buka CSS kamu dan temukan saudara yang gelap untuk setiap warna terang. Aturannya tetap sama: latar belakang gelap → teks terang.

Tunjukkan pada saya: tombol di JavaScript

Tambahkan tombol ke header (di dalam <nav>):

<button id="switch">🌙</button>

Dan di script.js:

const switchButton = document.getElementById("switch");

// When the page loads: remember what the visitor picked last time
if (localStorage.getItem("mode") === "dark") {
  document.body.classList.add("dark");
  switchButton.textContent = "☀️";
}

switchButton.addEventListener("click", () => {
  document.body.classList.toggle("dark");

  if (document.body.classList.contains("dark")) {
    localStorage.setItem("mode", "dark");
    switchButton.textContent = "☀️";
  } else {
    localStorage.setItem("mode", "light");
    switchButton.textContent = "🌙";
  }
});

Tiga hal baru:

classList.toggle("dark") – “jika memiliki kelas, hapus; jika tidak, tambahkan.” Sebuah saklar dalam satu baris.
classList.contains("dark") – “apakah ada sekarang?” (mengembalikan benar/salah, berguna dalam suatu kondisi).
localStorage – buku catatan browser. setItem menulis padanya, getItem membacanya. Apa pun yang kamu simpan di sana akan bertahan bahkan ketika browser ditutup. (Faktanya, situs web ini menggunakannya untuk menyimpan kemajuan kamu saat kamu belajar!)

Giliran kamu 💪

Tambahkan kostum gelap ke style.css kamu sendiri – telusuri semua warna kamu (latar belakang, header, kartu, footer, lencana) dan berikan versi gelap di bawah body.dark.
Tambahkan tombol sakelar ke header di setiap halaman dan kode ke script.js.
Cobalah: beralih ke mode gelap, tutup browser, buka situs web lagi – seharusnya langsung terbuka ke mode gelap.

Contoh kostum gelap yang lebih lengkap (sesuaikan warna agar sesuai dengan proyek kamu)

body.dark {
  background-color: #1c1917;
  color: #f5f0ea;
}

body.dark h1,
body.dark h2,
body.dark h3 {
  color: #93c5fd;
}

body.dark header {
  background-color: #0f172a;
}

body.dark .card {
  background-color: #292524;
  color: #f5f0ea;
  box-shadow: none;
}

body.dark footer {
  background-color: #0f172a;
}

body.dark a {
  color: #93c5fd;
}

✅

Periksa diri kamu: Mengklik 🌙 membuat situs web menjadi gelap (dan ikon berubah menjadi ☀️), mengklik ☀️ menjadikannya terang kembali. Setelah menutup dan membuka kembali browser, situs web akan mengingat pilihan kamu. Ini adalah fitur yang bahkan tidak dimiliki oleh banyak situs web “dewasa”!

Apa yang bisa diambil dari pelajaran ini

Mode gelap = kostum CSS yang disiapkan (body.dark) + JavaScript yang mengubah kelas.
classList.toggle() menambah/menghapus kelas, classList.contains() memeriksanya.
localStorage adalah memori permanen browser: setItem("key", "value") dan getItem("key").