/* PupGear colour themes */ /* ===================== */ /* Applied via data-pg-theme on . Light themes also carry data-bs-theme="light". Dark themes also carry data-bs-theme="dark". Defines navbar variables and a theme-aware accent pair used throughout the app: --pg-navbar-bg navbar background colour --pg-navbar-color text/icon colour on the navbar --pg-accent the visual accent colour for UI highlights (borders, badges, tints) --pg-accent-contrast text colour to use on top of --pg-accent backgrounds On light themes the navbar IS the accent, so --pg-accent = --pg-navbar-bg. On dark themes the navbar is near-black; the bright text colour is the accent, so the pair is flipped: --pg-accent = --pg-navbar-color. Dark themes additionally override Bootstrap body surface variables so each theme has a distinct page feel beyond just the navbar strip. */ /* ======== DEFAULTS (no theme attribute set) ======== */ :root { --pg-navbar-bg: var(--bs-warning); --pg-navbar-color: #1a1a1a; --pg-accent: var(--pg-navbar-bg); --pg-accent-contrast: var(--pg-navbar-color); } /* Dark themes: flip accent to the bright highlight colour */ [data-bs-theme="dark"] { --pg-accent: var(--pg-navbar-color); --pg-accent-contrast: var(--pg-navbar-bg); }