Přeskočit na obsah
Spectro

Témata

Spectro disponuje podporu dvou témat - světlé a tmavé. S barvami je potřeba v obou z nich zacházet odlišně. Tlumené pozadí je ve světlém tématu světlé, v tmavém zase tmavé. Stejně tak barva textů se z principu musí výrazně lišit. Stejně tak v tmavém režimu je vhodné pro lepší dojem mírně snížit saturaci.

Srovnání

Níže jsou ukázány často využívané tokeny při stylování aplikace. Všimněte si, že některé povrchy, například Surface Control a Surface Control Variant, mají ve světlém tématu totožnou barvu, ale ve tmavém se již odlišují.

Image one
Image two
Neutrální povrchy
Image one
Image two
Modrý povrch a jeho důrazy
Image one
Image two
Ukázky status povrchů
Image one
Image two
Neutrální texty

Pevné téma

Komponentu je možné zobrazovat vždy stejně bez ohledu na zvolené téma. Přidejte data-theme atribut s názvem tématu, o vše ostatní se postará CSS.

Image one
Image two
App.jsx
<FooComponent theme="light" text="I'm shining" />
<FooComponent theme="dark" text="The dark side" />
FooComponent.jsx
const FooComponent = (theme, text) => {


  return (
    <foo-component
      data-theme={theme}
    >
      {text}
    </foo-component>
  )
}


export default FooComponent
Image one
Image two
Somewhere.less
html {
  color: var(--text-primary)
}
FooComponent.less
foo-component {
  --foo-bg: var(--surface-control);
  /* Chybí definice barvy textu */
  /* Po změně tématu komponenty zůstane barva z tématu na <html> */


  background-color: var(--foo-bg);
}

Inverze tématu

Téma komponenty je možné zcela obrátit. Princip je naprosto totžný jako při volbě pevného tématu, tentokrát stačí nastavit data-theme="inverted".

Image one
Image two
App.jsx
<FooComponent theme="inverted" text="The rebel" />
FooComponent.jsx
const FooComponent = (theme, text) => {


  return (
    <foo-component
      data-theme={theme}
    >
      {text}
    </foo-component>
  )
}


export default FooComponent

CSS pod pokličkou

Nevyužíváme automatického @media (prefers-color-scheme) pravidla, ale spoléháme na data-theme atribut, který je plněn pomocí skriptu. To s sebou nese několik výhod:

  • Volitelné přepnutí tématu pomocí tlačítka
  • Možnost pevného tématu na komponentě
  • Možnost invertovat téma na komponentě
  • Úspora řádků v spectro-theme.css
spectro-theme.css
/* Zapnutí světlého tématu */


:root,
[data-theme$="light"]:where(:not(:root)),
:where(:root[data-theme$="dark"] [data-theme="inverted"]) {
    color-scheme: light;
}


/* Zapnutí tmavého tématu */


:root[data-theme$="dark"],
[data-theme$="dark"]:where(:not(:root)),
:where(:root[data-theme$="light"] [data-theme="inverted"]) {
    color-scheme: dark;
}


/* Tokeny */


:root {
  /* Globální */
  --base: 8px;
  --radius: 6px;


  /* Globální reagující na téma */
  --_text-blue_light: oklch(49% 0.2 250);
  --_text-blue_dark: oklch(77% 0.18 250);
  --text-blue: light-dark(var(--_text-blue_light), var(--_text-blue_dark));


  /* Sémantické reagující na téma */
  --text-brand-primary: var(--text-blue);
}

Na první pohled vypadá zápis zřetězených selektorů kompikovaně, ale po rozebrání ne jednotlivé selektory dává logiku. Spíše se však jedná o technickou zajímavost, pro využívání Spectra není potřeba znát selektory do hloubky.

Selektory pro dokument, v HTML se jedná o <html> element:

  • :root - dokument
  • :root[data-theme$="light"] - dokument ve světlém tématu
  • :root[data-theme$="dark"] - dokument v tmavém tématu

Selektory pro elementy (kompnenty):

  • [data-theme$="light"]:where(:not(:root)) - element ve světlém tématu, který není dokumentem
  • [data-theme$="dark"]:where(:not(:root)) - element v tmavém tématu, který není dokumentem
  • :where(:root[data-theme$="dark"] [data-theme="inverted"]) - element, který chci na dokumentu s tmavým tématem invertovat
  • :where(:root[data-theme$="light"] [data-theme="inverted"]) - element, který chci na dokumentu se světlým tématem invertovat