---
title: CSS Variables
description: Reference for all --c15t-* CSS custom properties generated by the theme system.
---
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

| Property    | Value                                |
| :---------- | :----------------------------------- |
| Type Name   | \`ThemeCSSVariables\`                |
| Source Path | \`./packages/ui/src/theme/types.ts\` |

\*AutoTypeTable: Could not extract \`ThemeCSSVariables\` from \`./packages/ui/src/theme/types.ts\`. Verify the path/name and that the file is included by your tsconfig.\*

## Overriding Variables

Override in your stylesheet:

```css
: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:

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

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