I dagens CSS skal vi se på light-dark()
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!
Relevante lenker anbefalt av forfatteren
Uffda. En feil har oppstått, og vi klarer ikke å hente lenken!