/* 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 two navbar variables used throughout the app: --pg-navbar-bg navbar background colour --pg-navbar-color text/icon colour on the navbar 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; } /* ======== LIGHT THEMES ======== */ /* Amber — warm golden, the default */ [data-pg-theme="light-amber"] { --pg-navbar-bg: #f5a623; --pg-navbar-color: #1a1a1a; } /* Slate — cool steel-blue navbar with amber active accent */ [data-pg-theme="light-slate"] { --pg-navbar-bg: #2c4a6e; --pg-navbar-color: #ffffff; --bs-body-bg: #f7f9fb; --bs-secondary-bg: #eef2f7; --bs-tertiary-bg: #e5ecf4; } /* Sage — forest-green navbar with golden active accent */ [data-pg-theme="light-sage"] { --pg-navbar-bg: #3d7055; --pg-navbar-color: #ffffff; --bs-body-bg: #f5faf6; --bs-secondary-bg: #eaf5ed; --bs-tertiary-bg: #e1f0e5; } /* Rose — deep wine-red navbar, warm cream page */ [data-pg-theme="light-rose"] { --pg-navbar-bg: #9e3050; --pg-navbar-color: #ffffff; --bs-body-bg: #fdf7f8; --bs-secondary-bg: #f7ecef; --bs-tertiary-bg: #f0e2e6; } /* Indigo — rich indigo navbar, soft lavender page */ [data-pg-theme="light-indigo"] { --pg-navbar-bg: #3d35b0; --pg-navbar-color: #ffffff; --bs-body-bg: #f8f7ff; --bs-secondary-bg: #f1effe; --bs-tertiary-bg: #e9e5fd; } /* Teal — dark teal navbar, cool mint page */ [data-pg-theme="light-teal"] { --pg-navbar-bg: #0d7377; --pg-navbar-color: #ffffff; --bs-body-bg: #f4fbfb; --bs-secondary-bg: #e8f6f7; --bs-tertiary-bg: #dbf1f2; } /* ======== DARK THEMES ======== */ /* Charcoal — neutral near-black navbar, default dark theme */ [data-bs-theme="dark"][data-pg-theme="dark-charcoal"] { --pg-navbar-bg: #262626; --pg-navbar-color: #ffc233; } /* Midnight — deep navy navbar with bright amber, blue-tinted page */ [data-bs-theme="dark"][data-pg-theme="dark-midnight"] { --pg-navbar-bg: #1b2c4a; --pg-navbar-color: #ffc233; --bs-body-bg: #0d1925; --bs-body-color: #c8d5ea; --bs-secondary-bg: #162235; --bs-tertiary-bg: #1a2840; --bs-border-color: #253550; --bs-border-color-translucent: rgba(100, 140, 200, 0.15); } /* Forest — near-black green navbar, bright green accent, green-tinted page */ [data-bs-theme="dark"][data-pg-theme="dark-forest"] { --pg-navbar-bg: #132212; --pg-navbar-color: #5ddb7e; --bs-body-bg: #0a150a; --bs-body-color: #bce8c4; --bs-secondary-bg: #131f12; --bs-tertiary-bg: #172416; --bs-border-color: #1e3a1e; --bs-border-color-translucent: rgba(60, 160, 80, 0.15); } /* Violet — deep purple navbar, soft violet accent, purple-tinted page */ [data-bs-theme="dark"][data-pg-theme="dark-violet"] { --pg-navbar-bg: #1c1040; --pg-navbar-color: #b899ff; --bs-body-bg: #100a28; --bs-body-color: #d8ccf5; --bs-secondary-bg: #180e32; --bs-tertiary-bg: #1e1438; --bs-border-color: #2e1e60; --bs-border-color-translucent: rgba(140, 100, 240, 0.15); } /* Ocean — near-black teal navbar, cyan-green accent, teal-tinted page */ [data-bs-theme="dark"][data-pg-theme="dark-ocean"] { --pg-navbar-bg: #07232f; --pg-navbar-color: #36cfc9; --bs-body-bg: #041520; --bs-body-color: #aee4e0; --bs-secondary-bg: #0a2030; --bs-tertiary-bg: #0e2838; --bs-border-color: #103040; --bs-border-color-translucent: rgba(40, 160, 150, 0.15); } /* Ember — dark warm-brown navbar with copper-amber, warm tinted page */ [data-bs-theme="dark"][data-pg-theme="dark-ember"] { --pg-navbar-bg: #2a160a; --pg-navbar-color: #ff9030; --bs-body-bg: #1a0e06; --bs-body-color: #e8d0b0; --bs-secondary-bg: #23150a; --bs-tertiary-bg: #28190e; --bs-border-color: #3d2210; --bs-border-color-translucent: rgba(180, 100, 40, 0.15); }