Dynamic API

We also provide a lightweight standalone package to support dynamic runtime theming.

$ npm install @vanilla-extract/dynamic

Implements a theme contract at runtime as an inline style object.

app.ts
import { createInlineTheme } from '@vanilla-extract/dynamic'; import { vars, exampleStyle } from './styles.css.ts'; const customTheme = createInlineTheme(vars, { small: '4px', medium: '8px', large: '16px' }); document.write(` <section style="${customTheme}"> <h1 class="${exampleStyle}">Hello world!</h1> </section> `);

Implements a theme contract on an element.

app.ts
import { setElementTheme } from '@vanilla-extract/dynamic'; import { vars } from './styles.css.ts'; const element = document.getElementById('myElement'); setElementTheme(element, vars, { small: '4px', medium: '8px', large: '16px' });

💡 All variables passed into this function must be assigned or it’s a type error.

Sets a single var on an element.

app.ts
import { setElementVar } from '@vanilla-extract/dynamic'; import { vars } from './styles.css.ts'; const element = document.getElementById('myElement'); setElementVar(element, vars.color.brand, 'darksalmon');