/* * Accent color themes — applied via data-color-theme attribute on . * * Each theme changes the accent color: buttons, links, active nav indicators, * and the active-item tint in the sidebar (via --bs-primary-rgb). * The sidebar background itself stays neutral (see sidebar-nav.css defaults). * * "purple" is the default (defined in accounts/static/accounts/styles.css). * Only non-default themes need accent overrides here. * * Selector pattern: * :root[data-color-theme="X"] — light mode * [data-bs-theme="dark"][data-color-theme="X"] — dark mode */ /* ── Ocean Blue ─────────────────────────────────────────────────── */ :root[data-color-theme="blue"] { --zyte-primary: #0d6efd; --zyte-primary-variant: #0b5ed7; --zyte-row-hover: #eef4ff; --bs-primary: #0d6efd; --bs-primary-rgb: 13, 110, 253; --bs-link-color: #0d6efd; --bs-link-color-rgb: 13, 110, 253; --bs-link-hover-color: #0b5ed7; --bs-link-hover-color-rgb: 11, 94, 215; --bs-focus-ring-color: rgba(13, 110, 253, 0.25); } [data-bs-theme="dark"][data-color-theme="blue"] { --zyte-primary: #4d9fff; --zyte-primary-variant: #0d6efd; --zyte-row-hover: #1a2a40; --bs-primary: #4d9fff; --bs-primary-rgb: 77, 159, 255; --bs-link-color: #4d9fff; --bs-link-color-rgb: 77, 159, 255; --bs-link-hover-color: #80c1ff; --bs-link-hover-color-rgb: 128, 193, 255; --bs-focus-ring-color: rgba(77, 159, 255, 0.35); } /* ── Forest Green ───────────────────────────────────────────────── */ :root[data-color-theme="green"] { --zyte-primary: #198754; --zyte-primary-variant: #146c43; --zyte-row-hover: #edf7f2; --bs-primary: #198754; --bs-primary-rgb: 25, 135, 84; --bs-link-color: #198754; --bs-link-color-rgb: 25, 135, 84; --bs-link-hover-color: #146c43; --bs-link-hover-color-rgb: 20, 108, 67; --bs-focus-ring-color: rgba(25, 135, 84, 0.25); } [data-bs-theme="dark"][data-color-theme="green"] { --zyte-primary: #2ab870; --zyte-primary-variant: #198754; --zyte-row-hover: #1a2e25; --bs-primary: #2ab870; --bs-primary-rgb: 42, 184, 112; --bs-link-color: #2ab870; --bs-link-color-rgb: 42, 184, 112; --bs-link-hover-color: #5dcf95; --bs-link-hover-color-rgb: 93, 207, 149; --bs-focus-ring-color: rgba(42, 184, 112, 0.35); } /* ── Slate ──────────────────────────────────────────────────────── */ :root[data-color-theme="slate"] { --zyte-primary: #495057; --zyte-primary-variant: #343a40; --zyte-row-hover: #f0f1f2; --bs-primary: #495057; --bs-primary-rgb: 73, 80, 87; --bs-link-color: #495057; --bs-link-color-rgb: 73, 80, 87; --bs-link-hover-color: #343a40; --bs-link-hover-color-rgb: 52, 58, 64; --bs-focus-ring-color: rgba(73, 80, 87, 0.25); } [data-bs-theme="dark"][data-color-theme="slate"] { --zyte-primary: #adb5bd; --zyte-primary-variant: #868e96; --zyte-row-hover: #25282c; --bs-primary: #adb5bd; --bs-primary-rgb: 173, 181, 189; --bs-link-color: #adb5bd; --bs-link-color-rgb: 173, 181, 189; --bs-link-hover-color: #ced4da; --bs-link-hover-color-rgb: 206, 212, 218; --bs-focus-ring-color: rgba(173, 181, 189, 0.35); } /* ── Warm Rose ──────────────────────────────────────────────────── */ :root[data-color-theme="rose"] { --zyte-primary: #b5476a; --zyte-primary-variant: #8c3552; --zyte-row-hover: #fdf0f4; --bs-primary: #b5476a; --bs-primary-rgb: 181, 71, 106; --bs-link-color: #b5476a; --bs-link-color-rgb: 181, 71, 106; --bs-link-hover-color: #8c3552; --bs-link-hover-color-rgb: 140, 53, 82; --bs-focus-ring-color: rgba(181, 71, 106, 0.25); } [data-bs-theme="dark"][data-color-theme="rose"] { --zyte-primary: #d97095; --zyte-primary-variant: #b5476a; --zyte-row-hover: #2e1a22; --bs-primary: #d97095; --bs-primary-rgb: 217, 112, 149; --bs-link-color: #d97095; --bs-link-color-rgb: 217, 112, 149; --bs-link-hover-color: #e89ab8; --bs-link-hover-color-rgb: 232, 154, 184; --bs-focus-ring-color: rgba(217, 112, 149, 0.35); } /* ── Teal ───────────────────────────────────────────────────────── */ :root[data-color-theme="teal"] { --zyte-primary: #0d9488; --zyte-primary-variant: #0f766e; --zyte-row-hover: #edfaf8; --bs-primary: #0d9488; --bs-primary-rgb: 13, 148, 136; --bs-link-color: #0d9488; --bs-link-color-rgb: 13, 148, 136; --bs-link-hover-color: #0f766e; --bs-link-hover-color-rgb: 15, 118, 110; --bs-focus-ring-color: rgba(13, 148, 136, 0.25); } [data-bs-theme="dark"][data-color-theme="teal"] { --zyte-primary: #2dd4bf; --zyte-primary-variant: #0d9488; --zyte-row-hover: #182e2b; --bs-primary: #2dd4bf; --bs-primary-rgb: 45, 212, 191; --bs-link-color: #2dd4bf; --bs-link-color-rgb: 45, 212, 191; --bs-link-hover-color: #5eead4; --bs-link-hover-color-rgb: 94, 234, 212; --bs-focus-ring-color: rgba(45, 212, 191, 0.35); } /* ── Amber ──────────────────────────────────────────────────────── */ :root[data-color-theme="amber"] { --zyte-primary: #d97706; --zyte-primary-variant: #b45309; --zyte-row-hover: #fef9ec; --bs-primary: #d97706; --bs-primary-rgb: 217, 119, 6; --bs-link-color: #d97706; --bs-link-color-rgb: 217, 119, 6; --bs-link-hover-color: #b45309; --bs-link-hover-color-rgb: 180, 83, 9; --bs-focus-ring-color: rgba(217, 119, 6, 0.25); } [data-bs-theme="dark"][data-color-theme="amber"] { --zyte-primary: #fbbf24; --zyte-primary-variant: #d97706; --zyte-row-hover: #2e2410; --bs-primary: #fbbf24; --bs-primary-rgb: 251, 191, 36; --bs-link-color: #fbbf24; --bs-link-color-rgb: 251, 191, 36; --bs-link-hover-color: #fcd34d; --bs-link-hover-color-rgb: 252, 211, 77; --bs-focus-ring-color: rgba(251, 191, 36, 0.35); } /* ── Indigo ─────────────────────────────────────────────────────── */ :root[data-color-theme="indigo"] { --zyte-primary: #4338ca; --zyte-primary-variant: #3730a3; --zyte-row-hover: #f0effe; --bs-primary: #4338ca; --bs-primary-rgb: 67, 56, 202; --bs-link-color: #4338ca; --bs-link-color-rgb: 67, 56, 202; --bs-link-hover-color: #3730a3; --bs-link-hover-color-rgb: 55, 48, 163; --bs-focus-ring-color: rgba(67, 56, 202, 0.25); } [data-bs-theme="dark"][data-color-theme="indigo"] { --zyte-primary: #818cf8; --zyte-primary-variant: #4338ca; --zyte-row-hover: #1e1b3a; --bs-primary: #818cf8; --bs-primary-rgb: 129, 140, 248; --bs-link-color: #818cf8; --bs-link-color-rgb: 129, 140, 248; --bs-link-hover-color: #a5b4fc; --bs-link-hover-color-rgb: 165, 180, 252; --bs-focus-ring-color: rgba(129, 140, 248, 0.35); } /* ── Crimson ────────────────────────────────────────────────────── */ :root[data-color-theme="crimson"] { --zyte-primary: #dc2626; --zyte-primary-variant: #b91c1c; --zyte-row-hover: #fef2f2; --bs-primary: #dc2626; --bs-primary-rgb: 220, 38, 38; --bs-link-color: #dc2626; --bs-link-color-rgb: 220, 38, 38; --bs-link-hover-color: #b91c1c; --bs-link-hover-color-rgb: 185, 28, 28; --bs-focus-ring-color: rgba(220, 38, 38, 0.25); } [data-bs-theme="dark"][data-color-theme="crimson"] { --zyte-primary: #f87171; --zyte-primary-variant: #dc2626; --zyte-row-hover: #2e1515; --bs-primary: #f87171; --bs-primary-rgb: 248, 113, 113; --bs-link-color: #f87171; --bs-link-color-rgb: 248, 113, 113; --bs-link-hover-color: #fca5a5; --bs-link-hover-color-rgb: 252, 165, 165; --bs-focus-ring-color: rgba(248, 113, 113, 0.35); } /* ── Sky Blue ───────────────────────────────────────────────────── */ :root[data-color-theme="sky"] { --zyte-primary: #0284c7; --zyte-primary-variant: #0369a1; --zyte-row-hover: #f0f9ff; --bs-primary: #0284c7; --bs-primary-rgb: 2, 132, 199; --bs-link-color: #0284c7; --bs-link-color-rgb: 2, 132, 199; --bs-link-hover-color: #0369a1; --bs-link-hover-color-rgb: 3, 105, 161; --bs-focus-ring-color: rgba(2, 132, 199, 0.25); } [data-bs-theme="dark"][data-color-theme="sky"] { --zyte-primary: #38bdf8; --zyte-primary-variant: #0284c7; --zyte-row-hover: #0c2233; --bs-primary: #38bdf8; --bs-primary-rgb: 56, 189, 248; --bs-link-color: #38bdf8; --bs-link-color-rgb: 56, 189, 248; --bs-link-hover-color: #7dd3fc; --bs-link-hover-color-rgb: 125, 211, 252; --bs-focus-ring-color: rgba(56, 189, 248, 0.35); } /* ── Pagination: adapt active page to accent theme ──────────────── */ /* * Bootstrap 5.3 scopes --bs-pagination-active-bg as a hardcoded hex (#0d6efd) * inside .pagination {}, so :root --bs-primary overrides don't reach it. * Overriding .pagination {} here wins by source order (loaded after Bootstrap). * Applies to all themes including the default purple (no data-color-theme). */ .pagination { --bs-pagination-color: var(--zyte-primary); --bs-pagination-hover-color: var(--zyte-primary-variant); --bs-pagination-focus-color: var(--zyte-primary-variant); --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25); --bs-pagination-active-bg: var(--zyte-primary); --bs-pagination-active-border-color: var(--zyte-primary); } /* ── btn-outline-primary: adapt to active theme ─────────────────── */ /* * Bootstrap 5.3 compiles btn-outline-primary with scoped element-level vars * that override :root --bs-primary. This rule uses var(--zyte-primary) to * re-point those vars for any non-default theme (data-color-theme present). * Purple (default) has no data-color-theme attribute, so Bootstrap's compiled * purple values remain in effect there. */ :root[data-color-theme] .btn-outline-primary { --bs-btn-color: var(--zyte-primary); --bs-btn-border-color: var(--zyte-primary); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--zyte-primary); --bs-btn-hover-border-color: var(--zyte-primary); --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--zyte-primary); --bs-btn-active-border-color: var(--zyte-primary); --bs-btn-checked-color: #fff; --bs-btn-checked-bg: var(--zyte-primary); --bs-btn-checked-border-color: var(--zyte-primary); }