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í.

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.

<FooComponent theme="light" text="I'm shining" />
<FooComponent theme="dark" text="The dark side" />

const FooComponent = (theme, text) => {

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

export default FooComponent

<foo-component data-theme="light">I'm shining</foo-component>
<foo-component data-theme="dark">The dark side</foo-component>

foo-component {
  --foo-bg: var(--surface-control);
  --foo-color: var(--text-primary);

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

html {
  color: var(--text-primary)
}

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".

<FooComponent theme="inverted" text="The rebel" />

const FooComponent = (theme, text) => {

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

export default FooComponent

<foo-component data-theme="inverted">The rebel</foo-component>

foo-component {
  --foo-bg: var(--surface-control);
  --foo-color: var(--text-primary);

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

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

:root {

  /* Tokeny nezávislé na tématu */
  /* Např. barvy palety nebo zaoblení */

}

:root,
[data-theme$="light"]:not(:root),
:is(:root[data-theme$="dark"] [data-theme="inverted"]) {

  /* Tokeny pro světlé téma */

}

:root[data-theme$="dark"],
[data-theme$="dark"]:not(:root),
:is(:root[data-theme$="light"] [data-theme="inverted"]) {

  /* Tokeny pro tmavé téma */

}

:root,
[data-theme]:not(:root) {

  /* Tokeny funkčních barev, povrchů a textů */

}

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
:root[data-theme$="dark"] - dokument v tmavém tématu

Selektory pro elementy (kompnenty):

[data-theme]:not(:root) - element měnící barvu tématu, který není dokumentem; nutné pro přepnání témat funkčních barev, povrchů a textů na komponentách, například ve Storybooku
[data-theme$="light"]:not(:root) - element ve světlém tématu, který není dokumentem
[data-theme$="dark"]:not(:root) - element v tmavém tématu, který není dokumentem
:is(:root[data-theme$="dark"] [data-theme="inverted"]) - element, který chci na dokumentu s tmavým tématem invertovat
:is(:root[data-theme$="light"] [data-theme="inverted"]) - element, který chci na dokumentu se světlým tématem invertovat