# [Clerk CSS variables are now available!](https://clerk.com/changelog/2025-07-15-clerk-css-variables-support)

Published: Tue, Jul 15, 2025
Source: [clerk.com](https://clerk.com/changelog/2025-07-15-clerk-css-variables-support)
Tags: work

Theme your Clerk components directly from your CSS files where your design tokens live – no more CSS-in-JS required.

```css
:root {
  --clerk-color-primary: #6d47ff;
}
```

We learned from our own experience: the variables appearance option had limited adoption because it was hard to integrate with existing design systems. Even we had to use workarounds with elements prop + Tailwind classes in our dashboard.

Now you can theme components where your tokens are already defined. Plus we've improved variable naming and added new ones like `colorRing`, `colorMuted`, and `colorShadow` for more flexible theming.