Mörkt läge för din webbplats

En ljus/mörk temaväxlare som webbplatsen minns även efter att du stängt webbläsaren.

Så funkar det

Mörkt läge är en trollformel i två delar:

CSS förbereder en andra “kostym” – regler som bara gäller när sidan har klassen dark.
JavaScript lägger till eller tar bort den klassen vid klick. Och det skriver vad du valde i webbläsarens minne, så det gäller imorgon också.

Jag visar: den mörka kostymen i CSS

Lägg till det här i slutet 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;
}

Läs det så här: “När body har klassen dark, gäller dessa regler.” Utan klassen används inget av det här.

💡

Justera färgerna så de passar din webbplats – gå igenom din CSS och hitta på en mörk syskon till varje ljus färg. Regeln är densamma: mörk bakgrund → ljus text.

Jag visar: växeln i JavaScript

Lägg till en knapp i headern (inuti <nav>):

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

Och 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 nya saker:

classList.toggle("dark") – “om den har klassen, ta bort den; om den inte har den, lägg till den.” En växel på en rad.
classList.contains("dark") – “har den den just nu?” (returnerar true/false, praktiskt i ett villkor).
localStorage – webbläsarens anteckningsbok. setItem skriver till den, getItem läser från den. Det du sparar där överlever även att stänga webbläsaren. (Faktum är att just den här webbplatsen använder det för att spara din progress medan du lär dig!)

Nu är det din tur 💪

Lägg till en mörk kostym i din egen style.css – gå igenom alla dina färger (bakgrund, header, kort, footer, brickor) och ge dem mörka versioner under body.dark.
Lägg till en växelknapp i headern på varje sida och koden i script.js.
Testa: växla till mörkt, stäng webbläsaren, öppna webbplatsen igen – den ska öppnas direkt i mörkt läge.

Exempel på en mer komplett mörk kostym (justera färger efter ditt 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;
}

✅

Kolla själv: Klick på 🌙 gör webbplatsen mörk (och ikonen byts till ☀️), klick på ☀️ gör den ljus igen. Efter att du stängt och öppnat webbläsaren igen minns webbplatsen ditt val. Det här är en funktion som många “vuxen”-webbplatser inte ens har!

Det här tar du med dig från lektionen

Mörkt läge = en förberedd CSS-kostym (body.dark) + JavaScript som växlar klassen.
classList.toggle() lägger till/tar bort en klass, classList.contains() kollar om den finns.
localStorage är webbläsarens permanenta minne: setItem("key", "value") och getItem("key").