CSS kintamieji ir jų panaudojimas temų perjungimui
Sužinokite, kaip CSS kintamieji leidžia lengvai keisti spalvas ir stilius nekeičiant HTML kodo. Pagrindinis tamsaus režimo įgyvendinimo žingsnis.
Operacinės sistemos nustatymuose pagrįstas tamsus režimas
Kaip naudoti prefers-color-scheme medijos užklausą, kad jūsų svetainė automatiškai keistųsi pagal vartotojo sistemos nustatymus. Paprasta, bet galinga.
5 min
Pradedantysis
Birželis 2026
Tamsus režimas jau nebe trendingas dalykas — tai tapusi standartu. Daugelis operacinių sistemų šiandien palaiko automatinį perėjimą tarp šviaus ir tamaus režimų priklausomai nuo laiko ar vartotojo nustatymuose nurodytų nuostatos. Jūsų svetainė gali būti tokia palanki, nereikalinga jokio papildomo kliko.
Čia pradeda veikti
prefers-color-scheme
medijos užklausa. It's one of the simplest CSS features, yet incredibly powerful. Kai tik nustatote ją teisingai, jūsų svetainė automatiškai reaguoja į vartotojo sistemos nustatymus. Nereikia jokio JavaScript, jokių sudėtingų skaičiavimų.
Kas yra prefers-color-scheme?
CSS medijos užklausa, kuri nusako, ar vartotojas operacinėje sistemoje pasirinko šviaus ar tamaus režimą. Jūsų CSS gali pasirūpinti atitinkamais stiliais automatiškai.
Kaip tai veikia operacinėje sistemoje
Pradžia yra paprastesnė nei galvojate. Operacinė sistema — tiek Windows, tiek macOS, tiek Linux — saugo informaciją apie tai, ką vartotojas pasirinko. Kai kurie naudotojai nustatą automatinį režimą, kuris keičiasi priklausomai nuo saulės laiko. Kiti tiesiog pasirinks vieną iš variantų ir liks prie jo.
Jūsų naršyklė (Chrome, Firefox, Safari — viskas vienoda) žino apie šią nuostatą. Kai naršyklė įkrauna svetainę, ji gali pranešti CSS apie tai, ką vartotojas norėtų. That's where prefers-color-scheme comes in — jūs galite pasakyti: "Jei vartotojas pageidauja tamsaus režimo, taikykite šiuos stilius. Jei šviaus — šiuos."
Viskas vyksta pusėje — naršyklė tiesiog nuskaito OS nustatymą ir praneša jūsų CSS. Nėra jokio serverio, jokio duomenų siuntimo. Grynai lokalus sprendimas.
Paprastas CSS pavyzdys
Jūsų CSS gali atrodyti maždaug taip. Jūs apibrėžiate numatytuosius stilius (dažniausiai šviaus režimui), o tada naudojate medijos užklausą.
@media (prefers-color-scheme: dark) {
body { background: #0d0510; color: #fdf4ff; }
}
Tai viskas. Kai vartotojas turi nustatytą tamų režimą, šie stiliai bus pritaikyti automatiškai. Don't worry about JavaScript — CSS handle'ina visa tai patys. Jūs tik aprašote, ką norėtumėte matyt kiekvienu atveju.
Susiję straipsniai
localStorage naudojimas vartotojo nustatymuose išsaugoti
Praktinis vadovas, kaip panaudoti localStorage, kad vartotojo pasirinkta tema būtų išsaugota. Suderinimas su prefers-color-scheme.
Prieinamumas ir kontrastas tamsaus režimo dizaine
Svarbi tema, kurią dažnai pamiršta kūrėjai. Šis straipsnis paaiškina, kaip pasirūpinti tinkamu kontrastu ir pasiekiamumu.
Kada vartotojas keičia nustatymus
Čia yra labai svarbus dalykas — prefers-color-scheme veikia realiu laiku. Jei vartotojas nuo svetainės eina keisti OS nustatymus (pavyzdžiui, iš šviaus režimo į tamų), svetainė automatiškai atsinaujina. Naršyklė nuskaito naują nuostatą ir pritaiko atitinkamus stilius. Viskas vyksta tiesiai prieš jų akis.
Todėl šis sprendimas yra toks puikus — jis nereikalauja jokios papildomos infrastruktūros. Vartotojas neprivalo registruotis, neprivalo saugoti nustatymo jūsų duomenų bazėje. OS jau saugo šią informaciją. Jūs tiesiog naudojate tai, kas jau yra.
Svarbi pastaba
Šis straipsnis yra informacinio pobūdžio. Prefers-color-scheme naudojimas gali skirtis priklausomai nuo jūsų specifinio projekto reikalavimų, naršyklės versijos ir operacinės sistemos. Rekomenduojame testuoti savo įgyvendinimą įvairiose aplinkose ir su skirtingais įrenginiais. Šis metodas veikia su šiuolaikiškomis naršyklėmis, tačiau senesnės versijos gali jį nepalaiky.
Pabaiga
Prefers-color-scheme medijos užklausa yra vienas iš geriausių CSS sprendimų, kurie atsirado pastaraisiais metais. It's straightforward, doesn't require JavaScript, and respects user's system preferences. Jūsų vartotojai jau turi nustatymus — tik leiskite jiems veikti.
Pradėkite nuo paprastos medijos užklauso. Apibrėžkite abi spalvų schemas. Testuokite skirtingose naršyklėse. Tada, jei norėsite daugiau kontrolės, galite suderinti su localStorage arba CSS kintamaisiais. Bet net ir šis pagrindinis sprendimas duos puikių rezultatų daugumui vartotojų.
Norėtumėte sužinoti daugiau apie CSS kintamuosius?
Skaitykite apie CSS kintamuosius