> This page is for Designer API.

> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://developers.webflow.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://developers.webflow.com/_mcp/server.

# Get Theme Styles (Beta)

> Get the CSS design token values for a given Designer theme.

## `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.

> **Beta**
>
> These methods are in public beta and may change with future releases.

## Syntax

```typescript
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()`](/designer/reference/get-theme) to get the currently active theme name.

## Returns

**Promise\<*ThemeStyles*>**

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

```typescript
{
  colors: Record<string, string>;      // CSS color token values
  boxShadows: Record<string, string>;  // CSS box-shadow token values
  controls: Record<string, string>;    // CSS control/border token values
  opacities: Record<string, string>;   // CSS opacity token values
}
```

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

## Example

```typescript
const theme = await webflow.getTheme();
const styles = await webflow.getThemeStyles(theme);

// Apply the Designer's primary background color to your extension
document.body.style.backgroundColor = styles.colors['bg-primary'];
```

[Try this example](https://webflow.com/oauth/authorize?response_type=code\&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62)

## Designer Ability

| Designer Ability    | Locale | Branch | Workflow | Sitemode |
| :------------------ | :----- | :----- | :------- | :------- |
| **canAccessCanvas** | Any    | Any    | Any      | Any      |