Custom themes

There are two ways of customizing your theme:

1. Use the default theme and provide some settings (ie. theme colors, logo, website url, title, description). This is nice if you want to style the pages quickly. Check out Default theme examples.
2. Create a new theme using template files. This is useful if you want to create complete different new themes or need more specific looks. This can also be used to overwrite specific parts of another theme.

Create a custom theme

A theme needs a config.json file, which can look like this:

{
  "name": "My Custom Theme",
  "author": "My name",
  "parentTheme": "default"
}

Use the -theme argument to use the theme. You can look at the default theme to see how to modify to your needs. A theme can also inherit from another theme, using parentTheme. This allows to overwrite specific templates of a parent theme. The Haxe API documentation for example uses this, check out its theme files how it is structured. It extends the default theme and only changes the topbar, footer and package description.

Resources

Each theme can use resources like images/stylesheets/JavaScript files etc. By default these are placed in the "resources". When documentation is generated, the files are copied into the root folder of the output. To link correctly to a resource correctly, use the config.rootPath in the template like this:

<img src="::api.config.rootPath::images/myImage.jpg" />

Editing templates

All templates are .mtt files which are templo templates. Templates contain expressions delimited by :: :: just like the haxe.Template syntax.

Check out the templo template syntax here: https://github.com/ncannasse/templo

Using custom defines in template

If you want to use a custom setting/define in the theme:

<div ::cond api.isDefined("my_setting")::>This is my setting: ::api.getValue('my_setting')::</div>