Mørk tilstand til din hjemmeside

En lys/mørk temaskifter, som hjemmesiden husker, selv efter du lukker browseren.

Sådan virker det

Mørk tilstand er en trylleformular i to dele:

CSS forbereder et andet “kostume” – regler, der kun gælder, når siden har klassen dark.
JavaScript tilføjer eller fjerner den klasse ved klik. Og det skriver, hvad du valgte, i browserens hukommelse, så det stadig gælder i morgen.

Vis mig: det mørke kostume i CSS

Tilføj dette i slutningen af 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;
}

Læs det sådan her: “Når body har klassen dark, gælder disse regler.” Uden klassen bruges intet af dette.

💡

Juster farverne, så de passer til din hjemmeside – gå igennem din CSS og find en mørk søskende til hver lys farve. Reglen er den samme: mørk baggrund → lys tekst.

Vis mig: kontakten i JavaScript

Tilføj 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, tilføj den.” En kontakt på én linje.
classList.contains("dark") – “har den den lige nu?” (returnerer sand/falsk, praktisk i en betingelse).
localStorage – browserens notesbog. setItem skriver til den, getItem læser fra den. Hvad du gemmer der, overlever selv at lukke browseren. (Faktisk bruger denne hjemmeside det til at gemme din fremgang, mens du lærer!)

Nu er det din tur 💪

Tilføj et mørkt kostume til din egen style.css – gå igennem alle dine farver (baggrund, header, kort, footer, badges) og giv dem mørke versioner under body.dark.
Tilføj en kontaktknap til headeren på hver side og koden til script.js.
Prøv det: skift til mørk, luk browseren, åbn hjemmesiden igen – den bør åbne direkte i mørk tilstand.

Eksempel på et mere komplet mørkt kostume (juster farver til dit projekt)

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

✅

Tjek dig selv: Klik på 🌙 gør hjemmesiden mørk (og ikonet skifter til ☀️), klik på ☀️ gør den lys igen. Efter at lukke og genåbne browseren husker hjemmesiden dit valg. Det er en funktion, som mange “voksne” hjemmesider ikke engang har!

Det tager du med fra denne lektion

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