Nå som alt skal ha en dark mode, blir det stadig viktigere å designe sidene sine med både et lyst og et mørkt tema. Dette har man før løst ved å bruke color-schemepå root-elementet og så bruke mediaqueries med prefers-color-scheme for å bytte på farger basert på tema, men visste du at du nå kan droppe mediaqueries helt?

Med light-dark()kan man definere to verdier som vil returneres basert på hvilken modus man er i. For at det skal funke må man definere color-schemepå root-elementet for å si ifra at det finnes flere tema.

:root {
  color-scheme: light dark;
}

body {
  color: light-dark(#333b3c, #efefec);
  background-color: light-dark(#efedea, #223a2c);
}

Denne funksjonen fungerer selvfølgelig også med css-variabler. Man kan overskrive hvilken tema et element (og alle underelementer) skal bruke ved å eksplisitt sette color-scheme på elementet, men til vanlig bør man la nettleseren bestemme dette automatisk utifra systemtema.

light-dark() kan allerede brukes i alle moderne nettlesere!