---
title: "Theme"
description: "Custom the appearance of your Docus documentation thanks to Nuxt UI flexible theming."
canonical_url: "https://docus.dev/en/concepts/theme"
---
# Theme

> Custom the appearance of your Docus documentation thanks to Nuxt UI flexible theming.

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

</tip>

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

To override the theme, create an `app/app.css` file in your project:

```css [app/app.css]
@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;
}
```

<warning>

Docus automatically imports `app/app.css` — you don't need to add it to the `css` array in `nuxt.config.ts`, and you should **not** include `@import "tailwindcss"` in this file as Docus handles it for you.

</warning>

## Colors

Docus 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">



</u-badge>

 → Main brand color, used as the default color for components <br />

 <span className="text-xs,text-muted">

(default: green)

</span>
- <u-badge label="secondary" variant="outline" color="secondary">



</u-badge>

 → Secondary color to complement the primary color <br />

 <span className="text-xs,text-muted">

(default: blue)

</span>
- <u-badge label="success" variant="outline" color="success">



</u-badge>

 → Used for success states <br />

 <span className="text-xs,text-muted">

(default: green)

</span>
- <u-badge label="info" variant="outline" color="info">



</u-badge>

 → Used for informational states <br />

 <span className="text-xs,text-muted">

(default: blue)

</span>
- <u-badge label="warning" variant="outline" color="warning">



</u-badge>

 → Used for warning states <br />

 <span className="text-xs,text-muted">

(default: yellow)

</span>
- <u-badge label="error" variant="outline" color="error">



</u-badge>

 → Used for form error validation states <br />

 <span className="text-xs,text-muted">

(default: red)

</span>
- <u-badge label="neutral" variant="outline" color="neutral">



</u-badge>

 → Neutral color for backgrounds, text, etc. <br />

 <span className="text-xs,text-muted">

(default: slate)

</span>

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.

</note>

## Docus Subcomponents

Docus 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:

<table>
<thead>
  <tr>
    <th>
      Component
    </th>
    
    <th>
      Key
    </th>
    
    <th>
      Defaults
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <a href="https://ui.nuxt.com/components/content-toc" rel="nofollow">
        ContentToc
      </a>
    </td>
    
    <td>
      <code>
        ui.contentToc
      </code>
    </td>
    
    <td>
      <code>
        highlight: true
      </code>
    </td>
  </tr>
  
  <tr>
    <td>
      <a href="https://ui.nuxt.com/components/content-navigation" rel="nofollow">
        ContentNavigation
      </a>
    </td>
    
    <td>
      <code>
        ui.contentNavigation
      </code>
    </td>
    
    <td>
      <code>
        variant: 'link'
      </code>
      
      , <code>
        highlight: true
      </code>
    </td>
  </tr>
  
  <tr>
    <td>
      <a href="https://ui.nuxt.com/components/navigation-menu" rel="nofollow">
        NavigationMenu
      </a>
    </td>
    
    <td>
      <code>
        ui.navigationMenu
      </code>
    </td>
    
    <td>
      <code>
        variant: 'pill'
      </code>
      
      , <code>
        highlight: true
      </code>
    </td>
  </tr>
</tbody>
</table>

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


## Sitemap

See the full [sitemap](https://docus.dev/sitemap.md) for all pages.