Clerk CSS variables support

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:

: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.