Tmavý vzhled v CSS

V operačním systému si uživatel může nastavit, že preferuje tmavý vzhled. Ne webu to můžeme zohlednit ve stylu:

body { background: white; color: black; /* plus všechny další styly */ }
@media (prefers-color-scheme: dark) { /* měníme jen barvy */
	body { background: #111; color: #eee; }
}

No tak to bylo jednoduché! Od roku 2024 jde použít i funkce light-dark:

body { background: light-dark(white, #111); color: light-dark(black, #eee); }

Když se k tomu přidají CSS proměnné, tak je to úplná pohádka:

:root {
	--bg-color: white;
	--text-color: black;
}

@media (prefers-color-scheme: dark) {
	:root {
		--bg-color: #111;
		--text-color: #ccc;
	}
}

/* teď máme styl pěkně pohromadě a stejnou barvu můžeme použít na víc místech */
body { background: var(--bg-color); color: var(--text-color); }

Ovšem poněkud se to komplikuje, pokud máte nějaké závislosti, které na tmavý vzhled připravené nejsou, nebo pokud někdo závisí na vás. Zvýrazňovač syntaxe je jako mezi mlýnskými kameny. Potřeboval by si nastavit barvu pozadí, což je v pohodě u bloků, ale vypadá to blbě u inline kódu – barvu pozadí je v takovém případě lepší zachovat. V takové situaci je lepší styl rozdělit do dvou souborů:

/* default.css */
body { background: white; color: black; /* plus všechny další styly */ }

/* dark.css - měníme jen barvy */
body { background: #111; color: #eee; }

A stránka si pak řekne, který styl chce použít, a zda natvrdo, nebo podmíněně:

<link rel="stylesheet" href="default.css">
<link rel="stylesheet" href="dark.css"><!-- natvrdo -->
<link rel="stylesheet" media="(prefers-color-scheme: dark)" href="dark.css"><!-- podmíněně -->

Pokud má uživatel nastavený světlý vzhled, tak se stahuje míň dat. Ale pokud má nastavený tmavý, tak se kladou dva požadavky.

Pomocí color-scheme bychom operačnímu systému měli říct, jaké vzhledy podporujeme, a on nám pak dodá odpovídající formulářová políčka: <meta name="color-scheme" content="light dark">.

Adminer má situaci zapeklitou. Chci, aby sám od sebe fungoval při světlém i tmavém nastavení včetně zvýrazňování syntaxe. Ale uživatelé si pomocí adminer.css můžou definovat vlastní styl. V takovém případě na výchozí tmavý vzhled přepínat nechci, protože uživatelské styly na to nejsou připravené (mění většinou jen některé barvy, ne všechny). No pak ale zase existují tmavé styly, pro které chci zapnout aspoň tmavé zvýrazňování syntaxe. Jak jsem to vyřešil? Kromě adminer.css se nově hledá i soubor adminer-dark.css, který by měl používat tmavé styly. Dále je rozhodování takovéto:

  1. Nalezl se adminer.css i adminer-dark.css? Použij automatické přepínání podle operačního systému se všemi styly.
  2. Nalezl se pouze adminer.css? Použij jako základ světlý styl Admineru a světlý styl zvýrazňování syntaxe.
  3. Nalezl se pouze adminer-dark.css? Použij jako základ tmavý styl Admineru a tmavý styl zvýrazňování syntaxe.
  4. Nenalezl se ani jeden? Použij automatické přepínání podle operačního systému.

Takový vedlejší efekt toho je, že pokud vytvoříte prázdný soubor adminer-dark.css, tak bude Adminer v tmavém vzhledu nehledě na nastavení OS. Manuální přepínání vzhledu jsem přidal jako plugin.

Jakub Vrána, Seznámení s oblastí, 15.3.2025, diskuse: 0 (nové: 0)

Vložit komentář

Používejte diakritiku. Vstup se chápe jako čistý text, ale URL budou převedeny na odkazy a PHP kód uzavřený do <?php ?> bude zvýrazněn. Pokud máte dotaz, který nesouvisí s článkem, zkuste raději diskusi o PHP, zde se odpovědi pravděpodobně nedočkáte.

Jméno: URL:

avatar © 2005-2025 Jakub Vrána. Publikované texty můžete přetiskovat pouze se svolením autora. Ukázky kódu smíte používat s uvedením autora a URL tohoto webu bez dalších omezení Creative Commons. Můžeme si tykat. Skripty předpokládají nastavení: magic_quotes_gpc=Off, magic_quotes_runtime=Off, error_reporting=E_ALL & ~E_NOTICE a očekávají předchozí zavolání mysql_set_charset. Skripty by měly být funkční v PHP >= 4.3 a PHP >= 5.0.