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.

[!TIP] The theme is fully customizable 🚀.

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-css src/index.ts

Method 2: Configuration File

Create a typedoc.mjs 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-css',

  // Optional: Include version information
  includeVersion: true,

  // Optional: Include groups
  navigation: {
    includeGroups: 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

View a live customised example here.

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-foreground-color-default: DimGray;
    --va-background-color-default: WhiteSmoke;
    --va-border-color: Gainsboro;
    --va-space-ratio: 0.5;
  }
}
@media (prefers-color-scheme: dark) {
  :root {
    --va-foreground-color-default: Silver;
    --va-background-color-default: MidnightBlue;
    --va-border-color: RoyalBlue;
    --va-space-ratio: 0.5;
  }
}

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

[data-theme='dark'] {
  --va-foreground-color-default: Silver;
  --va-background-color-default: 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.