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!