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 your own main.css file in your application.

@import "tailwindcss";
@import "@nuxt/ui-pro";

@source "../../../content/**/*";
@source "../../../node_modules/docus/app/**/*";

This way you can override your theme:

@import "tailwindcss";
@import "@nuxt/ui-pro";

@source "../../../content/**/*";
@source "../../../node_modules/docus/app/**/*";

@theme static {
  --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-pro'],
  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.