# theme/stylesheet (zidane-ui)

Import: `import { … } from 'zidane-ui'`. Source: [ui/src/theme/stylesheet.ts](https://github.com/Tahul/zidane/blob/main/ui/src/theme/stylesheet.ts).

## Functions

### `themeCssVars`

Function.

Every var the app writes for one theme at one contrast level.

```ts
function themeCssVars(theme: string | Theme, contrast?: number): CssVarMap
```

**Parameters**

- `theme` (`string | Theme`): A built-in theme's id (an unknown id throws), or a [`Theme`](https://zidane.si/docs/reference/ui-theme-themes.md#Theme) of your own,
  derived the same way as the built-in ones.
- `contrast?` (`number`, default `100`): The contrast setting in percent. Defaults to 100.

**Returns** `CssVarMap`

Source: [ui/src/theme/stylesheet.ts:19](https://github.com/Tahul/zidane/blob/main/ui/src/theme/stylesheet.ts#L19)

### `themeStylesheet`

Function.

`:root.dark { … } :root.light { … }`. The class must be set before first
paint (an inline script reading the stored / OS preference).

```ts
function themeStylesheet(
  options?: { contrast?: number; dark?: string | Theme; light?: string | Theme },
): string
```

**Parameters**

- `options?` (`{ contrast?: number; dark?: string | Theme; light?: string | Theme }`, default `{}`): `dark` and `light` are the themes for each appearance: a built-in theme's id or
  a [`Theme`](https://zidane.si/docs/reference/ui-theme-themes.md#Theme) of your own (defaults `'default'` and `'light'`), and `contrast` is the contrast
  setting in percent (default 100).

**Returns** `string`: The CSS text.

Source: [ui/src/theme/stylesheet.ts:49](https://github.com/Tahul/zidane/blob/main/ui/src/theme/stylesheet.ts#L49)