Rychlost.cz Články Rychlost.cz v novém (tmavém) kabátě: Návod na implementaci tmavého režimu pro web

Rychlost.cz v novém (tmavém) kabátě: Návod na implementaci tmavého režimu pro web

02.11.2020

Web Rychlost.cz získal nový tmavý vzhled. Uvidí ho však primárně jen ti, kteří mají na počítači nastavenou preferenci tmavého designu nebo na mobilním telefonu aktivovaný tmavý (noční) režim. Na první pohled nejde o žádný velký redesign. Tato funkce však usnadní život zejména nočním tvorům, které pod rouškou tmy bílé nastavení oslňuje. Přináším vám návod, jak tmavý režim aktivovat i na vašem webu.

Tmavý režim používá kolem 20 % návštěvníků. Usnadněte jim čtení

Smyslem této změny je nabídnout uživatelům příjemné uživatelské prostředí. Procházet světlý web na telefonu nebo desktopu s tmavým schématem není zrovna příjemné, což po vlastním testování mohu jedině potvrdit. Podle interních statistik používá přibližně 20 % návštěvníků zařízení s preferencí tmavého designu. To rozhodně není zanedbatelné procento. O to překvapivější je, že ve velkém rybníku českých webů je jen minimum těch, které by s možností přepnutí do tmavého režimu počítaly.

Zahraniční weby (ale také mobilní aplikace) jsou v tomto ohledu napřed. Takzvaný Dark Mode dnes nativně nabízí třeba WhatsApp, Instagram, Messenger nebo Facebook Lite a po redesignu i desktopová verze Facebooku. Stejně jako implementace responzivního webu a důrazu na rychlost může být právě podpora tmavého designu důležitým krokem na cestě k uživatelsky přívětivému prostředí. Je na každém provozovateli webu, aby zvážil, zda pro něj má taková funkce větší význam. Statistiky návštěvnosti však jasně ukazují, že tmavý režim využívá víc uživatelů, než se na první pohled zdá.

Jak na web přidat možnost tmavého zobrazení?

Samotná implementace tmavého režimu je relativně snadná. Samozřejmě je potřeba mít někde v šuplíku připravený design – k tomu stačí pouhé „přetížení“ CSS stylů. Změna HTML kódu by pro tento účel byla velmi nešťastným řešením.

Pokud již máte hotový CSS soubor, nabízí se v zásadě dvě možnosti. Buď budete mít pro každé schéma samostatný CSS soubor, nebo si připravíte jeden základní pro světlý design. K němu pak připravíte tmavou variantu, která jen přepíše odlišné hodnoty (barvy).

V HTML hlavičce (HEAD) uveďte element:

<meta name="color-scheme" content="light dark">

Jde o informaci pro internetový prohlížeč, byť s ní tuto chvíli zřejmě příliš nepracuje. Dá se však očekávat, že v budoucnu bude na základě této informace webový prohlížeč sám nabízet tlačítko na ruční změnu barevného schématu. To bude platit samozřejmě jen u webových stránek, které ji budou podporovat.

Mnohem důležitější je však do HTML hlavičky uvést informaci o tom, kde se CSS soubor s tmavým schématem nachází:

<link id="css-darkmode" rel="stylesheet" type="text/css" href="/cesta-k-tmavemu-css-souboru.css" media="(prefers-color-scheme: dark)" />

Stejně jako například pro media=”print” (pro tiskový CSS) se zde uvede media=”(prefers-color-scheme: dark)”.

Sami posuďte, jestli webu Rychlost.cz tmavá sluší

Pokud si chcete porovnat rozdíl mezi světlým a tmavým zobrazením webu Rychlost.cz, nemusíte nutně měnit nastavení operačního systému nebo spouštět noční režim na telefonu. Stačí, když v dolní části stránky klikne na „Ruční přepnutí tmavého a světlého vzhledu“. Sami posuďte, které barevné schéma je pro vás uživatelsky přívětivější.

Světlá verze

Tmavá verze

S jakými problémy při implementaci počítat?

Jedním ze základních problémů je nemožnost stylování některých formulářových prvků. V případě webu Rychlost.cz šlo o výběrové tlačítko (SELECT). Tento problém se však se dá obejít přepisem SELECTu přes Javascript.

Možnost ručního přepínání – ano, nebo ne?

Nabízí se otázka, zda uživatelům nabídnout možnost manuálního přepnutí webu z tmavé do světlé a naopak, a to bez nutnosti změny globálního nastavení. V případě zcela nového webu by to zřejmě nutné nebylo. Pokud se však jedná o web se stálými uživateli, kteří jsou na původní vzhled zvyklí, je dobré jim takovou možnost nabídnout. Možná se najdou tací, kteří i při zapnutém tmavém módu budou chtít vidět web v klasickém bílém hávu.

K manuálnímu přepínání slouží javascript v dolní části stránky a uložení stavu do localstorage:

<script type='text/javascript'>

function ntmt_ld_theme_switch() {
	
	if (ntmtSiteVars['theme_active']=='light') {

		ntmtSiteVars['theme_active']=ntmtSiteVars['theme_forced']='dark';
			
		document.getElementById('css-darkmode').setAttribute('media', 'all');
		document.getElementById('css-darkmode').disabled=false;
		
		
	} else {
		
		ntmtSiteVars['theme_active']=ntmtSiteVars['theme_forced']='light';
	
		document.getElementById('css-darkmode').setAttribute('media', 'not all');
		document.getElementById('css-darkmode').disabled=true;
	}

	localStorage.setItem('theme_forced', ntmtSiteVars['theme_active']);	
}

</script>
<div class="d-dmode-sw-bottom"><button onclick="ntmt_ld_theme_switch();">Ruční přepnutí tmavého a světlého vzhledu</button></div>

V HEAD části stránky se musí tento stav také projevit čtením proměnné z local storage a přidáním ID pro tmavý CSS soubor s ID rovno “css-darkmode”.

<script type='text/javascript'>

ntmtSiteVars['theme_forced']='';

if (localStorage.getItem('theme_forced')=='light' || localStorage.getItem('theme_forced')=='dark') {
	ntmtSiteVars['theme_forced']=localStorage.getItem('theme_forced');
}

if (ntmtSiteVars['theme_forced']!='') {
		
	if (ntmtSiteVars['theme_forced']=='dark') {
	
		document.getElementById('css-darkmode').setAttribute('media', 'all');
		document.getElementById('css-darkmode').disabled=false;	
	} else {
		
		document.getElementById('css-darkmode').setAttribute('media', 'not all');
		document.getElementById('css-darkmode').disabled=true;
	}
}
</script>

Jedná se o příkladovou implementaci, která popisuje princip nastavení. Je na každém, jak se s manuálním přepínáním režimů vypořádá a jaký postup reálně uplatní.

Sám jsem zvědavý, bude-li v budoucnu možnost tmavého zobrazení standardní funkcionalitou webů. Na to si však budeme muset zřejmě ještě chvíli počkat. Pokud sami noční režim na svých zařízeních využíváte a z plejády webů na bílém podkladu vás bolí hlava, zkuste si do prohlížeče nainstalovat rozšíření, které dokáže ztmavit jakýkoliv web. Existuje jich hned několik.

Autor článku: Redakce