Dark & light mode brez CSSja

Dark & light mode lahko izvedemo tudi brez CSS kode. Namreč v osnovi se ob predpostavki “dark mode”, če stran nima dodatne kode ne zgodi nič. Z malo HTML kode pa lahko naredimo avtomatsko prestavljene brez CSS kode.

Lastnost “color-scheme” nam omogoča s pomočjo HTML značke TAG spremembo iz “light mode” v “dark mode” oz. obratno. Prednost te metode je ta, da se vsi UI elementi spremenijo v “dark mode”, v praksi to pomeni forme, scroolbar, …

Prednost te metode je tudi ta, da ni potrebno predhodno prenesti CSSja, ampak se ta aplicira takoj. HTML tag oz. meta oznaka pa ima lahko eno ali dve vrednosti, pomemben je tudi vrstni red. Spodnji primer preferira najprej “dark mode”.

Primer kode “color-scheme”

<meta name="color-scheme" content="dark light">

Združevanje color-scheme in prefers-color-scheme
Meta oznaka in CSS metoda ima na koncu enak učinek. Razlika je v tem, da se meta oznaka naloži hitreje, njena slabost pa je, da ne deluje vedno optimalno. Zato je potrebno vedno oba združevati, saj nam meta oznaka zagotovi osnovo, CSS pa slednjo nadgradi, kjer imamo težave.

Dodatno branje “color-scheme”

Oznake: CSSdark modeHTMLLlight modetagteme

Komentiraj


*