Svetli/temni način spletne strani

Specifikacije za CSS se sproti spreminjajo glede na potrebe zato ima CSS vedno več novih funkcionalnosti. Ena izmed njih je media query za temni način: prefers-color-scheme: light/dark. Temni način (dark mode) postaja vedno bolj popularen saj naj bi bil manj škodljiv za oči, omogoča lažje branje ponoči in nekaterim napravam tudi podaljša čas delovanja baterije.

Če želimo določeno obliko uporabiti za temen način uporabimo media query:

@media (prefers-color-scheme: dark)

kjer spremenimo barvo ozadja, fontov in ostalih elementov da ustrezajo temi temnega načina.

Če želimo da je oblika prikazana le v svetlem načinu uporabimo media query:

@media (prefers-color-scheme: light)

Pri takem načinu oblikovanja bi morali narediti dve različni barvni temi, za vsak način svojo, kar je pri manjših straneh dokaj enostavno, pri večjih projektih z veliko elementi pa bi bilo zahtevnejše in pri vzdrževanju bi imeli velike težave saj bi bilo treba za vsako spremembo, ki bi jo želeli dodati spremeniti vsak element posebej.

Drug, precej enostavnejši način  bi bil, da uporabimo CSS filter in obrnemo vse barve na nasprotne:

@media (prefers-color-scheme: dark) {
    html {
        filter: invert(100%);
    }
}

Ker pa smo s tem pristopom obrnili vse barve, se obrnejo tudi sence in barve, ki jih ni smiselno spreminjati, prav tako pride do težav s slikami saj barv slik ni smiselno obračati, zato je ta pristop praktičen le na enostavnejši straneh, ki vsebujejo le besedilo.

Najboljši način je zato uporaba spremenljivk. V CSS se spremenljivke uporablja tako da jih na začetku definiramo:

:root {
    --barva-ozadja: #fff;
    --barva-besedila: #212121;
}

Uporabljajo pa se na način:

body {
    background-color: var(--barva-ozadja);
    color: var(--barva-besedila);
}

Nato je potrebno le ponovna definicija spremenljivk še za temni način:

@media (prefers-color-scheme: dark) {
    :root {
        --barva-ozadja: #212121;
        --barva-besedila: #ededed;
    }
}

S tem imamo nadzor nad vsemi barvami, in če jo želimo spremeniti jo lahko spremenimo le na enem mestu in tako ni treba popravljati vsakega elementa posebej.

Čeprav je ta funkcionalnost dodana v CSS pa ne pomeni da je dostopna povsod, to je odvisno od brskalnikov. Trenutno media query za temen način deluje le na najnovejših posodobitvah za Firefox, Chrome in Safari, kmalu pa naj bi deloval tudi v Edgu in drugih browserjih.