SDK: Theme

Das SDK setzt das Aussehen des Desktops als CSS-Variablen --pithyx-* auf das Dokument der App und folgt themeChange. Die Komponenten von @pithyx/ui lesen stattdessen die Tokens.

Beim Build aus den TSDoc-Kommentaren von @pithyx/sdk 1.0.0-rc.9 erzeugt; der Text unter den Überschriften ist der Kommentar im Quelltext und bleibt Englisch.

Schnittstellen

Theme

The desktop’s look as an app gets it, in the context and with themeChange.

Eigenschaften

scheme

scheme: 'light' | 'dark';

Whether the desktop shows its light or its dark theme.

density

density: 'comfortable' | 'compact';

compact shrinks --pithyx-space and --pithyx-control-height; the values already reflect it.

tokens

tokens: Record<ThemeTokenName, string>;

Every public token with its current value.

Typenaliasse

ThemeTokenName

type ThemeTokenName = (typeof themeTokenNames)[number];

One of the public token names in themeTokenNames.

Variablen

themeTokenNames

const themeTokenNames: readonly [
  '--pithyx-color-background',
  '--pithyx-color-surface',
  '--pithyx-color-surface-raised',
  '--pithyx-color-hover',
  '--pithyx-color-selected',
  '--pithyx-color-text',
  '--pithyx-color-text-muted',
  '--pithyx-color-border',
  '--pithyx-color-accent',
  '--pithyx-color-accent-text',
  '--pithyx-color-focus',
  '--pithyx-color-success',
  '--pithyx-color-warning',
  '--pithyx-color-danger',
  '--pithyx-font-ui',
  '--pithyx-font-mono',
  '--pithyx-font-size',
  '--pithyx-radius',
  '--pithyx-space',
  '--pithyx-control-height',
];

Public token names. New names are a minor change; removing or renaming one is a major change. Every name says what the value is for, never what it looks like: no raw colors such as petrol or amber.

Funktionen

applyTheme()

function applyTheme(theme, root): void;

Applies a theme to a document (the SDK does this on connect and on every themeChange): sets color-scheme, data-theme, data-pithyx-theme, data-pithyx-density and every public token. data-theme matters for CSS a bundler compiled for older browsers: Vite turns light-dark() into variables that follow the color-scheme rules of the style sheet (such as :root[data-theme='dark'] in @pithyx/ui/tokens.css) and the browser’s preference, not a color-scheme set by script. Values with ;, braces or angle brackets are skipped, so a theme cannot inject other CSS.

Parameter

Parameter	Typ	Beschreibung
theme	Theme	The theme from the context or from themeChange.
root	HTMLElement	The element that gets the properties, usually document.documentElement.

Rückgabewert

void