> 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: Site Theme CSS Variables

## Article: Site Theme CSS Variables

## Article Link: https://dev.wix.com/docs/develop-websites-sdk/code-your-site/build-a-custom-frontend/css/site-theme-css-variables.md

## Article Content:

# Site Theme CSS Variables

Wix exposes a comprehensive set of CSS variables a site's theme colors and fonts. You can use these variables when applying custom [CSS styling](https://dev.wix.com/docs/develop-websites-sdk/code-your-site/build-a-custom-frontend/css/about-custom-css.md) to supported elements on a 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 code.

## Color theme

### General

| Style                | CSS Variable                            |
| -------------------- | --------------------------------------- |
| Primary background   | `--wst-color-fill-background-primary`   |
| Secondary background | `--wst-color-fill-background-secondary` |
| Lines and dividers   | `--wst-color-line`                      |

### Text

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

### Buttons

#### Primary button

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

#### Secondary button

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

### Theme colors

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

## Font theme

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