Skip to main content

Tmavý režim

WebJET Elements už obsahuje pripravený tmavý motív v súbore dark.css. Ak spolu načítate light.css aj dark.css, tmavý režim aktivujete iba prepnutím vhodného selektora na dokumente alebo kontajneri.

Podporované selektory​

Vstavaný tmavý motív reaguje na tieto selektory:

  • .dark
  • .wje-theme-dark
  • [data-theme="dark"]

Svetlý motív používa paralelne:

  • .light
  • .wje-theme-light
  • [data-theme="light"]

Základné zapojenie​

<link rel="stylesheet" href="/wje-elementy/styles.css" />
<link rel="stylesheet" href="/wje-elementy/light.css" />
<link rel="stylesheet" href="/wje-elementy/dark.css" />

Potom môžete tému prepínať napríklad cez data-theme:

document.documentElement.dataset.theme = 'dark';
// alebo:
document.documentElement.dataset.theme = 'light';

Prepínanie podľa preferencie systému​

Ak chcete rešpektovať systémové nastavenie používateľa, použite prefers-color-scheme:

const media = window.matchMedia('(prefers-color-scheme: dark)');

const applyTheme = () => {
  document.documentElement.dataset.theme = media.matches ? 'dark' : 'light';
};

applyTheme();
media.addEventListener('change', applyTheme);

Úprava systémového UI​

Pri tmavom režime sa oplatí nastaviť aj color-scheme, aby sa správne vykresľovali napríklad formulárové prvky alebo scrollbar:

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

Alebo priamo cez CSS:

html {
  color-scheme: light dark;
}

Vlastný dark theme override​

Ak vám vstavaný tmavý motív nestačí, pridajte vlastné prepísania nad jeho tokeny:

[data-theme='dark'] {
  --wje-background: #0b1220;
  --wje-color: #e5e7eb;
  --wje-border-color: #334155;

  --wje-card-background: #111827;
  --wje-card-color: #f8fafc;
}

Takto zachováte kompatibilitu s komponentmi a zároveň si doladíte vzhľad podľa potreby.

Odporúčania​

  • Načítajte vždy light.css aj dark.css, ak plánujete prepínanie tém za behu.
  • Vlastné úpravy robte cez CSS tokeny, nie cez hlboké prepisovanie interných selektorov komponentov.
  • Otestujte kontrast textu, hover/focus stavy a formulárové prvky v oboch režimoch.

Súvisiace témy​

Content