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

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