Responzivní barevnost webů s prefers-color-scheme

Má uživatel operační systém v tmavých barvách? Stačí mít barevnost postavenou na proměnných a celý web můžeme na přání návštěvníka přebarvit také.

Apple nám do posledního Safari pro vývojáře přidal novou podmínku prefers-color-scheme, která navazuje na dark mode zavedený v macOS Mojave. Bezesporu se jedná o další krok v responzivním kódování, ostatně i zde je potřeba použít @media.

macOS Mojave: prefers-color-scheme v akci

prefers-color-scheme v akci

Sůl nad zlato, příklad nad teorii

Ve stylech tohoto blogu jsou použity pouze čtyři barvy. Hned z kraje CSS mám každou z nich zakotvenou jako proměnnou:

:root {
--body-bg: hsl(0, 0%, 98%);
--borders: hsl(0, 0%, 93%);
--text: hsl(0, 0%, 30%);
--highlight: hsl(0, 0%, 8%);
}

To je samozřejmě výhoda, i kdybych se nechystal využít prefers-color-scheme. Barvy stačí hlídat na jednom místě a mám jistotu, že se změny projeví plošně. Pro dynamické přebarvení celé šablony tak není potřeba mnoho. Stačí zkopírovat definovanou barevnost hned za tu původní, obalit ji do nové podmínky a změnit dle preferencí:

@media (prefers-color-scheme: dark) {
:root {
--body-bg: hsl(0, 0%, 10%);
--borders: hsl(0, 0%, 15%);
--text: hsl(0, 0%, 60%);
--highlight: hsl(0, 0%, 98%);
}}

Ještě… ne

Z mé strany se zatím jedná o pouhou zkoušku, upravenou šablonu jsem nicméně pověsil ven rovnou. Chcete-li se do toho vrhnout po hlavě také, musíte si stáhnout Safari Technology Preview. Novinka ještě není jinde k dispozici.

Otázkou je, nakolik (a jestli vůbec) se tato funkce rozšíří. V současné době to nemá vůbec cenu řešit, podpora je v podstatě nulová. S případným přidáním do iOS by však mohlo dojít ke zvratu.


A mimochodem, Dark theme in a day (Marcin Wichary) je, co se responzivní barevnosti obecně týká, velmi přínosný článek!