localStorage naudojimas vartotojo nustatymuose išsaugoti
Praktinis vadovas, kaip panaudoti localStorage, kad vartotojo pasirinkta tema būtų išsaugota net po naršyklės uždarymo.
CSS kintamieji ir jų panaudojimas temų perjungimui
Sužinokite, kaip CSS kintamieji leidžia lengvai keisti spalvas ir stilius nekeičiant HTML. Šis metodas yra pagrindas moderniam temos valdymui.
7 min
Vidutinis
Liepa 2026
Kas yra CSS kintamieji?
CSS kintamieji, dar vadinami CSS nuosavybėmis arba CSS custom properties, yra reikšmės, kurias galite apibrėžti ir naudoti visame savo stilylapyje. Tai tik naudinga priemonė — nekeičia jūsų HTML, o leidžia valdyti stilius iš vienos vietos.
Jie pradėti naudoti dėl to, kad projektai nuolat didėja. Kai turite 50 skirtingų spalvų naudojamų per visą svetainę ir staiga norite jas keisti, rašant :root kintamųjų, jūs tiesiog pakeičiate vieną skaičių — ir viskas atsinaujina. Tai daug greitiau nei ieškoti ir keisti spalvas kode rankomis.
Svarbiausia: CSS kintamieji yra dinamiški. Galite jas keisti naudodami JavaScript arba net suaktyvinti skirtingas reikšmes skirtingose ekrano dalyse.
Temų Vakaras Redakcinė Komanda
Redakcinė Komanda
Parengta Temų Vakaro redakcinės komandos, sutelktos į praktišką ir lengvai suprantamą pagalbą.
Kaip nustatyti CSS kintamuosius
Pradėti naudoti CSS kintamuosius labai paprasta. Juos nustatote naudodami dvitaškį ir kintamojo pavadinimą. Dažniausiai tai darote :root bloke, kad kintamieji būtų prieinami visoje svetainėje.
Pavyzdžiui, jei norite nustatyti pagrindinę spalvą, parašote:
--color-primary: #d946ef;
Tada, kur nors kitoje CSS dalyje, galite tai naudoti:
background: var(--color-primary);
Kintamojo pavadinimas pradedamas dviem brūkšneliais. Jei turite spalvų šeimą — svarbu jas logiškai pavadinti. Mes naudojame šiuos modelius: --color-primary , --color-secondary , --color-bg-dark , --color-text-light . Tokia struktura padeda suprasti, ką kintamasis atlieka.
Temų perjungimas su CSS kintamaisiais
Temų perjungimas — tai vienas iš labiausiai populiarių CSS kintamųjų panaudojimo būdų. Vietoj to, kad turėtumėte du skirtingus stilylapius (vieną šviesiam režimui, vieną tamsiajam), galite tiesiog pakeisti kintamųjų reikšmes.
Čia yra strategija: kuriate pagrindinį :root su spalvomis tamsiajam režimui. Tada, kai vartotojas perjungia į šviesą, naudojate CSS klasę arba atributą, kuris perrašo tuos kintamuosius naujomis spalvomis. Jei naudojate
.light-theme
klasę, galite apibrėžti:
.light-theme {
--color-bg: #ffffff;
--color-text: #000000;
--color-primary: #3b82f6;
}
Dabar jūsų HTML neturi keistis. Tik pakeičiate klasę element, ir visi CSS kintamieji automatiškai atsinaujina.
Susiję straipsniai
Tęskite savo mokymąsi apie tamsų režimą ir temų valdymą
Operacinės sistemos nustatymuose pagrįstas tamsus režimas
Kaip naudoti prefers-color-scheme medijos užklausą, kad jūsų svetainė automatiškai prisitaikytų prie sistemos nustatymų.
Prieinamumas ir kontrastas tamsaus režimo dizaine
Svarbi tema, kurią dažnai pamiršta kūrėjai. Šis straipsnis paaiškina, kaip pasirinkti spalvas, kurios gerų skaitomas tiek šviesame, tiek tamsiame režime.
Informacinė pastaba
Šis straipsnis yra skirtas edukaciniams tikslams ir suteikia bendrą supratimą apie CSS kintamuosius bei temų perjungimą. Kiekvienas projektas gali turėti skirtingus reikalavimus ir iš jų plaukiančias iš to išplaukiančias technines sprendimus. Jei kūriate sudėtingą sistemą, rekomenduojame pasitarti su patyrusia komanda ir testuoti jūsų sprendimą su įvairiais peržiūros programomis bei įrenginiais.
Išvados
CSS kintamieji yra galinga priemonė, kuri padarė temų perjungimą daug paprastesniu ir efektyvesniu. Jie suteikia jums galimybę valdyti didelę dalį jūsų svetainės stilių iš vienos vietos. Nereikia rūpintis HTML pasikeitimu — tik atnaujinate CSS reikšmes.
Pradėkite nuo to, kad apibrėžtumėte pagrindinį spalvų paletę :root bloke. Tada naudokite var() funkcijas savo elementuose. Kai būsite paruošę temų perjungimą, galite arba naudoti JavaScript, arba pasikliauti operacinės sistemos nustatymais naudodami prefers-color-scheme. Abiem atvejais, CSS kintamieji padės jums palikti kodą švariu ir lengvai prižiūrimą.
Kitas žingsnis? Sužinokite, kaip išsaugoti vartotojo temą naudojant localStorage arba kaip integruoti prefers-color-scheme medijos užklausą. Kiekvienas metodas turi savo privalumus, ir jūs galite juos kombinuoti, kad gautumėte geriausią vartotojo patirtį.