SDK: theme

The SDK sets the desktop look on the app document as --pithyx-* CSS custom properties and follows themeChange. The components of @pithyx/ui read the tokens instead.

Generated from the TSDoc comments of @pithyx/sdk 1.0.0-rc.9 at build time; the text below the headings is the comment in the source.

Interfaces

Theme

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

Properties

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.

Type Aliases

ThemeTokenName

type ThemeTokenName = (typeof themeTokenNames)[number];

One of the public token names in themeTokenNames.

Variables

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.

Functions

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.

Parameters

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

Returns

void