Témata

Spectro podporuje dvě témata: světlé a tmavé. Stejné tokeny mají v každém tématu jiné hodnoty, aby zůstala čitelnost i správný vizuální kontrast.

Srovnání

Níže jsou ukázky často používaných tokenů. Uvidíte, že některé povrchy mohou být ve světlém tématu stejné, ale v tmavém se liší.

Pevné téma

Komponentu lze vynutit do konkrétního tématu bez ohledu na zbytek aplikace. Stačí nastavit atribut data-theme.

<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 lze také invertovat. Princip je stejný, jen nastavíte 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

Nepoužíváme automatické @media (prefers-color-scheme), ale atribut data-theme, který nastavuje skript. Díky tomu máme:

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

/* 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);
}

Selektory níže působí složitě, ale pro běžné použití Spectra není potřeba znát jejich detailní logiku.

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 (komponenty):

[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