/* ============================================================================ App theme palettes. Activate a theme by setting `data-app-theme=""` on . The theme override happens through CSS custom properties — Bootstrap reads --bs-primary (and friends) when computing primary buttons, badges, links, focus rings, the avatar circle, etc., so retinting requires zero markup changes. How to add a new theme: 1. Pick a primary colour. Compute its RGB triple (e.g. #005B41 → 0,91,65). 2. Drop a new block below. 3. Add a new
  • in templates/partials/_navbar.html with the matching data-theme-pick="" and data-theme-color matching the swatch. ============================================================================ */ /* ── Emerald — deep green with a lime accent ──────────────────────────── */ [data-app-theme="emerald"] { --bs-primary: #005B41; --bs-primary-rgb: 0, 91, 65; --bs-link-color: #005B41; --bs-link-color-rgb: 0, 91, 65; --bs-link-hover-color: #003D2C; --app-accent: #A9C40A; } /* ── Crimson — red with a saffron accent ──────────────────────────────── */ [data-app-theme="crimson"] { --bs-primary: #E31837; --bs-primary-rgb: 227, 24, 55; --bs-link-color: #E31837; --bs-link-color-rgb: 227, 24, 55; --bs-link-hover-color: #B01228; --app-accent: #F58220; } /* ── Royal Blue — corporate navy with a yellow accent ─────────────────── */ [data-app-theme="royal"] { --bs-primary: #003B7E; --bs-primary-rgb: 0, 59, 126; --bs-link-color: #003B7E; --bs-link-color-rgb: 0, 59, 126; --bs-link-hover-color: #002857; --app-accent: #FFC72C; } /* ── Pine — bottle green with a gold accent ───────────────────────────── */ [data-app-theme="pine"] { --bs-primary: #006A4D; --bs-primary-rgb: 0, 106, 77; --bs-link-color: #006A4D; --bs-link-color-rgb: 0, 106, 77; --bs-link-hover-color: #004E38; --app-accent: #FDB927; } /* ── Midnight — deep navy with a red accent ───────────────────────────── */ [data-app-theme="midnight"] { --bs-primary: #1A3A6E; --bs-primary-rgb: 26, 58, 110; --bs-link-color: #1A3A6E; --bs-link-color-rgb: 26, 58, 110; --bs-link-hover-color: #11264D; --app-accent: #D6232E; } /* ── Forest — pure green with an amber accent ─────────────────────────── */ [data-app-theme="forest"] { --bs-primary: #00713F; --bs-primary-rgb: 0, 113, 63; --bs-link-color: #00713F; --bs-link-color-rgb: 0, 113, 63; --bs-link-hover-color: #00502D; --app-accent: #FCB034; } /* ── Purple — royal purple with a gold accent ─────────────────────────── */ [data-app-theme="purple"] { --bs-primary: #701E7D; --bs-primary-rgb: 112, 30, 125; --bs-link-color: #701E7D; --bs-link-color-rgb: 112, 30, 125; --bs-link-hover-color: #4F1559; --app-accent: #FFC72C; } /* ── Accent visible only when a theme is active ─────────────────────────── Subtle bottom-rule under the page-title bar in the theme color, so users see the theme reflected somewhere beyond the buttons. Scoped to [data-app-theme] so Default still looks exactly as before. */ [data-app-theme] .app-content-header { border-bottom: 3px solid var(--bs-primary); } /* The theme dropdown's tiny color swatches — referenced by inline style in _navbar.html so each theme carries its own dot without per-theme CSS. */ .theme-swatch { display: inline-block; width: 0.85rem; height: 0.85rem; border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.15); margin-right: 0.5rem; vertical-align: middle; }