typedoc-theme

Varvara TypeDoc Theme

View a live example here.

Varvara TypeDoc Theme is a custom theme for TypeDoc, designed to provide a seamless documentation experience for TypeScript projects.

Installation

Ensure TypeDoc is installed in your project.

Install the Varvara TypeDoc theme as a development dependency:

npm install varvara-typedoc-theme --save-dev

Usage

Method 1: Command-Line Interface (CLI)

Use the following command to generate documentation with the Varvara theme:

npx typedoc --plugin varvara-typedoc-theme --theme varvara

Method 2: Configuration File

Create a typedoc.js configuration file in your project's root directory:

Note

You can use various TypeDoc configuration files to customize your documentation generation.

/** @type {Partial<import("typedoc").TypeDocOptions>} */
const config = {
  // Specify the Varvara theme plugin
  plugin: ['varvara-typedoc-theme'],

  // Set the theme to Varvara
  theme: 'varvara',

  // Optional: Include version information
  includeVersion: true

  // Additional TypeDoc configuration options
  // ... other options as needed
}

export default config

Important

The theme must be explicitly specified. If not set, the plugin will not be loaded by default.

Customization

Add custom styling by specifying an extra CSS file using the customCss option:

npx typedoc --customCss ./styles/custom.css

Varvara CSS provides variables to customize the theme appearance:

/* custom.css */

@media (prefers-color-scheme: light) {
  :root {
    --va-color-foreground: DimGray;
    --va-color-background: WhiteSmoke;
    --va-border-color: Gainsboro;
    --va-space-ratio: 0.5;
  }
}
@media (prefers-color-scheme: dark) {
  :root {
    --va-color-foreground: Silver;
    --va-color-background: MidnightBlue;
    --va-border-color: RoyalBlue;
    --va-space-ratio: 0.5;
  }
}

[data-theme='light'] {
  --va-color-foreground: DimGray;
  --va-color-background: WhiteSmoke;
  --va-border-color: Gainsboro;
  --va-space-ratio: 0.5;
}

[data-theme='dark'] {
  --va-color-foreground: Silver;
  --va-color-background: MidnightBlue;
  --va-border-color: RoyalBlue;
  --va-space-ratio: 0.5;
}

See the documentation for the complete list of available properties.

Contributing

Feel free to explore, test, and provide feedback. Your contribution is highly appreciated as we work towards improving and stabilizing the project.

License

This project is licensed under the MIT License.