> Portal Navigation:
> 
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt

## Resource: Connect an Editor React Component's Colors and Fonts to a Site Theme

## Article: Connect an Editor React Component's Colors and Fonts to a Site Theme

## Article Link: https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/connect-an-editor-react-component-s-colors-and-fonts-to-a-site-theme.md

## Article Content:

# Connect an Editor React Component's Colors and Fonts to a Site Theme
<blockquote class="caution">

__Alpha:__
Editor React Components are currently in alpha. This feature is subject to change and may have bugs, issues, and limitations. We're actively improving it based on your feedback.

</blockquote>


Linking your component to the site's theme keeps it visually consistent with everything around it.

When the owner changes the theme, your component changes with it, without any work on your part.

[Editor React Components](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/about-editor-react-components.md) run on [Wix Harmony](https://dev.wix.com/docs/build-apps/get-started/overview/about-wix-harmony-and-apps.md) sites, which expose their theme as CSS variables on the page. Your component inherits those variables, so you can reference them directly in your CSS.

## Available variables

A Harmony site exposes two sets of theme variables, and an Editor React Component receives both:

+ The Harmony set. See [Harmony Site Theme CSS Variables](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/harmony-site-theme-css-variables.md).
+ The set shared with all Wix editors. See [Site Theme CSS Variables](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/frontend-code/custom-css/site-theme-css-variables.md).

Prefer the Harmony set. It's more specific, and it maps directly to the styles the site owner sees in the editor's [**Site Brand**](https://support.wix.com/en/article/wix-harmony-editor-updating-your-brand-styles) panel.

## Reference theme variables in your CSS

Use theme variables in your component's CSS module, with a fallback value so the component still renders if a variable is unavailable. The following example styles a card, its title, and its body text:

```css
.card {
  background-color: var(--wst-box-primary-background-color, #ffffff);
  border-top: 1px solid var(--wst-box-primary-border-top-color, #e0e0e0);
}

.title {
  color: var(--wst-heading-1-color, #000000);
  font: var(--wst-heading-2-font, bold 32px/1.2em sans-serif);
}

.body {
  color: var(--wst-paragraph-1-color, #333333);
  font: var(--wst-paragraph-1-font, normal 16px/1.4em sans-serif);
}
```

## How theme variables reach the design panel

Run `wix build`, then [`wix generate manifest`](https://dev.wix.com/docs/wix-cli/command-reference/project-commands/app-only/generate-manifest.md). The manifest generator works from the last build, so it silently skips any component you haven't built yet.

The CLI reads your CSS module and carries any `var()` expression it finds into the [manifest](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/manifest-reference/about-the-manifest.md) as the `defaultValue` for that property. The theme reference is preserved, fallback included, as in the following example:

```json
"color": {
  "defaultValue": "var(--wst-heading-1-color,#000000)"
}
```

This matters because of where each source sits in the editor's priority order. As described in [How the Editor Resolves CSS Property Values](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/manifest-reference/editor-element/css/how-the-editor-resolves-css-property-values.md), your CSS file is the lowest priority source, and manifest defaults sit above it.

Carrying the theme reference into the manifest keeps it in effect as the component's default, and the site owner can still override it in the design panel.

<blockquote class="tip">

**Tip:** Rerun `wix generate manifest` after changing theme variables in your CSS, so the manifest defaults stay in step with your stylesheet.

</blockquote>

## Theme variables and custom style properties

Both site theme variables and the manifest's [`cssCustomProperties`](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/manifest-reference/editor-element/css/css-custom-properties.md) are CSS custom properties, so it's worth being clear on which is which.

| | Site theme variables | `cssCustomProperties` |
|---|---|---|
| Defined by | Wix | You, in the manifest |
| Named | `--wst-*` | Anything you choose |
| Source of the value | The site's theme | The site owner, through a control you configure |
| Purpose | Follow the site's design | Expose a style choice specific to your component |

The two work together. A custom property can take a theme variable as its default, so the component starts on-theme and the owner can change it. The following example defines an accent color that starts from the site's links and actions color:

```typescript
editorElement: {
  cssCustomProperties: {
    accentColor: {
      cssPropertyType: 'color',
      displayName: 'Accent Color',
      defaultValue: 'var(--wst-links-and-actions-color, #116dff)',
    },
  },
}
```

The editor sets a custom property on the element once the Wix user customizes it, so until then your CSS fallback is what renders. Give every `var()` a fallback that matches the default in the manifest.

## Test your component against more than one theme

Switching the site's brand kit changes the palette and the fonts, and everything derived from them changes too.

Switch brand kits in the **Site Brand** panel and confirm your component still reads well, particularly where you have set a color against a background you don't control.

## See also

- [Harmony Site Theme CSS Variables](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/harmony-site-theme-css-variables.md)
- [How the Editor Resolves CSS Property Values](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/manifest-reference/editor-element/css/how-the-editor-resolves-css-property-values.md)