You too can ace that coding interview
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(';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



I'm Carlos Roso. I'm a Software Engineer at Meta. Former SDE at Amazon. Ex digital nomad at Toptal and 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.