Documentation

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 and 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. 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. 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.

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.