Yes, you can pass coding interviews!
Get my guide for free
April 21, 2020

How to customize a Typedoc theme

Tweaking 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 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 which will hold the custom theme.
$ mkdir custom-theme
  1. 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 as it 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
  1. 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;
}
  1. 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"
}
  1. Profit

screenshot

Logo

I'm Carlos Roso. I'm a Software Engineer and digital nomad at Toptal. Previously Software Architect at Crossover. In love with open source and design.

More about me
Join the newsletter

I write about remote work, software and personal growth. Subscribe to enjoy my articles every once in a while.