---
title: Styles
description: In v2 the provider built CSS from `options.theme` in the browser.
  In v3 it doesn't. Without a change, custom colors, fonts and radii fall back
  to the defaults, and you only see a development warning.
lastModified: "2026-10-12T12:44:54+01:00"
lastAuthor: Christopher Burns
---
## Update styles and themes

### Render theme CSS

In v2 the provider built CSS from `options.theme` in the browser. In v3 it
doesn't. Without a change, custom colors, fonts and radii fall back to the
defaults, and you only see a development warning.

Render `ConsentTheme` with the same theme object, or put the output of
`generateThemeCSS(theme)` in your own stylesheet. Keep `options.theme` for
`consentActions` and `slots`. See
[customization](/docs/customization/overview) and
[tokens](/docs/customization/tokens).

The `theme-to-consent-theme` codemod marks a provider `theme` that sets
tokens with a `TODO(c15t v3)` comment.

A generated theme uses `:root:root`, so your own `--c15t-*` values on plain
`:root` lose to it. Put them in the theme instead, or raise your selector.

### Stylesheets

* Remove the c15t stylesheet import, such as `@c15t/react/styles.css` or
  `@c15t/nextjs/styles.css`. The stock components in `c15t/react`,
  `c15t/next` and `c15t/tanstack-start` render the rules they use as
  `<style>` elements, so no stylesheet request holds back the first paint. An
  import you keep still styles the components, but the rules ship twice and
  the stylesheet still delays the first paint.
* Keep an import of the v3 stylesheet, such as `c15t/react/styles.css`, only
  with Tailwind CSS 3 or a named cascade layer, and set
  `styles: false` in the provider options so the components add no second
  copy. See
  [stylesheets and CSS layers](/docs/customization/stylesheets#import-the-stylesheet-yourself).
  The `packages-to-c15t` codemod removes `@c15t/react` and `@c15t/nextjs`
  stylesheet imports. With Tailwind CSS 3 or a cascade layer it keeps them,
  pointed at `c15t`, with a `TODO(c15t v3)` comment.
* With manual styles, `iab/styles.css` no longer repeats the default tokens.
  Import it after `styles.css`. Automatic IAB styling needs neither import.
* Tailwind CSS 3 needs a PostCSS plugin for c15t's `styles.css`. Add
  `'c15t/postcss-tailwind3': {}` before `tailwindcss` in `postcss.config`,
  and set `styles: false`. See [Tailwind CSS 3](/docs/customization/tailwind#set-up-tailwind-css-3).
  Create React App can't run the plugin. The `postcss-tailwind3` codemod adds
  it to an object-form `postcss.config` and warns about configs it can't
  edit.

### CSS variables and slots

|v2|v3|
|--|--|
|`--consent-widget-*`|`--consent-manager-*`, used by `ConsentDialog` and `ConsentWidget`|
|`--consent-widget-accordion-*`|Removed. Set `--accordion-*` instead.|
|`--frame-*`|`--consent-gate-*`|
|`--consent-banner-entry-animation`, `--consent-banner-exit-animation`|Removed|
|`theme.slots.frame`|`consentGate`, `consentGateTitle` and `consentGateButton`|
|`theme.slots.consentDialogFooter`|`consentWidgetFooter`|

The `css-variables-to-v3` codemod renames `--consent-widget-*` and
`--frame-*` in stylesheets and inline styles, and marks
`--consent-widget-accordion-*` with a comment instead of renaming it, because
`--accordion-*` styles every accordion. `theme-to-consent-theme` renames
`theme.slots.consentDialogFooter` and marks `theme.slots.frame`.

```bash
npx @c15t/cli codemods theme-to-consent-theme css-variables-to-v3 postcss-tailwind3 --dry-run --json
```

`theme.slots` now applies in React. v2 accepted it in types and ignored it, so
check slots you set before the upgrade.