Installation

There are several ways to add the dark theme to your Antora project.

Method 1: Install from GitHub (Recommended)

Install directly from the GitHub repository:

pnpm

# Latest version
pnpm add -D github:antora-supplemental/antora-dark-theme

# Specific version
pnpm add -D github:antora-supplemental/antora-dark-theme#v0.1.0

npm

npm install --save-dev github:antora-supplemental/antora-dark-theme

yarn

yarn add -D github:antora-supplemental/antora-dark-theme

Then configure your antora-playbook.yml:

ui:
  bundle:
    url: https://gitlab.com/antora/antora-ui-default/-/jobs/artifacts/HEAD/raw/build/ui-bundle.zip?job=bundle-stable
    snapshot: true
  supplemental_files: ./node_modules/antora-dark-theme/supplemental-ui

Method 2: Install from npm Registry

If the package is published to npm:

pnpm

pnpm add -D antora-dark-theme

npm

npm install --save-dev antora-dark-theme

yarn

yarn add -D antora-dark-theme

Same playbook configuration as Method 1.

Method 3: Install from Release Tarball

Download a specific release directly:

pnpm

pnpm add -D https://github.com/antora-supplemental/antora-dark-theme/releases/download/v0.1.0/antora-dark-theme-0.1.0.tgz

npm

npm install --save-dev https://github.com/antora-supplemental/antora-dark-theme/releases/download/v0.1.0/antora-dark-theme-0.1.0.tgz

yarn

yarn add -D https://github.com/antora-supplemental/antora-dark-theme/releases/download/v0.1.0/antora-dark-theme-0.1.0.tgz

Method 4: Copy supplemental-ui Folder

For maximum control, copy the supplemental-ui folder directly into your project:

Clone or download the repository

Copy the supplemental-ui folder to your project root:

cp -r supplemental-ui /path/to/your/antora-project/

Configure your antora-playbook.yml:

ui:
  bundle:
    url: https://gitlab.com/antora/antora-ui-default/-/jobs/artifacts/HEAD/raw/build/ui-bundle.zip?job=bundle-stable
    snapshot: true
  supplemental_files: ./supplemental-ui

Verify Installation

Build your site to verify the installation:

antora antora-playbook.yml

Open the generated site in a browser. You should see a sun/moon toggle button in the navbar. Click it to switch between light and dark modes.