Tilbage til Light/Dark mode

1. semester / Tema 4: Grundlæggende UI

Custom properties og farvetemaer

Brug custom properties til at samle dine tema-farver ét sted.

Se undervisningsslides

Relevante links

TL;DR

  1. Custom properties gør det lettere at samle farver ét sted.
  2. light-dark() kan bruges direkte inde i en variabel.
  3. var(--navn) gør resten af CSS’en mere overskuelig.
  4. Det er lettere at justere et tema, når farverne er samlet centralt.

Hvis du kun husker én ting: Saml dine temafarver i variabler først, så bliver resten af CSS’en lettere at ændre.

Saml farverne i variabler

Når et interface skal have både light og dark mode, bliver det hurtigt rodet, hvis farverne står spredt over det hele.

Et mere samlet mønster er at definere variabler øverst:

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

Her ligger temaets vigtigste farver ét sted.

Brug farverne med var()

Når farverne først er defineret som custom properties, kan du bruge dem videre i resten af CSS’en:

Det gør koden lettere at læse, fordi du arbejder med navngivne roller i stedet for rå hex-værdier hele tiden.

Tænk i roller, ikke kun i farver

Det hjælper at navngive variabler efter funktion:

Så bliver det tydeligt, hvad farven bruges til, og ikke kun hvordan den ser ud.