Čo je Dark mode (Tmavý režim)?
Dark mode je farebná schéma, ktorá používa svetlý text a prvky na tmavom pozadí. Znižuje únavu očí pri slabom osvetlení, šetrí batériu na <a href="https://en.wikipedia.org/wiki/OLED" target="_blank" rel="noopener noreferrer">OLED</a> displejoch a mnohí používatelia ho považujú za vizuálne príjemnejší.
Definícia Dark mode
Definícia dark mode
Dark mode (po slovensky tmavý režim, tiež night mode alebo dark theme) je farebná schéma, ktorá používa svetlý text, ikony a grafické prvky na tmavom pozadí. Je opakom tradičného „light mode" (tmavý text na svetlom pozadí), ktorý napodobňuje tlačený papier.
Prvé počítačové terminály (60.-80. roky) zobrazovali svetlý text na tmavom pozadí — to bol pôvodne jediný režim. S príchodom GUI (grafických rozhraní) sa presadil light mode. Dark mode sa masovo vrátil okolo roku 2018-2019, keď ho implementovali veľké platformy.
Kto podporuje dark mode
- Apple: macOS Mojave (2018) a iOS 13 (2019) priniesli systémový dark mode
- Google: Android 10 (2019) pridal natívnu podporu tmavého režimu
- Microsoft: Windows 10 podporuje dark mode od roku 2016
- Webové prehliadače: Chrome, Firefox, Safari — všetky podporujú CSS media query
prefers-color-scheme: dark
Výhody a nevýhody
- Zníženie únavy očí — pri slabom osvetlení je tmavý režim príjemnejší na oči, pretože displej vyžaruje menej svetla
- Úspora batérie — na OLED displejoch tmavé pixely spotrebovávajú menej energie. Zobrazenie bielej na plný jas spotrebuje približne 6-krát viac energie ako čierna (merané na Google Pixel 2016).
- Estetika — mnohí používatelia považujú tmavý režim za modernejší a vizuálne príťažlivejší
- Prístupnosť — niektorí ľudia s poruchami zraku (napr. citlivosť na svetlo) preferujú dark mode
- Nevýhoda: dlhý text sa v dark mode číta ťažšie — čitateľnosť môže klesnúť pri veľkom objeme textu
Praktický príklad
Príklad: Webstránka dizajnérskeho štúdia.
Štúdio ponúkne návštevníkom prepínač svetlý/tmavý režim v pravom hornom rohu. Web automaticky detekuje preferenciu systému návštevníka pomocou CSS prefers-color-scheme.
Svetlý režim: Biely podklad, tmavosivý text, modrý accent — čistý, profesionálny dojem pre denné prehliadanie.
Tmavý režim: Tmavosivý podklad (#1A1A2E), biely text, fialový accent — elegantný dojem pre večerné prehliadanie.
Výsledok: Návštevníci strávia na stránke dlhšie, pretože si môžu vybrať režim, ktorý im vyhovuje.
Často kladené otázky
Čo je dark mode?
Dark mode (tmavý režim) je farebná schéma s svetlým textom na tmavom pozadí. Je opakom štandardného zobrazenia s tmavým textom na bielom pozadí.
Šetrí dark mode batériu?
Na OLED displejoch áno — tmavé pixely spotrebovávajú menej energie. Na LCD displejoch úspora batérie minimálna, pretože podsvietenie svieti stále rovnako.
Je dark mode lepší pre oči?
Pri slabom osvetlení (večer, v tme) je dark mode príjemnejší, pretože displej vyžaruje menej svetla. Pri čítaní dlhých textov je však svetlý režim zvyčajne čitateľnejší.
Ako pridať dark mode na webstránku?
Pomocou CSS media query @media (prefers-color-scheme: dark) detekujete preferenciu systému návštevníka. Potom definujete alternatívne farby pre tmavý režim pomocou CSS premenných.
Mala by mať každá webstránka dark mode?
Nie nutne — závisí od cieľovej skupiny a typu obsahu. Pre tech stránky a aplikácie je dark mode takmer povinnosťou. Pre informačné stránky a blogy je to príjemný bonus.
Súvisiace pojmy
Potrebujete pomôcť s webom?
Napíšte mi a poradím vám s vaším projektom. Prvá konzultácia je zadarmo a nezáväzná.