Harmony Site Theme CSS Variables

Wix Harmony exposes a set of CSS variables for a site's theme colors, fonts, and component styles.

Reference them in your app's CSS so its appearance follows the site's theme and updates when the site owner changes it.

These variables exist on Harmony sites only. Sites built in Wix Editor or Wix Studio expose a smaller set, listed in Site Theme CSS Variables.

What the table columns mean

Each table groups the variables for one kind of style, and each row is one property of one style.

• Style name: the label the site owner sees in the editor's Site Brand panel.
• Property: the part of the style the variable controls.
• CSS variable: the name to reference in your CSS.
• Defaults to: the variable this one follows until the site owner changes it.
• Value: the fixed value, in the System colors table only.

The Site Brand panel groups the palette and system colors without naming them individually, so those style names follow the variable names instead.

An empty Defaults to entry means the variable follows no other variable. Its value comes from the set the site owner selected, named at the start of each section, and it changes when they edit that set.

For example, changing Heading 1's color repoints --wst-heading-1-color at the color the owner chose, while --wst-heading-2-color keeps following Base 2's color. Reference the variable for the thing you are styling, not the one it follows.

Colors

A site's colors fall into three groups: semantic colors named for their use, the palette the site owner picks, and fixed system colors.

Semantic colors

Colors named for what they're used for. Prefer these over palette colors, so your app follows the meaning the site owner intended.

Palette

The site owner picks these nine colors, and the rest of the theme takes its colors from them. Use one only when no semantic color fits what you are styling.

These nine come from the site's brand kit, the set of colors and fonts the owner selects in the editor's Site Brand panel. Switching to a different brand kit changes all nine, and everything that derives from them changes with it.

System

Fixed values that aren't part of the site's palette.

Text

Nine text styles. Fonts come from the site's font set, and each color can be changed per style.

Buttons

Three button tiers with the same properties. Values come from the site's button set, which the owner can swap or edit. Swapping to another set changes the borders, corner radii and spacing, and the colors keep following the same palette variables.

Boxes

Two box styles. Values come from the site's box set, which the owner can swap or edit.

Lines

Two line styles. Widths come from the site's line set, which the owner can edit.

Fallback values

A var() fallback keeps your app rendering when a variable is unavailable. In this example, --wst-heading-1-color is a Harmony variable and #000000 is the fallback:

A custom element can run on any editor, and you can't control which one a site owner uses, so nest a second var() inside the fallback. An Editor React Component runs only on Harmony and doesn't need this. This example resolves --wst-heading-1-color on a Harmony site, falls back to the Wix Editor and Wix Studio variable --wst-color-title elsewhere, and falls back to black if neither exists:

The variables to nest are listed in Site Theme CSS Variables.

See also

• Connect a Custom Element's Colors and Fonts to a Site Theme
• Connect an Editor React Component's Colors and Fonts to a Site Theme