# 2025-06-21-1

Published: Sat, Jun 21, 2025
Tags: css, work

Working on some updates to make it easier to theme Clerk components from your existing CSS variables.

Generating a color palette using relative color syntax and color-mix.

```css
:root {
  --brand-color: oklch(49.1% 0.27 292.581);
}

@media (prefers-color-scheme: dark) {
  :root {
    --brand-color: oklch(54.1% 0.281 293.009);
  }
}
```

```tsx
<ClerkProvider
  appearance={{
    variables: {
      colorPrimary: "var(--brand-color)",
    },
  }}
/>
```