Getting Started

Antora Dark Theme is a supplemental UI that adds dark mode support to your Antora documentation sites. It layers on top of the Antora Default UI without requiring modifications to the base UI bundle.

Features

  • Dark mode toggle - A sun/moon icon button in the navbar that switches between light and dark themes

  • System preference detection - Automatically applies dark mode if your OS is set to dark mode

  • Persistent preference - Remembers your choice via localStorage

  • No FOUC - Dark mode is applied before page render, preventing Flash of Unstyled Content

  • Non-invasive - Works as a supplemental UI overlay; no need to fork or rebuild the Antora default UI bundle

  • Comprehensive styling - Covers navbar, navigation panels, content area, code blocks, tables, admonition blocks, footer, and more

Quick Start

The fastest way to get started:

pnpm
pnpm add -D github:the-dev-center/antora-dark-theme
npm
npm install --save-dev github:the-dev-center/antora-dark-theme
yarn
yarn add -D github:the-dev-center/antora-dark-theme

Then add to 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

Build your site and you’re done!

antora antora-playbook.yml
See Installation for all installation methods.

Compatibility

Component Version

Antora

3.x

Antora Default UI

Any version (HEAD recommended)

Node.js

18+

Browser Support

This theme supports all modern browsers:

  • Chrome/Edge (latest)

  • Firefox (latest)

  • Safari (latest)

  • Opera (latest)

The theme uses standard CSS and JavaScript that works in all browsers supporting localStorage, classList, and matchMedia.

Help Get Dark Mode into Antora

Dark mode has been a long-requested feature for Antora documentation sites. This project provides a working community solution, and we’ve submitted it for inclusion in the official Antora Default UI.

Want official dark mode support? Head over to the GitLab issue and give it a thumbs up!

Feature Request: Dark Mode #216

Your upvote helps the Antora team prioritize this feature.