Wix exposes a comprehensive set of CSS variables for each of your site's theme colors and fonts. You can use these variables when applying custom CSS styling to supported element in your site. These variables represent the site's color and typography styles, enabling dynamic and consistent design across all components. Use this reference to identify and apply the correct variables for colors and fonts in your code.
| Style | CSS Variable |
|---|
| Primary background | --wst-color-fill-background-primary |
| Secondary background | --wst-color-fill-background-secondary |
| Lines and dividers | --wst-color-line |
| Style | CSS Variable |
|---|
| Title | --wst-color-title |
| Subtitle | --wst-color-subtitle |
| Body text | --wst-color-text-primary |
| Secondary text | --wst-color-text-secondary |
| Links and actions | --wst-color-action |
| Disabled actions | --wst-color-disabled |
| Style | CSS Variable |
|---|
| Fill (Regular) | --wst-button-color-fill-primary |
| Border (Regular) | --wst-button-color-border-primary |
| Text (Regular) | --wst-button-color-text-primary |
| Fill (Hover) | --wst-button-color-fill-primary-hover |
| Border (Hover) | --wst-button-color-border-primary-hover |
| Text (Hover) | --wst-button-color-text-primary-hover |
| Fill (Disabled) | --wst-button-color-fill-primary-disabled |
| Border (Disabled) | --wst-button-color-border-primary-disabled |
| Text (Disabled) | --wst-button-color-text-primary-disabled |
| Style | CSS Variable |
|---|
| Fill (Regular) | --wst-button-color-fill-secondary |
| Border (Regular) | --wst-button-color-border-secondary |
| Text (Regular) | --wst-button-color-text-secondary |
| Fill (Hover) | --wst-button-color-fill-secondary-hover |
| Border (Hover) | --wst-button-color-border-secondary-hover |
| Text (Hover) | --wst-button-color-text-secondary-hover |
| Fill (Disabled) | --wst-button-color-fill-secondary-disabled |
| Border (Disabled) | --wst-button-color-border-secondary-disabled |
| Text (Disabled) | --wst-button-color-text-secondary-disabled |
| Style | CSS Variable |
|---|
| Base 1 | --wst-color-fill-base-1 |
| Base 2 | --wst-color-fill-base-2 |
| Shade 1 | --wst-color-fill-base-shade-1 |
| Shade 2 | --wst-color-fill-base-shade-2 |
| Shade 3 | --wst-color-fill-base-shade-3 |
| Accent 1 | --wst-color-fill-accent-1 |
| Accent 2 | --wst-color-fill-accent-2 |
| Accent 3 | --wst-color-fill-accent-3 |
| Accent 4 | --wst-color-fill-accent-4 |
| Style | CSS Variable |
|---|
| Heading 1 titles (reserved for page titles) | --wst-font-style-h1 |
| Heading 2 titles (recommended) | --wst-font-style-h2 |
| Heading 3 titles | --wst-font-style-h3 |
| Heading 4 titles | --wst-font-style-h4 |
| Heading 5 titles | --wst-font-style-h5 |
| Heading 6 titles | --wst-font-style-h6 |
| Large body text (paragraph 1) | --wst-font-style-body-large |
| Medium body text (paragraph 2; recommended) | --wst-font-style-body-medium |
| Small body text (paragraph 3) | --wst-font-style-body-small |