CR: Antora Aurora and Ocean Themes

Change Summary

Change ID

CR-2026-03-26-antora-aurora-ocean-themes

Type

Feature / UI Enhancement

Priority

P2 - Medium

Status

Implemented

Requested

2026-03-26

Implemented

2026-03-26

Owner

Evan Rosado

Background

Request to expand the Antora documentation theme palette with two additional themes designed for:

  • Maximum visual appeal and mesmerizing aesthetic

  • Productivity and focus during study/work sessions

  • Color psychology principles for concentration

Scope

Repository Affected

Repository Component Files Modified

domus-antora-ui

Theme CSS + JS

src/css/domus-theme.css, src/js/vendor/domus-ui.js

Architecture

Antora Theme System Architecture

Theme Specifications

Aurora (Theme 5)

Northern lights inspired theme with ethereal, dancing color accents.

Property Value

Background

Deep dark gradient #0a0f14 → #0d1117 → #0a1015

Text

Soft mint #c9e4ca

Primary Accent

Bioluminescent green #00d9a0

Secondary Accent

Electric cyan #7df9ff

Tertiary Accent

Soft violet #a78bfa

Effect

Gradient borders, glowing text shadows, aurora borealis navbar

Design Rationale: Aurora borealis is universally mesmerizing. Green/teal colors are associated with creativity and calm focus.

Ocean (Theme 6)

Deep sea blues with bioluminescent highlights for focused productivity.

Property Value

Background

Navy gradient #0a1628 → #0c1a30 → #071422

Text

Soft blue-white #b8d4e8

Primary Accent

Sky blue #0ea5e9

Secondary Accent

Cyan glow #22d3ee

Effect

Subtle box shadows, clean professional appearance

Design Rationale: Blue is scientifically proven to increase focus and productivity. Deep ocean aesthetic provides visual depth without distraction.

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.

Theme Comparison

Theme Mood Best For Colors

Dark

Neutral

General use, low light

Catppuccin base grays

Mocha

Cozy

Extended reading

Warm yellows, browns

Light

Bright

High ambient light

Clean whites

Royal

Regal

Executive content

Purple, magenta

Aurora

Ethereal

Creative work, inspiration

Green, cyan, violet gradients

Ocean

Focused

Deep work, study sessions

Navy, cyan highlights

Testing

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

Deployment

# 1. Push UI changes (triggers Cloudflare Pages build)
git -C ~/atelier/_bibliotheca/domus-antora-ui push origin main

# 2. After UI deploys (~2 min), rebuild docs
git -C ~/atelier/_bibliotheca/domus-docs commit --allow-empty -m "chore: Rebuild with Aurora + Ocean themes" && \
git -C ~/atelier/_bibliotheca/domus-docs push origin main

Risk Assessment

Risk Mitigation Impact

CSS conflicts

Used !important consistently, tested all selectors

Low

Build size increase

+540 lines CSS (~15KB uncompressed)

Negligible

Browser compatibility

CSS gradients and variables widely supported

Low

Rollback Plan

If issues arise, revert commit:

git -C ~/atelier/_bibliotheca/domus-antora-ui revert HEAD
git -C ~/atelier/_bibliotheca/domus-antora-ui push origin main

Related Documentation

Changelog

Date Author Change

2026-03-26

Evan Rosado

CR created post-implementation (retroactive documentation)

2026-03-26

Evan Rosado

Aurora and Ocean themes implemented and pushed