Skip to main content
Docus uses Nuxt UI’s theming system, allowing you to customize colors, icons, and component variants throughout your documentation site.

​
Color System

Docus supports a comprehensive color system with primary and neutral color palettes:
[app.config.ts]
export default defineAppConfig({
  ui: {
    colors: {
      primary: 'emerald',
      neutral: 'zinc',
    },
  },
})

​
Primary Colors

​
ui.colors.primary
string
default:"green"
Primary color of your UI. Choose from:
  • red
  • orange
  • amber
  • yellow
  • lime
  • green
  • emerald
  • teal
  • cyan
  • sky
  • blue
  • indigo
  • violet
  • purple
  • fuchsia
  • pink
  • rose

​
Neutral Colors

​
ui.colors.neutral
string
default:"slate"
Neutral color for backgrounds and text. Choose from:
  • slate
  • gray
  • zinc
  • neutral
  • stone
ui: {
  colors: {
    primary: 'emerald',
    neutral: 'zinc',
  },
}

​
Icon Configuration

Customize icons used throughout the interface:
[app.config.ts]
export default defineAppConfig({
  ui: {
    icons: {
      search: 'i-lucide-search',
      dark: 'i-lucide-moon',
      light: 'i-lucide-sun',
      external: 'i-lucide-external-link',
      chevron: 'i-lucide-chevron-down',
      hash: 'i-lucide-hash',
    },
  },
})
​
ui.icons.search
string
default:"i-lucide-search"
Icon displayed in the search bar
​
ui.icons.dark
string
default:"i-lucide-moon"
Icon for color mode button in dark mode
​
ui.icons.light
string
default:"i-lucide-sun"
Icon for color mode button in light mode
​
ui.icons.external
string
default:"i-lucide-external-link"
Icon for external links
​
ui.icons.chevron
string
default:"i-lucide-chevron-down"
Icon for chevrons in navigation
​
ui.icons.hash
string
default:"i-lucide-hash"
Icon for heading anchor links
Docus uses Iconify with the Lucide icon set by default. You can use any icon from Iconify.

​
Custom Icon Collections

Add custom SVG icons from your project:
[nuxt.config.ts]
export default defineNuxtConfig({
  icon: {
    customCollections: [
      {
        prefix: 'custom',
        dir: './app/assets/icons',
      },
    ],
    clientBundle: {
      scan: true,
      includeCustomCollections: true,
    },
  },
})
1

Create Icons Directory

Create a directory for your custom SVG icons:
mkdir -p app/assets/icons
2

Add SVG Files

Place SVG files in the directory:
app/assets/icons/
├── ai.svg
└── logo.svg
3

Use Custom Icons

Reference them with your custom prefix:
<UIcon name="i-custom-ai" />

​
Component Styling

Customize individual component variants and slots using the ui configuration:
[app.config.ts]
export default defineAppConfig({
  ui: {
    commandPalette: {
      slots: {
        item: 'items-center',
        input: '[&_.iconify]:size-4 [&_.iconify]:mx-0.5',
        itemLeadingIcon: 'size-4 mx-0.5',
      },
    },
    contentNavigation: {
      slots: {
        linkLeadingIcon: 'size-4 mr-1',
        linkTrailing: 'hidden',
      },
      defaultVariants: {
        variant: 'link',
      },
    },
    pageLinks: {
      slots: {
        linkLeadingIcon: 'size-4',
        linkLabelExternalIcon: 'size-2.5',
      },
    },
  },
})

​
Component Slots

commandPalette: {
  slots: {
    item: 'items-center',
    input: '[&_.iconify]:size-4 [&_.iconify]:mx-0.5',
    itemLeadingIcon: 'size-4 mx-0.5',
  },
}
Customize the search command palette appearance.
contentNavigation: {
  slots: {
    linkLeadingIcon: 'size-4 mr-1',
    linkTrailing: 'hidden',
  },
  defaultVariants: {
    variant: 'link',
  },
}
Style the sidebar navigation component.
pageLinks: {
  slots: {
    linkLeadingIcon: 'size-4',
    linkLabelExternalIcon: 'size-2.5',
  },
}
Customize page header and footer links.
pageHero: {
  slots: {
    title: 'font-semibold sm:text-6xl',
    container: '!pb-0',
  },
}
Style the page hero section on landing pages.

​
Dark Mode

Docus includes built-in dark mode support. Users can toggle between light and dark themes using the color mode button in the header.

​
Force Color Mode

[nuxt.config.ts]
export default defineNuxtConfig({
  colorMode: {
    preference: 'dark', // 'light', 'dark', or 'system'
  },
})
​
colorMode.preference
string
default:"system"
Default color mode: light, dark, or system

​
CSS Customization

Add custom CSS to further customize your theme:
[assets/css/main.css]
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --header-height: 64px;
  }
}

@layer components {
  .prose {
    @apply max-w-none;
  }
}
Then import it in your Nuxt config:
[nuxt.config.ts]
export default defineNuxtConfig({
  css: ['~/assets/css/main.css'],
})
When customizing CSS, be mindful of Nuxt UI’s existing styles to avoid conflicts. Use Tailwind’s @layer directive for better organization.

​
Typography

Docus uses the system font stack by default. Customize typography by overriding Tailwind configuration:
[tailwind.config.ts]
import type { Config } from 'tailwindcss'

export default <Partial<Config>>{
  theme: {
    extend: {
      fontFamily: {
        sans: ['Inter', 'sans-serif'],
        mono: ['Fira Code', 'monospace'],
      },
    },
  },
}
1

Install Fonts

Add font files or use a font loading service:
[nuxt.config.ts]
export default defineNuxtConfig({
  modules: ['@nuxtjs/google-fonts'],
  googleFonts: {
    families: {
      Inter: [400, 500, 600, 700],
      'Fira Code': [400, 500],
    },
  },
})
2

Configure Tailwind

Update your Tailwind config to use the new fonts
3

Apply Fonts

The fonts will automatically apply to your documentation

​
Syntax Highlighting

Customize code block syntax highlighting:
[nuxt.config.ts]
export default defineNuxtConfig({
  content: {
    build: {
      markdown: {
        highlight: {
          langs: ['bash', 'typescript', 'javascript', 'vue', 'json'],
        },
      },
    },
  },
  mdc: {
    highlight: {
      shikiEngine: 'javascript',
    },
  },
})
​
content.build.markdown.highlight.langs
array
Array of language IDs for syntax highlighting support
​
mdc.highlight.shikiEngine
string
default:"javascript"
Shiki engine to use: javascript or wasm

​
Next Steps

Customization

Learn how to override components

Nuxt UI Docs

Explore Nuxt UI theming system

Build docs developers (and LLMs) love

Get started for freeTalk to us