feat: add dark mode support with toggle button

Ryan Johnsonrequested to merge
AMDphreak/antora-ui-default:feat/dark-mode into HEAD

Summary

This MR adds dark mode support to the Antora Default UI with a toggle button in the navbar.

Features

  • Toggle button - Sun/moon icon in the navbar that switches between light and dark themes
  • System preference detection - Automatically applies dark mode if the user's OS prefers dark mode
  • Persistent preference - Remembers the user's choice via localStorage
  • No FOUC - Dark mode is applied before page render via inline script in head-meta.hbs

What's included

  • src/css/dark-mode.css - All dark mode styles using html.dark-theme selector prefix
  • src/js/07-dark-mode.js - Toggle button logic and theme management
  • src/partials/head-meta.hbs - FOUC prevention script
  • src/css/site.css - Import for dark-mode.css

Styling coverage

  • Navbar, navigation panels, sidebar, footer
  • Code blocks with syntax highlighting optimized for dark mode
  • Admonition blocks with subtle accent colors per type (note, tip, warning, caution, important)
  • Tables, quotes, examples, sidebars, and all block types
  • Component/version selector dropdown
  • Keyboard, button, and menu macros
  • Tabs extension support

Reference implementation

This is based on a working supplemental UI that's been tested in production:

Closes #216

Merge request reports