Jul 15

Browser CSS variables support

Category: Product
Published: Jul 15

Browser now supports theming via Browser CSS variables.

Following last week's update that enabled CSS variables in Browser's appearance system, you can now customize the theme of Browser components by defining Browser CSS variables in your application's stylesheets, no CSS-in-JS required!

Define Browser 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 Browser. 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 Browser CSS variables documentation.