CSS: light-dark()

Programiranje t.i. “Dark mode” načina je lahko tudi enostavno, namesto daljše poti vzamemo krajšo, kjer barve definiramo skupaj na enem mestu, za svetlo in temno temo.

O “Dark modu” sem pisal že večkrat, toda tokrat si bomo ogledali posebno obliko, ki nam skrajša čas izvedbe. Metoda enostavno združi “dark light” in prepusti odločanju operacijskemu sistemu, katero shemo izbrati. Tak način nam prihrani pri pisanju kode in bistveno pohitri čas priprave “dark mode” načina.

Klasična metoda uporablja media query “@media (prefers-color-scheme:dark)”, krajša metoda pa definira barve v sami kodi, primer: “color: light-dark(#333, #fff);”.

Primer kode light-dark():

See the Pen
CSS: light-dark()
by Ziga (@pomagalnik)
on CodePen.

Dodatni viri:

Komentiraj


*