Tumma tila verkkosivullesi · Koodaa Martinin kanssa

Miten se toimii

Tumma tila on loitsu kahdesta osasta:

CSS valmistaa toisen “puvun” – säännöt jotka pätevät vain kun sivulla on luokka dark.
JavaScript lisää tai poistaa luokan klikkauksella. Ja se kirjoittaa valintasi selaimen muistiin, joten se pätee huomennakin.

Näytän sinulle: tumma puku CSS:ssä

Lisää tämä style.css:n loppuun:

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

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

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

Lue se näin: “Kun body:lla on luokka dark, nämä säännöt pätevät.” Ilman luokkaa mitään tästä ei käytetä.

💡

Säädä värit sopimaan verkkosivuusi – käy CSS:si läpi ja keksi tumma sisar jokaiselle vaalealle värille. Sääntö pysyy samana: tumma tausta → vaalea teksti.

Näytän sinulle: kytkin JavaScriptissä

Lisää painike headeriin (<nav>:n sisään):

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

Ja script.js:ään:

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 = "🌙";
  }
});

Kolme uutta asiaa:

classList.toggle("dark") – “jos sillä on luokka, poista se; jos ei ole, lisää se.” Kytkin yhdellä rivillä.
classList.contains("dark") – “onko sillä nyt?” (palauttaa true/false, kätevä ehdossa).
localStorage – selaimen muistikirja. setItem kirjoittaa siihen, getItem lukee sieltä. Mitä tallennat sinne, säilyy vaikka suljet selaimen. (Itse asiassa tämäkin verkkosivu käyttää sitä tallentaakseen edistymisesi oppiessasi!)

Nyt sinun vuorosi 💪

Lisää tumma puku omaan style.css:ääsi – käy kaikki värisi läpi (tausta, header, kortit, footer, merkit) ja anna niille tummat versiot body.dark:n alla.
Lisää kytkinpainike headeriin jokaiselle sivulle ja koodi script.js:ään.
Kokeile: vaihda tummaan, sulje selain, avaa verkkosivu uudelleen – sen pitäisi avautua suoraan tummaan tilaan.

Esimerkki täydellisemmästä tummasta puvusta (säädä värit projektiisi)

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;
}

✅

Tarkista itse: 🌙-klikkaus tummentaa verkkosivun (ja kuvake vaihtuu ☀️:ksi), ☀️-klikkaus vaalentaa taas. Selaimen sulkemisen ja uudelleenavaamisen jälkeen verkkosivu muistaa valintasi. Tämä on ominaisuus jota monilla “aikuisten” verkkosivuilla ei edes ole!

Mitä opit tästä oppitunnista

Tumma tila = valmis CSS-puku (body.dark) + JavaScript joka vaihtaa luokkaa.
classList.toggle() lisää/poistaa luokan, classList.contains() tarkistaa sen.
localStorage on selaimen pysyvä muisti: setItem("avain", "arvo") ja getItem("avain").