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.

: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);
  }
}

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