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í

Section titled “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

Section titled “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

Section titled “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

Section titled “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