Mørk tilstand til din nettside

En lys/mørk temaskifter, som nettsiden husker, selv etter du lukker nettleseren.

Sådan fungerer det

Mørk tilstand er en trylleformular i to dele:

CSS forbereder et andet “kostume” – regler, der kun gjelder, når siden har klassen dark.
JavaScript legger til eller fjerner den klasse ved klik. Og det skriver, hva du valgte, i nettleserens minne, så det fortsatt gjelder i morgen.

Jeg viser deg: det mørke kostume i CSS

Legg til dette på slutten av 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;
}

Les det sådan her: “Når body har klassen dark, gjelder disse regler.” Uden klassen brukes intet af dette.

💡

Juster fargerne, så de passer til din nettside – gå igjennom din CSS og finn en mørk søskende til hver lys farge. Reglen er den samme: mørk baggrund → lys tekst.

Jeg viser deg: kontakten i JavaScript

Legg til en knap til headeren (inde i <nav>):

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

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

Tre nye ting:

classList.toggle("dark") – “hvis den har klassen, fjern den; hvis ikke, legg til den.” En kontakt på én linje.
classList.contains("dark") – “har den den akkurat nå?” (returnerer sand/falsk, praktisk i en betingelse).
localStorage – nettleserens notesbog. setItem skriver til den, getItem leser fra den. Hva du lagrer der, overlever selv at lukke nettleseren. (Faktisk bruker denne nettside det til at lagre din fremgang, mens du lærer!)

Nå er det din tur 💪

Legg til et mørkt kostume til din egen style.css – gå igjennom alle dine farger (baggrund, header, kort, footer, badges) og giv dem mørke versioner under body.dark.
Legg til en kontaktknap til headeren på hver side og koden til script.js.
Prøv det: skift til mørk, luk nettleseren, åpne nettsiden igen – den bør åpne direkte i mørk tilstand.

Eksempel på et mere komplet mørkt kostume (juster farger til prosjektet ditt)

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

✅

Sjekk deg selv: Klikk på 🌙 gjør nettsiden mørk (og ikonet skifter til ☀️), klikk på ☀️ gjør den lys igen. Etter at lukke og genåpne nettleseren husker nettsiden ditt valg. Det er en funktion, som mange “voksne” nettsider ikke engang har!

Dette tar du med deg fra leksjonen

Mørk tilstand = et forberedt CSS-kostume (body.dark) + JavaScript, der skifter klassen.
classList.toggle() legger til/fjerner en klasse, classList.contains() sjekker for den.
localStorage er nettleserens permanente minne: setItem("key", "value") og getItem("key").