Detekce dark mode v CSS pomocí prefers-color-scheme

V poslední době se dark mode (tmavý režim) těší čím dál větší oblibě. Uživatelé mají možnost si nastavit preferované vizuální schéma přímo ve svém zařízení, od mobilu, přes tablet, počítače s Windows až po MAC zařízení. Pokud Váš web podporuje (nebo chcete aby podporoval) světlý i tmavý režim, může se hodit detekce uživatelského nastavení přímo v CSS.

Jak detekovat nastavení preference dark mode

Pro detekci nastavení preferovaného schématu můžeme použit CSS media query, které určitě používáte i pro detekci jiných vlastností (typicky šířka okna pro responzivní přizpůsobení). V tomto případě použijeme konkrétně vlastnost prefers-color-scheme.

Media query prefers-color-scheme pro detekci light / dark mode

Na příkladu CSS kódu níže můžete detekci dark i light mode. Díky tomu můžeme upravit barevnost našeho uživatelského prostředí a přizpůsobit ho uživatelovým preferencím.

Na ukázce jsme přizpůsobili dvě tlačítka, jedno světlé a druhé tmavé. Pokud má uživatel zapnutý tmavý režim, světlé tlačítko bude tmavé a tmavé tlačítko bude ještě tmavší. V případě light mode tomu bude obráceně, budeme tedy zesvětlovat.

Podpora CSS perefers-color-scheme

V době psaní článku je podpora prohlížečů 84,23%. Použití se ale určitě bát nemusíme, jedná se přeci jen spíše o benefit pro uživatele, kdy dokážeme automaticky detekovat jeho nastavení zařízení. Pokud podporujeme světlý i tmavý režim, vždy by na webu měla být možnost manuálního přepínání.