Override the theme

Change a colour, replace a component, add a shadcn-vue primitive.

The layer ships the theme as files you can shadow. Three levels, smallest first — and the smallest one that does the job is the right one, because a component you replace is a component you now maintain.

Steps

A colour: redefine the token. The palette is the neutral shadcn set as CSS variables. Redefine one in your own stylesheet; no fork of the layer's file is needed.
```
:root {
  --primary: oklch(0.55 0.2 265);
}
.dark {
  --primary: oklch(0.7 0.18 265);
}
```
Both blocks matter: the theme switches on a dark class, not a media query, so a token defined once is wrong in one of the two modes.

Check the contrast you just changed

--muted-foreground carries the page descriptions, the table of contents and the breadcrumb. The layer's value is deliberately darker than shadcn's default, which measures below 4.5:1 on the surfaces this token actually lands on.

A piece of the layout: create the file. Nuxt resolves your component of the same name first, so replacing DuxtFooter is creating app/components/DuxtFooter.vue in your project. The names, props and slots are in the components reference — a documented name is part of the public surface, so it will not be renamed without a major release.
A slot, where there is one. DuxtPageFeedback emits feedback and exposes its state through a slot, so you can hang your own form on it without replacing the component — worked through in Collect page feedback.
A new primitive: use the CLI. The layer owns its shadcn-vue components rather than importing them, and components.json already points the CLI at the right alias:

pnpm dlx shadcn-vue@latest add tooltip

A component for Markdown. Anything in app/components/content/ is callable from a page with MDC block syntax. Your own file of the same name replaces the layer's — see the MDC reference.

Checklist

Nothing was copied out of the layer that a token could have changed
Every redefined token has a value for both light and dark
Replaced components are named exactly as the reference names them
pnpm build still renders every page (an override is where SSR breaks)

Was this page helpful?

#Steps

#Checklist

Steps

Checklist