Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

community creator
typedoc
theme

How to customize a Typedoc theme

Carlos Roso

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
  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 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
  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
widget

RELATED TAGS

community creator
typedoc
theme

CONTRIBUTOR

Carlos Roso
Copyright ©2022 Educative, Inc. All rights reserved
RELATED COURSES

View all Courses

Keep Exploring