> AI coding agents: see [/llms.txt](/llms.txt) for the full documentation index. Markdown version: [/docs/manual/en/concepts/theme.md](/docs/manual/en/concepts/theme.md).

---
title: Theme
description: Custom the appearance of your TockDocs documentation thanks to Nuxt UI flexible theming.
navigation:
  icon: i-lucide-paint-roller
---

TockDocs is built on top of Nuxt UI and takes full advantage of Tailwind CSS v4, CSS variables. The Tailwind Variants API offers a flexible and scalable theming system.

::tip{to="https://ui.nuxt.com/getting-started/theme"}
For a full overview of Nuxt UI theming, check out the Nuxt UI documentation.
::

## Override with `@theme`

You can customize your theme with CSS variables inside a `@theme` directive to define your project's custom design tokens, like fonts, colors, and breakpoints

You can override this theme by creating a `main.css` file in your application.

This way you can override your theme:

::code-group
```css [assets/css/main.css]
@import 'tailwindcss';
@import '@nuxt/ui';

@theme {
  --font-sans: 'Public Sans', sans-serif;

  --breakpoint-3xl: 1920px;

  --color-green-50: #effdf5;
  --color-green-100: #d9fbe8;
  --color-green-200: #b3f5d1;
  --color-green-300: #75edae;
  --color-green-400: #00dc82;
  --color-green-500: #00c16a;
  --color-green-600: #00a155;
  --color-green-700: #007f45;
  --color-green-800: #016538;
  --color-green-900: #0a5331;
  --color-green-950: #052e16;
}
```

```ts [nuxt.config.ts]
export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  css: ['~/assets/css/main.css'],
})
```
::

## Colors

TockDocs uses pre-configured color aliases that are used to style components and power the `color` props across the UI.

Each badge below represents a default alias:

- :u-badge{label="primary" variant="outline"} → Main brand color, used as the default color for components :br [(default: green)]{.text-xs,text-muted}
- :u-badge{color="secondary" label="secondary" variant="outline"} → Secondary color to complement the primary color :br [(default: blue)]{.text-xs,text-muted}
- :u-badge{color="success" label="success" variant="outline"} → Used for success states :br [(default: green)]{.text-xs,text-muted}
- :u-badge{color="info" label="info" variant="outline"} → Used for informational states :br [(default: blue)]{.text-xs,text-muted}
- :u-badge{color="warning" label="warning" variant="outline"} → Used for warning states :br [(default: yellow)]{.text-xs,text-muted}
- :u-badge{color="error" label="error" variant="outline"} → Used for form error validation states :br [(default: red)]{.text-xs,text-muted}
- :u-badge{color="neutral" label="neutral" variant="outline"} → Neutral color for backgrounds, text, etc. :br [(default: slate)]{.text-xs,text-muted}

You can customize these colors globally by updating the `app.config.ts` file under the `ui.colors` key:

```ts [app.config.ts]
export default defineAppConfig({
  ui: {
    colors: {
      primary: 'blue',
      neutral: 'zinc',
    },
  },
})
```

## Components

Beyond colors, all [Nuxt UI components](https://ui.nuxt.com/components) can be themed globally via `app.config.ts`.

You can override any component’s appearance by using the same structure as the component’s internal theme object (displayed at [the end of each component page](https://ui.nuxt.com/components/card#theme)).

For example, to change the font weight of all buttons:

```ts [app.config.ts]
export default defineAppConfig({
  ui: {
    button: {
      slots: {
        base: 'font-bold',
      },
    },
  },
})
```

In this example, the `font-bold` class will override the default `font-medium` class on all buttons.

::note{to="https://ui.nuxt.com/components/button#theme"}
To explore the available theme options for each component, refer to the **Theme** section in their respective Nuxt UI documentation page.
::

## TockDocs Subcomponents

TockDocs uses several Nuxt UI components internally for navigation, table of contents, and sub-navigation. You can customize their default variants through `app.config.ts` using the `defaultVariants` key, without having to override the entire component.

The following components are configurable:

| Component                                                              | Key                    | Defaults                             |
| ---------------------------------------------------------------------- | ---------------------- | ------------------------------------ |
| [ContentToc](https://ui.nuxt.com/components/content-toc)               | `ui.contentToc`        | `highlight: true`                    |
| [ContentNavigation](https://ui.nuxt.com/components/content-navigation) | `ui.contentNavigation` | `variant: 'link'`, `highlight: true` |
| [NavigationMenu](https://ui.nuxt.com/components/navigation-menu)       | `ui.navigationMenu`    | `variant: 'pill'`, `highlight: true` |

For example, to change the table of contents highlight style to `circuit` and switch the sidebar navigation variant to `pill`:

```ts [app.config.ts]
export default defineAppConfig({
  ui: {
    contentToc: {
      defaultVariants: {
        highlightVariant: 'circuit',
        highlightColor: 'secondary',
      },
    },
    contentNavigation: {
      defaultVariants: {
        variant: 'pill',
        highlight: false,
      },
    },
  },
})
```

Each component supports the following variant options:

- **`highlight`** — Display an active indicator line (`true` or `false`)
- **`highlightColor`** — Color of the indicator (`primary`, `secondary`, `neutral`, etc.)
- **`variant`** — Visual style (`pill` or `link`, where applicable)
- **`highlightVariant`** — Indicator style (`straight` or `circuit`, ContentToc only)
- **`color`** — Base color of the active link