---
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[For a full overview of Nuxt UI theming, check out the Nuxt UI documentation.]{to="https://ui.nuxt.com/getting-started/theme"}## 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.
::

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

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