# SDK: theme

> The public --pithyx-* CSS custom properties and how the SDK applies the desktop theme.

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

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

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

## Type Aliases

### ThemeTokenName

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

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

## Variables

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

## Functions

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

#### Parameters

| Parameter | Type              | Description                                                               |
| --------- | ----------------- | ------------------------------------------------------------------------- |
| `theme`   | [`Theme`](#theme) | The theme from the context or from `themeChange`.                         |
| `root`    | `HTMLElement`     | The element that gets the properties, usually `document.documentElement`. |

#### Returns

`void`