color-scheme og light-dark()

Hvis du kun husker én ting: Fortæl browseren at begge temaer findes, før du forventer at light-dark() kan hjælpe dig.

Først skal browseren vide, at begge temaer findes

Hvis du vil bruge light-dark(), er det ikke nok bare at skrive funktionen. Browseren skal også vide, at siden understøtter både light og dark mode.

Et lille udgangspunkt kan se sådan ud:

html /* eller :root */ {
  color-scheme: light dark;
}

Det er det, der aktiverer funktionen. Uden det vil light-dark() ikke opføre sig, som du forventer.

light-dark() vælger mellem to værdier

Tanken er enkel:

• første værdi bruges i light mode
• anden værdi bruges i dark mode

Det gør det lettere at samle to varianter af samme design ét sted i CSS’en i stedet for at duplikere hele regler.

Start med få farver

Til en begyndelse behøver du ikke lave et helt design system. Det er ofte nok at starte med:

• en baggrundsfarve
• en tekstfarve
• evt. en accentfarve

Når de tre virker, kan du bygge videre.

Øvelse

Her prøver du selve mekanikken af: aktiver color-scheme og brug light-dark() til et lille farveskift.