Customization

You can customize your documentation, from colors to layout.

Colors

You can change the colors of your documentation using a tokens.config.ts file.

Theme

Currently, colors for the theme in tokens.config.ts looks like this:

tokens.config.ts
import { defineTheme } from 'pinceau'

export default defineTheme({
  color: {
    primary: {
      50: '#fff7ed',
      100: '#ffedd5',
      200: '#fed7aa',
      300: '#fdba74',
      400: '#fb923c',
      500: '#f97316',
      600: '#ea580c',
      700: '#c2410c',
      800: '#9a3412',
      900: '#7c2d12',
    }
  }
})

But you can easily change colors to correspond to your brand.

You can learn more about Pinceau.

Loading bar

You can easily change the color of the loading bar using the docus.loadingBar option in tokens.config.ts.

tokens.config.ts
export default defineTheme({
  docus: {
    loadingBar: {
      height: '3px',
      gradientColorStop1: '#f4271c',
      gradientColorStop2: '#f49321',
      gradientColorStop3: '#f0dd28'
    }
  }
})

Page

You can remove the toc, bottom or the aside per page using the front-matter.

content\1.guide\5.customization.md
---
toc: false
bottom: false
aside: false
---
You can learn more about pages.

Layout

You can enable a fluid layout using a app.config.ts file.

app.config.ts
export default defineAppConfig({
  docus: {
    main: {
      fluid: true,
      padded: true
    },
    header: {
      fluid: true
    },
    footer: {
      fluid: true
    }
  }
})
You can learn more about Docus configuration.
Edit this page on GitHub
Table of Contents