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.

{
    "theme": {
        "name": "poetry",
        "logo": "/path/to/logo.svg",
        "favicon": "/path/to/favicon.svg",
        // ... other theme settings
    }
}

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:

.
├─ .docs            # .docs root
│  └─ theme
│     ├─ index.ts   # theme entry
│     └─ index.css  # theme styles entry
|
└─ docs.json        # settings file

theme/index.css

You can customize theme styles via index.css:

/* your custom css styles */

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:

import {BaseTheme} from "xyd-js/themes"

export default class MyTheme extends BaseTheme {
    constructor() {
        super();

        // you can access theme settings here
        // this.theme # do stuff what u want with `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: