`light-dark() și color-scheme` în CSS

Funcții și unități CSS light-dark(): Chrome 123, Firefox 120, Safari 17.5; color-scheme: Chrome 81, Firefox 96, Safari 13

Alege una dintre două culori în funcție de tema activă (luminoasă sau întunecată), fără a scrie un bloc @media separat.

Sintaxă CSS

:root {
  color-scheme: light dark;
}

body {
  background: light-dark(#ffffff, #0f172a);
  color: light-dark(#0f172a, #e2e8f0);
}

Ce face `light-dark() și color-scheme`

light-dark(culoare-luminoasă, culoare-întunecată) întoarce prima culoare când elementul folosește schema luminoasă și a doua când folosește schema întunecată.

Funcția depinde de proprietatea color-scheme. Cu color-scheme: light dark pe :root, browserul urmează setarea sistemului de operare. Fără această proprietate, light-dark() întoarce mereu culoarea luminoasă.

color-scheme schimbă și elementele native ale browserului: barele de derulare, câmpurile de formular și fundalul implicit al paginii. Pentru un buton de schimbare a temei, setezi color-scheme: dark sau light pe :root (de exemplu printr-o clasă adăugată din JavaScript).

Valori uzuale

Valoare	Descriere
`light-dark(A, B)`	Întoarce culoarea A în schema luminoasă și culoarea B în schema întunecată.
`color-scheme: light dark`	Pagina acceptă ambele scheme; se folosește preferința sistemului.
`color-scheme: light`	Forțează schema luminoasă pentru element și descendenți.
`color-scheme: dark`	Forțează schema întunecată pentru element și descendenți.

Exemple

Exemplul 1: Temă automată după setarea telefonului sau a calculatorului

Culorile ambelor teme stau în aceeași declarație, una lângă alta.

:root {
  color-scheme: light dark;
  --fundal: light-dark(#f8fafc, #0b1120);
  --text: light-dark(#1e293b, #e2e8f0);
  --accent: light-dark(#2563eb, #60a5fa);
}

body {
  background: var(--fundal);
  color: var(--text);
}

a {
  color: var(--accent);
}

Efect vizual în browser

Pe un laptop cu tema luminoasă, blogul are fundal aproape alb, text bleumarin și linkuri albastre. Pe telefonul Anei, setat pe modul întunecat, același blog apare cu fundal negru-albăstrui, text gri-deschis și linkuri albastru-deschis, iar barele de derulare devin și ele închise.

Exemplul 2: Buton care forțează tema, peste setarea sistemului

JavaScript adaugă doar o clasă pe <html>; toate culorile scrise cu light-dark() se schimbă singure.

:root {
  color-scheme: light dark;
}

:root.tema-luminoasa {
  color-scheme: light;
}

:root.tema-intunecata {
  color-scheme: dark;
}

.card {
  background: light-dark(#ffffff, #1e293b);
  border: 1px solid light-dark(#e2e8f0, #334155);
}