CSS Variables

Every theme token is converted to a --c15t-* CSS custom property at runtime. You can override these variables in your stylesheet without using the JavaScript theme API.

Variable Reference

Warning: ExtractedTypeTable: Could not extract "ThemeCSSVariables" from "./packages/ui/src/theme/types.ts" using base path "/vercel/path0/apps/c15t-docs/.leadtype/c15t". Verify the path/name and that the file is included by your tsconfig.

Overriding Variables

Override in your stylesheet:

:root {
  --c15t-primary: #8b5cf6;
  --c15t-surface: #fafafa;
  --c15t-radius-md: 1rem;
}

/* Dark mode overrides */
.dark,
.c15t-dark {
  --c15t-primary: #a78bfa;
  --c15t-surface: #18181b;
  --c15t-text: #fafafa;
}

Scoped Overrides

Target specific components by scoping variables:

<div className="checkout-consent">
  <ConsentBanner />
</div>

/* Only affect c15t components inside .checkout-consent */
.checkout-consent {
  --c15t-surface: #f0f9ff;
  --c15t-radius-lg: 1.5rem;
}