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

# css-in-js

## Compatibility

Target: Emotion CSS-in-JS. Current format: `ThemeProvider SSR emits the Pantoken token variable`. Minimum host version: `11.14.0`. Tested through `11.14.0`. Newer releases require review.

[Full compatibility matrix](../../../../compatibility)

Experimental

`@pantoken/css-in-js` — an Instructure theme object for runtime CSS-in-JS libraries.

Works with any library that reads a theme from `props.theme` — Emotion, styled-components, and
Stitches all share that convention. [pantokenTheme](variables/pantokenTheme.md) is the ready-made `rebrand` object,
var()-backed so light/dark switching flows through `@pantoken/css`. [toStyledTheme](functions/toStyledTheme.md) builds
one from any IR (and can bake concrete values with `{ resolve }`).

## Example

**styled-components**

```tsx
import { ThemeProvider } from "styled-components";
import { pantokenTheme } from "@pantoken/css-in-js";
<ThemeProvider theme={pantokenTheme}>...</ThemeProvider>;
// const Btn = styled.button`background: ${({ theme }) => theme.colorBackgroundBrand};`;
```

## Interfaces

* [ToStyledThemeOptions](interfaces/ToStyledThemeOptions.md)

## Type Aliases

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

## Variables

* [pantokenTheme](variables/pantokenTheme.md)

## Functions

* [toThemeKey](functions/toThemeKey.md)
* [toStyledTheme](functions/toStyledTheme.md)

## References

### Mode

Re-exports [Mode](../../../packages/core/src/type-aliases/Mode.md)

***

### default

Renames and re-exports [pantokenTheme](variables/pantokenTheme.md)