Theme

While Docapella's overall structure is fairly fixed, you can customize the look and feel of your project by changing the theme.

Colors

Docapella uses a 12-step color system similar to Radix Colors . All you have to do is provide your main theme color, and Docapella will generate your palette for you in both light and dark mode.

docapella.yaml · Colors

theme:
  colors:
    # Your brand's main color
    accent: "#F76B15"

This will generate the following palette:

Try turning on dark mode to see the difference.

These colors can be used in your custom CSS with the --accent-1 through --accent-12 variables.

Logo

You can specify a logo for your project. This will be shown in the header of your documentation.

docapella.yaml · Logo

theme:
  logo:
    src: _assets/logo.svg
    src_dark: _assets/logo-dark.svg

Note how you can specify a dark mode logo by using src_dark . If none is provided, Docapella will fall back to the light mode logo.