Using themes

A theme decides how your docs look: the layout, the components and the styles. yaakdoc ships with Kiseki, and you can switch to another theme using your yaakdoc config:

{
  "theme": "kiseki",
  "themeOptions": {
    "codePanel": "inline"
  }
}

themeOptions are specific to each theme. The theme validates them and fills in defaults.

How themes are foundCopy Anchor Link

theme accepts:

• A short name, such as winxp. yaakdoc tries @yaakdoc/theme-winxp, then yaakdoc-theme-winxp, then winxp.
• A package name, such as yaakdoc-theme-winxp or @acme/docs-theme.
• A local path, such as ./theme, e.g. an ejected theme.

Install npm themes next to your config:

npm i -D yaakdoc-theme-winxp

The Yaak plugin installs npm themes for you.

The CLI's --theme (-t) flag overrides the config, so you can try a theme without editing anything:

npx yaakdoc --theme ./my-theme

CustomizingCopy Anchor Link

From the smallest change to the biggest:

1. Branding: colors, fonts, logo and links, through the config. Every theme supports these.
2. Theme options: whatever the theme offers, such as Kiseki's options.
3. Custom CSS: small style tweaks on top of the theme.
4. Ejecting: copy the theme into your project and change anything.
5. Your own theme: start from unstyled React components.