Tilbage til Light/Dark mode

1. semester / Tema 4: Grundlæggende UI

Manuelt temaskift med JavaScript

Brug en knap til at tilføje og fjerne en `dark`-klasse på `html`.

Se undervisningsslides

Relevante links

TL;DR

  1. CSS kan godt være klar til dark mode, men JavaScript kan styre, hvornår temaet skifter.
  2. Et almindeligt mønster er at toggle en dark-klasse på html.
  3. Klassen kan bruges til at skifte color-scheme.
  4. Når det virker, kan du bagefter gøre løsningen mere brugervenlig og gemme brugerens valg.

Hvis du kun husker én ting: Lad JavaScript skifte én klasse, og lad CSS stå for hele temaets udseende.

Lad JavaScript styre temaet

Hvis temaet skal skifte, når brugeren klikker på en knap, skal JavaScript reagere på klikket og ændre noget i DOM’en.

Et helt klassisk begyndermønster er:

const html = document.querySelector("html");
const btn = document.querySelector("#theme-btn");


function toggleTheme() {
  html.classList.toggle("dark");
}


btn.addEventListener("click", toggleTheme);

Her er idéen:

CSS’en reagerer på klassen

Når JavaScript toggler dark, kan CSS’en skifte tilstand:

html {
  color-scheme: light;
  --color-brand: light-dark(#5000ca, #e0d3ff);
  --background-primary: light-dark(#eee, #1b1b1b);
}


html.dark {
  color-scheme: dark;
}

Det smarte er, at JavaScript ikke selv sætter farver. Det tænder bare en class, og så gør CSS resten.

Et godt samarbejde mellem HTML, CSS og JS

Denne type løsning er et godt eksempel på, at de tre teknologier arbejder sammen:

Det er et godt begyndermønster, fordi ansvaret er tydeligt fordelt.

Øvelser

Start med at få temaet til at skifte på klik:

Hvis du vil gøre løsningen mere brugervenlig, kan du bagefter prøve at huske brugerens valg: