Žinai tą momentą, kai atsidarai svetainę 23 valandą, visiškoje tamsoje, ir BAM – šviesa tiesiai į akis ? Jo, mums irgi taip buvo. Būtent todėl tamsusis režimas šiandien praktiškai tapo standartu. Rimtai, jei tavo svetainė 2025 metais vis dar neturi tamsiojo režimo, tikėtina, kad naudotojai šiek tiek (ar net labai) supyks.
Taigi, kaip švariai įgyvendinti tą tamsųjį režimą CSS’e ? Štai čia mes viską išnarpliosim, žingsnis po žingsnio, be bereikalingų kalbų.
Kodėl verta siūlyti tamsųjį režimą?
Na, visų pirma – tai ne tik dėl to, kad „atrodo kietai“ (nors, pripažinkim, atrodo tikrai gerai). Tamsusis režimas yra :
- patogesnis akims tamsioje aplinkoje
- gali sumažinti energijos suvartojimą OLED ekranuose (taip, tikrai)
- tikras naudotojų lūkestis – daugelis jį įjungia kaip numatytą
Ir, tarp mūsų kalbant, tai dar ir pliusas prie prieinamumo bei asmeninio pritaikymo. Nauda visomis prasmėmis.
Pagrindinis dalykas : media query prefers-color-scheme
Tai yra CSS perlas, leidžiantis nustatyti, ar naudotojas pageidauja šviesaus ar tamsaus režimo. Jau keletą metų visi pagrindiniai naršyklės tai puikiai palaiko (Chrome, Firefox, Safari, Edge… visi žaidime).
Štai bazinis pavyzdys :
@media (prefers-color-scheme : dark) {
body {
background-color : #121212;
color : #f5f5f5;
}
}
Paprasta, efektyvu. Su tuo tavo svetainė automatiškai prisitaiko prie naudotojo sistemos nustatymų. Magija ? Ne. Tiesiog geras sprendimas.
Du galimi būdai : automatinis vs rankinis
1 variantas : automatinis prisitaikymas
Tiesiog pasitiki prefers-color-scheme. Jei naudotojas savo OS nustato tamsųjį režimą, tavo svetainė prisitaiko automatiškai.
2 variantas : leisti naudotojui pasirinkti
Šitas – mano mėgstamiausias. Kombinuojam media query su JavaScript logika, kad naudotojas galėtų pats rinktis.
Klasikinis (ir naudingas) pavyzdys :
// Išsaugoti pasirinkimą localStorage
const toggleTheme = () => {
const current = document.documentElement.getAttribute("data-theme");
const next = current === "dark" ? "light" : "dark";
document.documentElement.setAttribute("data-theme", next);
localStorage.setItem("theme", next);
};
O CSS’e darom kažką panašaus :
:root[data-theme="dark"] {
--bg-color : #121212;
--text-color : #f5f5f5;
}
body {
background-color : var(--bg-color);
color : var(--text-color);
}
Supranti principą? Ir su CSS kintamaisiais viskas tampa labai lengvai valdomi. Pakeiti spalvą vienoje vietoje – viskas automatiškai prisitaiko. Tvarkinga.
Ar reikia perrašyti visą CSS? (spoileris : ne)
Tai klausimas, kuris dažnai iškyla : „ar turiu dubliuoti visą CSS dėl tamsaus režimo ?“. Atsakymas – ne. Tikrai nereikia visko kurti iš naujo, nusiramink.
Protingiausia strategija – nuo pat pradžių organizuoti temas su CSS kintamaisiais :
:root {
--bg-color : #fff ;
--text-color : #111;
}
@media (prefers-color-scheme : dark) {
:root {
--bg-color : #121212;
--text-color : #f5f5f5;
}
}
Tada šiuos kintamuosius naudok visur : fonams, tekstui, rėmeliams, nuorodoms… Galiausiai turėsi vieną tvarkingą CSS failą, o temos keisis automatiškai.
Klaidos, kurių reikėtų vengti (ir pats į kai kurias pakliuvau)
Keletas dalykų, kuriuos verta turėti omeny, nes pirmą kartą dažnai kažkur paslystam :
- Vaizdai: atsargiai su per šviesiais logotipais ar iliustracijomis. Geriau pasiruošti tamsias versijas arba naudoti SVG su dinaminėmis spalvomis.
- Kontrastai: įsitikink, kad tekstas išlieka skaitomas net ir tamsiame fone. Naudok tokius įrankius kaip color-contrast-checker, jie gali išgelbėti nuo nesąmonių.
- Testavimas: aktyvuok tamsųjį režimą savo naršyklėje ir OS, ištestuok viską iki galo. Ir būtinai pažiūrėk per mobilų! Ten kartais viskas atrodo kitaip.
Papildomai : super paprastas dark/light perjungiklis
Mygtukas svetainės kampe ? Naudotojai dažnai tai vertina labiau nei galvoji. Kažkas tokio :
< ;button onclick="toggleTheme()"> ;🌙 / ☀️< ;/button> ;
Ir viskas – naudotojas turi kontrolę, nepriklausomai nuo savo sistemos. Man asmeniškai tai atrodo pagarbesnis sprendimas (ir šiek tiek smagiau).
Išvada : tamsusis režimas – taip, bet daryk jį gerai
Tamsusis režimas – tai ne šiaip užgaida. Tai tikras naudotojų poreikis, komforto pagerinimas, ir proga parodyti, kad tau rūpi detalės.
Tai ką, dar nebandai ? Tikrai nėra taip sudėtinga, ypač su šiuolaikiniais įrankiais. Ir rimtai, efektas kai tavo svetainė švelniai pereina į tamsų režimą – visada palieka įspūdį. Eksperimentuok, žaisk ir svarbiausia – pasirūpink, kad viskas išliktų malonu skaityti.
O tu – kuri režimą labiau mėgsti dirbdamas : šviesų ar tamsų? 👀