Customization Introduction

Customizing your documentation allows you to create a unique and branded experience for your users. There are three main approaches for customization:

1. Customization via settings file - choose from a variety of pre-built themes and tweak using available theme settings

2. Extending the default theme - build upon the existing design while adding your own enhancements via code

3. Creating a new theme - develop a completely new theme from scratch via code

Customization via Settings File

This is the simplest way to customize your documentation. You can do this by editing the docs.json file in the root of your project.

For more details on the theme settings, see the reference guide.

Customization via Code

To customize your documentation via code, you'll need to work with a .docs/theme directory inside your project root:

theme/index.css

You can customize theme styles via index.css:

theme/index.tsExperimental

xyd will lookup for index.ts if you want to modify or create new theme behavior. This file is only necessary when you need to extend default theme's functionality or create a new theme:

However, if you only want to customize styles, you can simply use index.css without creating an index.ts file.

Theme Reference

Theme settings are defined as an object with the following reference: