V posledních letech se temný mód stal jednou z nejoblíbenějších funkcí v digitálních produktech a webových aplikacích. Umožňuje uživatelům přepínat mezi světlým a tmavým vzhledem rozhraní, což může zlepšit čitelnost v nízkých světelných podmínkách a snížit spotřebu energie na zařízeních s OLED displeji. Tento článek popisuje, jak implementovat temný mód na webové stránce pomocí Cascading Style Sheets (CSS) a preferencí systému uživatele.
Použití mediálních dotazů pro detekci preferencí uživatele
Základním kamenem pro implementaci temného módu je CSS mediální dotaz prefers-color-scheme. Tento mediální dotaz umožňuje webům dotázat se prohlížeče, zda uživatel preferuje světlý nebo tmavý vzhled, a upravit styl stránky podle této preference.
@media (prefers-color-scheme: dark) {
/* CSS pravidla pro temný mód */
}
@media (prefers-color-scheme: light) {
/* CSS pravidla pro světlý mód */
}
Definice barevného schématu
Při implementaci temného módu je důležité pečlivě zvolit barevné schéma, které bude pohodlné pro oči ve tmavém prostředí. Obecně by se mělo použít jemnější a tmavší pozadí s kontrastnějšími texty.
Příklad základního CSS pro temný mód:
body {
background-color: #FFFFFF; /* Světlé pozadí pro světlý mód */
color: #000000; /* Tmavý text pro světlý mód */
}
@media (prefers-color-scheme: dark) {
body {
background-color: #121212; /* Tmavé pozadí pro temný mód */
color: #E0E0E0; /* Světlý text pro temný mód */
}
}
Přepínání módu pomocí JavaScriptu
Pro ještě větší flexibilitu můžete umožnit uživatelům přepínat mezi světlým a tmavým módem ručně pomocí JavaScriptu. To může být realizováno přepínáním tříd na hlavním elementu <body> a ukládáním preference uživatele do localStorage.
Implementace temného módu není jen o estetice; je to také otázka uživatelské přívětivosti a energetické efektivity. Použitím CSS mediálních dotazů prefers-color-scheme a pečlivým výběrem barev můžete poskytnout uživatelům možnost přizpůsobit si vzhled vaší Webové stránky pro jejich komfort a preference. Kombinací CSS a JavaScriptu lze dosáhnout ještě větší kontroly a flexibility při implementaci této populární funkce.
