CR: Aurora + Ocean Themes — Implementation

Implementation Details

CSS Structure (~540 lines added)

Each theme follows the established pattern:

[data-theme="aurora"],
html[data-theme="aurora"] {
  --bg-primary: #0a0f14;
  --bg-secondary: #111a22;
  --text-primary: #c9e4ca;
  --accent-primary: #00d9a0;
  --accent-secondary: #7df9ff;
}

Selectors include:

  • Body and main content backgrounds

  • Navigation panels and menus

  • Tables (headers, rows, hover states)

  • Code blocks and inline code

  • Admonition blocks (note, tip, warning, caution, important)

  • TOC sidebar

  • Search input

  • Executive summary blocks

JavaScript Updates

Theme toggle array expanded:

var themes = ['dark', 'catppuccin', 'light', 'royal', 'aurora', 'ocean']

Custom SVG icons added for visual identity in theme picker.

Local Verification

cd ~/atelier/_bibliotheca/domus-antora-ui
npm run build

Visual Checklist

  • Theme toggle cycles through all 6 themes

  • Cookie persists theme selection

  • No FOUC (flash of unstyled content)

  • Tables render correctly

  • Code blocks readable

  • Admonition colors appropriate

  • Navigation sidebar styled

  • Search input visible