How to override the default stylesheets in a custom theme?

[dom-rau]

Search terms

custom theme, override default styles, override stylesheet

Question

Hello!

I noticed most themes load multiple stylesheets: the default from TypeDoc and custom, which override the default styles. Is it possible to override the default stylesheet in custom themes?

I tried hooking into RendererEvent.END, but it seems that the stylesheet files are not generated yet at this point. The generated documentation assets contain default stylesheets.

import { Application, JSX, DefaultTheme, RendererEvent, } from 'typedoc';
import * as path from 'path';
import * as fs from 'fs';

export function load(app: Application) {
    // Assuming that the custom theme directory contains files ./dist/assets/style.css and ./dist/assets/highlight.css
    app.renderer.on(RendererEvent.END, (event: RendererEvent) => {
        const sourceDir = path.resolve(__dirname, './assets');
        const targetDir = path.resolve(app.options.getValue('out'), 'assets');

        fs.cpSync(sourceDir, targetDir, { force: true, recursive: true });
    });

    app.renderer.defineTheme("my-theme", DefaultTheme);
}

Is there a better way to ensure that custom stylesheets override the default ones in custom theme?

[Gerrit0]

TypeDoc copies to the assets folder during the end event, but because of how the event priority system works, your event listener runs before TypeDoc's as it is added with the default priority of 0, it only takes a slight change to make your handler run after:

app.renderer.on(RendererEvent.END, listener, -1)

[dom-rau]

@Gerrit0, thank you for the explanation!