---
url: /api/renderers/css-in-js/src/functions/toStyledTheme.md
---
[pantoken-root](../../../../index.md) / [renderers/css-in-js/src](../index.md) / toStyledTheme

# Function: toStyledTheme()

> **toStyledTheme**(`tokens`, `options?`): [`StyledTheme`](../type-aliases/StyledTheme.md)

Experimental

Build a CSS-in-JS theme object from a token IR.

## Parameters

### tokens

readonly [`Token`](../../../../packages/core/src/interfaces/Token.md)\[]

The IR (e.g. from `@pantoken/tokens`).

### options?

[`ToStyledThemeOptions`](../interfaces/ToStyledThemeOptions.md) = `{}`

[ToStyledThemeOptions](../interfaces/ToStyledThemeOptions.md).

## Returns

[`StyledTheme`](../type-aliases/StyledTheme.md)

The theme object, keyed by camelCased token name.

## Examples

**var()-backed, light/dark flows through @pantoken/css**

```ts
import { toStyledTheme } from "@pantoken/css-in-js";
import { tokens } from "@pantoken/tokens";

const theme = toStyledTheme(tokens);
// theme.colorBackgroundBrand → "var(--instui-color-background-brand)"
```

**Bake concrete single-mode values (for SSR without CSS variables)**

```ts
import { toStyledTheme } from "@pantoken/css-in-js";
import { tokens } from "@pantoken/tokens";

const dark = toStyledTheme(tokens, { resolve: "dark" });
// dark.colorBackgroundBase → a concrete value, not a var()
```