Theme

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.

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:

@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;
}

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

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:

• primary → Main brand color, used as the default color for components
  (default: green)
• secondary → Secondary color to complement the primary color
  (default: blue)
• success → Used for success states
  (default: green)
• info → Used for informational states
  (default: blue)
• warning → Used for warning states
  (default: yellow)
• error → Used for form error validation states
  (default: red)
• neutral → Neutral color for backgrounds, text, etc.
  (default: slate)

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

export default defineAppConfig({
  ui: {
    colors: {
      primary: 'blue',
      neutral: 'zinc'
    }
  }
})

Components

Beyond colors, all Nuxt UI 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).

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

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.

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:

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

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