Jul 15

Clerk CSS variables support

Category: Product
Published: Jul 15

Clerk now supports theming via Clerk CSS variables.

Following last week's update that enabled CSS variables in Clerk's appearance system, 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:

styles.css

:root {
  --clerk-color-primary: #6d47ff; /* colorPrimary */
}

For more details on the supported variables, see the variables 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 documentation.