How to customize a Typedoc theme

How to tweak the look and feel of Typedoc with CSS and custom fonts.

According to the official docs, creating a custom theme requires the default theme assets to be copied on the theme. We’re just interested in how to tweak a few CSS props, so we don’t need the rest of the files (layouts, partials, templates, etc.)

1. Create the directory in your project that will hold the custom theme:

$ mkdir custom-theme

2. Copy the main.css file from node_modules/typedoc-default-themes/bin/default/assets/css/main.css and paste it in custom-theme/assets/css/main.css.

Note: The official docs say you need to copy the assets from typedoc-default-themes, but it won’t work and will only download a bunch of sass files.

$ mkdir -p custom-theme/assets/css    
$ cp node_modules/typedoc-default-themes/bin/default/assets/css/main.css custom-theme/assets/css

3. You can now edit the styles as you please. For example, the snippet below hides the legends, the navbar, and sets a different font family. I did this for node-dotconfig as it’s a pretty small utility and I wanted to keep the docs simple.

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap');

footer {
  display: none;
}

.tsd-page-toolbar {
  display: none;
}

.tsd-page-title {
  padding-top: 30px;
}

body {
  font-family: "Lato", sans-serif;
}

4. Run typedoc with the --theme configuration or edit your config file (typedoc.json or typedoc.js):

$ typedoc --theme ./custom-theme

Or with typedoc.json

{
  "...": "...",
  "theme": "./typedoc-theme"
}

5. Profit