Skip to content

Customization¤

It is possible to customize the output of the generated documentation with CSS and/or by overriding templates.

CSS classes¤

Our templates add CSS classes to many HTML elements to make it possible for users to customize the resulting look and feel.

To add CSS rules and style mkdocstrings' output, put them in a CSS file in your docs folder, for example in docs/css/mkdocstrings.css, and reference this file in MkDocs' extra_css configuration option:

mkdocs.yml
extra_css:
- css/mkdocstrings.css

Example:

docs/css/mkdocstrings.css
.doc-section-title {
  font-weight: bold;
}

Symbol types¤

Colors¤

You can customize the colors of the symbol types (see show_symbol_type_heading and show_symbol_type_toc) by overriding the values of our CSS variables, for example:

docs/css/mkdocstrings.css
[data-md-color-scheme="default"] {
  --doc-symbol-ts-accessor-fg-color: #6f42c1;
  --doc-symbol-ts-attribute-fg-color: #6f42c1;
  --doc-symbol-ts-class-fg-color: #22863a;
  --doc-symbol-ts-constructor-fg-color: #1f66ff;
  --doc-symbol-ts-enum-fg-color: #6f42c1;
  --doc-symbol-ts-enum_member-fg-color: #f0ad4e;
  --doc-symbol-ts-interface-fg-color: #6f42c1;
  --doc-symbol-ts-method-fg-color: #0366d6;
  --doc-symbol-ts-module-fg-color: #0366d6;
  --doc-symbol-ts-namespace-fg-color: #0366d6;
  --doc-symbol-ts-parameter-fg-color: #e36209;
  --doc-symbol-ts-project-fg-color: #24292f;
  --doc-symbol-ts-property-fg-color: #6f42c1;
  --doc-symbol-ts-type-fg-color: #6f42c1;
  --doc-symbol-ts-type_alias-fg-color: #6f42c1;
  --doc-symbol-ts-variable-fg-color: #e36209;

  --doc-symbol-ts-accessor-bg-color: #6f42c11a;
  --doc-symbol-ts-attribute-bg-color: #6f42c11a;
  --doc-symbol-ts-class-bg-color: #22863a1a;
  --doc-symbol-ts-constructor-bg-color: #1f66ff1a;
  --doc-symbol-ts-enum-bg-color: #6f42c11a;
  --doc-symbol-ts-enum_member-bg-color: #f0ad4e1a;
  --doc-symbol-ts-interface-bg-color: #6f42c11a;
  --doc-symbol-ts-method-bg-color: #0366d61a;
  --doc-symbol-ts-module-bg-color: #0366d61a;
  --doc-symbol-ts-namespace-bg-color: #0366d61a;
  --doc-symbol-ts-parameter-bg-color: #e362091a;
  --doc-symbol-ts-project-bg-color: #24292f1a;
  --doc-symbol-ts-property-bg-color: #6f42c11a;
  --doc-symbol-ts-type-bg-color: #6f42c11a;
  --doc-symbol-ts-type_alias-bg-color: #6f42c11a;
  --doc-symbol-ts-variable-bg-color: #e362091a;
}

[data-md-color-scheme="slate"] {
  --doc-symbol-ts-accessor-fg-color: #d4a5f0;
  --doc-symbol-ts-attribute-fg-color: #d4a5f0;
  --doc-symbol-ts-class-fg-color: #78e7d1;
  --doc-symbol-ts-constructor-fg-color: #6ba3ff;
  --doc-symbol-ts-enum-fg-color: #d4a5f0;
  --doc-symbol-ts-enum_member-fg-color: #ffb864;
  --doc-symbol-ts-interface-fg-color: #d4a5f0;
  --doc-symbol-ts-method-fg-color: #58a6ff;
  --doc-symbol-ts-module-fg-color: #58a6ff;
  --doc-symbol-ts-namespace-fg-color: #58a6ff;
  --doc-symbol-ts-parameter-fg-color: #f4a261;
  --doc-symbol-ts-project-fg-color: #e1e4e8;
  --doc-symbol-ts-property-fg-color: #d4a5f0;
  --doc-symbol-ts-type-fg-color: #d4a5f0;
  --doc-symbol-ts-type_alias-fg-color: #d4a5f0;
  --doc-symbol-ts-variable-fg-color: #f4a261;

  --doc-symbol-ts-accessor-bg-color: #d4a5f01a;
  --doc-symbol-ts-attribute-bg-color: #d4a5f01a;
  --doc-symbol-ts-class-bg-color: #78e7d11a;
  --doc-symbol-ts-constructor-bg-color: #6ba3ff1a;
  --doc-symbol-ts-enum-bg-color: #d4a5f01a;
  --doc-symbol-ts-enum_member-bg-color: #ffb8641a;
  --doc-symbol-ts-interface-bg-color: #d4a5f01a;
  --doc-symbol-ts-method-bg-color: #58a6ff1a;
  --doc-symbol-ts-module-bg-color: #58a6ff1a;
  --doc-symbol-ts-namespace-bg-color: #58a6ff1a;
  --doc-symbol-ts-parameter-bg-color: #f4a2611a;
  --doc-symbol-ts-project-bg-color: #e1e4e81a;
  --doc-symbol-ts-property-bg-color: #d4a5f01a;
  --doc-symbol-ts-type-bg-color: #d4a5f01a;
  --doc-symbol-ts-type_alias-bg-color: #d4a5f01a;
  --doc-symbol-ts-variable-bg-color: #f4a2611a;
}

The [data-md-color-scheme="*"] selectors work with the [Material for MkDocs] theme. If you are using another theme, adapt the selectors to this theme if it supports light and dark themes, otherwise just override the variables at root level:

docs/css/mkdocstrings.css
:root {
  --doc-symbol-ts-class-fg-color: #d1b619;
  --doc-symbol-ts-class-bg-color: #d1b6191a;
}

Preview

Try cycling through the themes to see the colors for each theme:

Names¤

You can also change the actual symbol names. For example, to use single letters instead of truncated types:

docs/css/mkdocstrings.css
.doc-symbol-ts-class::after {
  content: "C";
}

Preview

  • Class:

Templates¤

Templates are organized into the following tree:

📁 theme/
├──  accessor.html.jinja
├──  call_signature.html.jinja
├──  children.html.jinja
├──  class.html.jinja
├──  constructor.html.jinja
├──  constructor_signature.html.jinja
├──  dispatch.html.jinja
├──  enum.html.jinja
├──  enum_member.html.jinja
├──  function.html.jinja
├──  interface.html.jinja
├──  method.html.jinja
├──  module.html.jinja
├──  namespace.html.jinja
├──  project.html.jinja
├──  property.html.jinja
├──  reference.html.jinja
├──  type.html.jinja
├──  type_alias.html.jinja
└──  variable.html.jinja

See them in the repository. See the general mkdocstrings documentation to learn how to override them: https://mkdocstrings.github.io/theming/#templates.

Each one of these templates extends a base version in theme/_base. Example:

theme/data.html.jinja
{% extends "_base/data.html.jinja" %}

Some of these templates define Jinja blocks. allowing to customize only parts of a template without having to fully copy-paste it into your project:

templates/theme/data.html
{% extends "_base/data.html" %}
{% block contents scoped %}
  {{ block.super }}
  Additional contents
{% endblock contents %}