Get Theme Styles (Beta)

webflow.getThemeStyles(themeName)

Returns the structured CSS token values (colors, shadows, controls, opacities) for a given Designer theme. Use these tokens to style your extension’s UI to match the Designer’s visual language.

Syntax

1
webflow.getThemeStyles(themeName: AppearanceSettings): Promise<ThemeStyles>

Parameters

• themeName: AppearanceSettings — The theme to retrieve tokens for. One of 'darkDefault', 'darkDarker', 'darkBrighter', or 'light'. Use webflow.getTheme() to get the currently active theme name.

Returns

Promise<ThemeStyles>

A Promise that resolves to a ThemeStyles object with the following shape:

1
{
2
  colors: Record<string, string>;      // CSS color token values
3
  boxShadows: Record<string, string>;  // CSS box-shadow token values
4
  controls: Record<string, string>;    // CSS control/border token values
5
  opacities: Record<string, string>;   // CSS opacity token values
6
}

Each property is a flat key-value map of token names to CSS values.

Example

1
const theme = await webflow.getTheme();
2
const styles = await webflow.getThemeStyles(theme);
3
4
// Apply the Designer's primary background color to your extension
5
document.body.style.backgroundColor = styles.colors['bg-primary'];

Designer Ability