# SDK: Theme

> Die öffentlichen CSS-Variablen --pithyx-* und wie das SDK das Theme des Desktops anwendet.

Source: https://pithyx.org/de/docs/reference/sdk/theme/
Markdown: https://pithyx.org/de/docs/reference/sdk/theme.md

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](https://pithyx.org/de/docs/reference/sdk/ui/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

```ts
scheme: 'light' | 'dark';
```

Whether the desktop shows its light or its dark theme.

##### density

```ts
density: 'comfortable' | 'compact';
```

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

##### tokens

```ts
tokens: Record<ThemeTokenName, string>;
```

Every public token with its current value.

## Typenaliasse

### ThemeTokenName

```ts
type ThemeTokenName = (typeof themeTokenNames)[number];
```

One of the public token names in [themeTokenNames](#themetokennames).

## Variablen

### themeTokenNames

```ts
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()

```ts
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`](#theme) | The theme from the context or from `themeChange`.                         |
| `root`    | `HTMLElement`     | The element that gets the properties, usually `document.documentElement`. |

#### Rückgabewert

`void`