---
title: Customize
description: Change the c15t banner and dialog in Nuxt with theme tokens, layout
  presentation, component slots and copy.
group: frameworks
lastModified: "2026-10-10T16:01:45+01:00"
---
## Pick the right option

|You want to change|Use|
|--|--|
|Colors, fonts, radius, spacing or motion|`tokens`|
|Banner shape, position, button order or blocking|`presentation`|
|Classes or attributes on one part of a component|`components`|
|Light or dark colors|`colorScheme` and `theme.dark`|
|The text|Your Inth project's translations|
|The markup|[Headless](/docs/frameworks/nuxt/headless)|

The [customization overview](/docs/customization/overview) explains these
choices across frameworks. Add the options below to the `c15t` key in
`nuxt.config.ts`. They are plain data, so they are safe in module options.

See the [design gallery](/docs/customization/recipes) for five banner designs
with tested code. Nuxt uses the Vue components and composables it shows.
`examples/showcase-nuxt-theme` in the c15t repository puts `theme`,
`colorScheme`, `presentation`, `components` and legal links together in one
Nuxt app.

## Set theme tokens

`tokens` sets c15t's CSS variables. Keys are the variable names without the
leading `--`.

```ts title="nuxt.config.ts"
export default defineNuxtConfig({
	c15t: {
		tokens: {
			'c15t-primary': '#6943a3',
			'c15t-primary-hover': '#533285',
			'c15t-radius-lg': '18px',
			'c15t-text-on-primary': '#ffffff',
		},
	},
});
```

The Nuxt module's plugin writes the tokens, including the defaults you did
not set, into a `<style id="c15t-css-vars">` tag in the page head on every
page, whether or not `ConsentRoot` renders. During server rendering and
prerendering the tag is in the first HTML, so the banner already has your
colors. Cached routes keep the tag, because tokens are the same for every
visitor. With `ssr: false`, the plugin adds the same tag in the browser. The
tag carries the module's `nonce` when you set one. Set tokens through this option rather than
a `:root` rule in your own CSS, which can lose to that tag depending on
stylesheet order. [Theme tokens](/docs/customization/tokens) lists every token.

## Change the banner layout

`presentation.prompt` sets the banner's `variant`, `position`, `layout`,
`primaryActions`, `direction`, `uiProfile` and `blocking`.
`presentation.preferences` sets the same layout fields for the dialog.

```ts title="nuxt.config.ts"
export default defineNuxtConfig({
	c15t: { presentation: { prompt: { position: 'bottom', variant: 'bar' } } },
});
```

`variant` is `'floating'`, `'bar'`, `'widget'` or `'wall'`, and each accepts
its own positions. `bar` takes `top` or `bottom`, `wall` takes `center`,
`widget` takes the four corners, and `floating` takes the corners plus
`top-center` and `bottom-center`. The policy still has
the last word. A choice wall always blocks, a notice never blocks, and the
policy can restore a required button you left out of `layout`.

## Style one part of a component

`components` adds attributes to named parts, such as a class on the banner
card. The keys match the [component parts](/docs/customization/slots).

```ts title="nuxt.config.ts"
export default defineNuxtConfig({
	c15t: {
		components: {
			banner: { card: { class: 'brand-consent-card' } },
			trigger: { root: { 'aria-label': 'Cookie settings' } },
		},
	},
});
```

Vue binds these objects with `v-bind`, so use Vue attribute names such as
`class` and `style`. React's `className` does not apply. The `ConsentGate`
placeholder's parts are `components['consent-gate'].root`, `.title` and
`.button`.

With Tailwind CSS, put part classes in `app/app.config.ts` under the same
`c15t` key rather than in `nuxt.config.ts`, because Tailwind scans `app/`. The
module merges both. [Tailwind CSS](/docs/customization/tailwind) shows the
Nuxt setup for Tailwind 4 and 3, and
[class names and CSS-in-JS](/docs/customization/class-names) covers other
class sources.

## Turn on dark mode

`colorScheme` in the `c15t` key in `nuxt.config.ts` decides when the banner and dialog turn dark:
`'light'`, `'dark'`, `'system'`, or unset to copy a `dark` class on `<html>`.
The module ships c15t's stock dark palette, so a `dark` class alone turns the
banner dark. `theme` takes the same token
object as the other frameworks, including `theme.dark`, and wins over `tokens`
where both set a variable. For `'dark'` and `'system'`, the module adds an
inline script to `<head>` that sets the class before the banner paints.
`colorScheme: null` leaves `c15t-dark` to your site when you set it under the
`c15t` key or in `app/app.config.ts`. Nuxt drops a `null` in inline module
options before the module reads it.
[Dark mode](/docs/customization/dark-mode) covers each value and a dark first
paint.

## Change the copy

The banner and dialog text come from the translations of your Inth project,
resolved for the visitor's language. Edit them there. `legalLinks` adds links
to your privacy policy and similar pages:

```ts title="nuxt.config.ts"
export default defineNuxtConfig({
	c15t: {
		bannerLegalLinks: ['privacyPolicy'],
		legalLinks: { privacyPolicy: { href: '/privacy' } },
	},
});
```

[Translations](/docs/frameworks/nuxt/translations) covers the visitor's
language, and [copy and translations](/docs/customization/translations) covers
message keys and writing labels.

## Other display options

|Option|What it does|
|--|--|
|`showTrigger`|Renders the floating [`ConsentDialogTrigger`](/docs/frameworks/nuxt/components/consent-dialog-trigger) from `ConsentRoot`.|
|`triggerDefaultPosition`, `triggerSize`, `triggerIcon`, `triggerShowWhen`|Place and style that trigger.|
|`hideBranding`, `bannerHideBranding`, `dialogHideBranding`|Hide the "Secured by" tag.|
|`disableAnimation`|Turns off banner and dialog animations. See [motion and animation](/docs/customization/motion).|
|`consentCategories`|Limits the categories the dialog shows, within the policy's scope.|

## Check the result

Run `nuxt dev` and clear the `c15t` cookie and localStorage entry, or use a
private window, so the banner shows. View the page source to confirm the
`c15t-css-vars` style tag holds your tokens.