# Clerk CSS variables support

Following last week's update that enabled [CSS variables in Clerk's appearance system](https://clerk.com/changelog/2025-07-08-css-variables-support.md), you can now customize the theme of Clerk components by defining Clerk CSS variables in your application's stylesheets, no CSS-in-JS required!

Define Clerk variables through CSS variables like so:

filename: styles.css
```css
:root {
  --clerk-color-primary: #6d47ff; /* colorPrimary */
}
```

For more details on the supported variables, see the [variables properties](https://clerk.com/docs/customization/variables.md#properties) documentation.

Included in this release, we've also taken the opportunity to improve the naming of our variables and add additional variables to make theming more flexible.

## Deprecated variables

The following properties are deprecated as of **July 15th, 2025** and will be removed in the next major version of Clerk. We recommend migrating to the new properties as soon as possible.

| Deprecated                     | New                      |
| ------------------------------ | ------------------------ |
| `colorText`                    | `colorForeground`        |
| `colorTextOnPrimaryBackground` | `colorPrimaryForeground` |
| `colorTextSecondary`           | `colorMutedForeground`   |
| `spacingUnit`                  | `spacing`                |
| `colorInputText`               | `colorInputForeground`   |
| `colorInputBackground`         | `colorInput`             |

## New variables

| Variable             | Description                                                                    |
| -------------------- | ------------------------------------------------------------------------------ |
| `colorRing`          | The color of the ring when an interactive element is focused.                  |
| `colorMuted`         | The background color for elements of lower importance, eg: a muted background. |
| `colorShadow`        | The base shadow color used in the components.                                  |
| `colorBorder`        | The base border color used in the components.                                  |
| `colorModalBackdrop` | The background color of the modal backdrop.                                    |

For more details, including important details about browser compatibility considerations, see the [Clerk CSS variables](https://clerk.com/docs/customization/variables.md#using-css-variables) documentation.