Theming

Athena themes are driven by CSS custom properties on html[data-bs-theme]. Light, dark, and high-contrast modes are included and remembered with a small local storage value.

Core Tokens

--athena-bg, --athena-surface, and --athena-surface-soft control page and card surfaces.
--athena-text, --athena-muted, and --athena-nav control readable text states.
--athena-border, --athena-focus, and chart tokens support WCAG-oriented contrast and focus visibility.

Small Text And Badges

.fs-7 and .fs-8 extend Bootstrap's type utilities for compact interface text. Outline badges use the same theme-aware status tokens as fill badges, so .badge-outline-success and .text-bg-success stay aligned across light, dark, and high-contrast themes.

Theme Checklist

Test light, dark, and high-contrast themes for every new component. Use text labels or icons with labels; do not rely on colour alone. Keep focus rings visible against every surface token.