/* ===== Snacknap theme tokens — single source of truth for chrome colors ===== Drives both our components and Bootstrap 5.3 (via data-bs-theme on ). Light values mirror the current hardcoded palette so migration is 1:1. */ :root, [data-bs-theme=light]{ /* surfaces */ --snk-bg:#f7f7f7; --snk-surface:#ffffff; --snk-surface-2:#fbfcfd; --snk-surface-3:#f6f8fb; /* borders / hairlines */ --snk-border:#eaecf0; --snk-border-subtle:#f2f4f7; --snk-border-strong:#e4e7ec; --snk-hairline:#eef0f3; /* ink (text) ramp */ --snk-text:#101828; --snk-ink-800:#1d2939; --snk-ink-700:#344054; --snk-ink-600:#475467; --snk-ink-500:#667085; --snk-text-muted:#98a2b3; --snk-ink-300:#b6bcc7; /* slate / blue-grey */ --snk-slate:#64748b; --snk-slate-400:#94a3b8; --snk-slate-300:#cbd5e1; /* accent (snacknap brand blue) */ --snk-accent:#3a5a9c; --snk-accent-2:#5b82d6; /* semantic */ --snk-success:#16a34a; --snk-warning:#e0951a; --snk-danger:#dc2626; /* existing */ --snk-brand:#f5d673; --snk-shadow:rgba(16,24,40,.08); color-scheme:light; } [data-bs-theme=dark]{ --snk-bg:#0f1216; --snk-surface:#171b21; --snk-surface-2:#1d222a; --snk-surface-3:#12161c; --snk-border:#2a313c; --snk-border-subtle:#222831; --snk-border-strong:#353d49; --snk-hairline:#262d37; --snk-text:#e7eaf0; --snk-ink-800:#dfe4ec; --snk-ink-700:#c9d2de; --snk-ink-600:#aab4c2; --snk-ink-500:#8b97a8; --snk-text-muted:#8b95a5; --snk-ink-300:#5b6573; --snk-slate:#94a3b8; --snk-slate-400:#7e8a9c; --snk-slate-300:#3a434f; --snk-accent:#7fa0e0; --snk-accent-2:#7d9ce6; --snk-success:#3fbf6b; --snk-warning:#f0b03e; --snk-danger:#f06b6b; --snk-brand:#f5d673; --snk-shadow:rgba(0,0,0,.45); color-scheme:dark; } /* Smooth (but quick) theme transition on the big surfaces; opt-out for motion. */ @media (prefers-reduced-motion: no-preference){ body{ transition:background-color .2s ease, color .2s ease; } } /* ---- theme toggle ---- */ .snk-theme-toggle .btn{ display:inline-flex; align-items:center; justify-content:center; padding:.35rem .55rem; } .snk-theme-toggle .btn svg{ width:18px; height:18px; } .snk-theme-toggle .btn[aria-checked=true]{ background:var(--snk-brand); color:#32414A; } @media (max-width:991.98px){ .snk-theme-toggle{ margin:.5rem 0; } } /* Bridge Bootstrap surface/text vars to the Snacknap dark ramp. html[data-bs-theme=dark] (element+attr) outranks Bootstrap's [data-bs-theme=dark], so this applies even though bootstrap.min.css loads after this file. */ html[data-bs-theme=dark]{ --bs-body-bg:var(--snk-bg); --bs-body-color:var(--snk-text); --bs-secondary-bg:var(--snk-surface); --bs-tertiary-bg:var(--snk-surface-2); --bs-secondary-color:var(--snk-text-muted); --bs-tertiary-color:var(--snk-ink-500); --bs-border-color:var(--snk-border); --bs-emphasis-color:var(--snk-text); --bs-card-bg:var(--snk-surface); --bs-card-cap-bg:var(--snk-surface-2); } /* ============================================================ TASK 3.2 — Legacy CDN admin widget dark-mode overrides Covers: DataTables 1.10.20 (bs4 theme), bootstrap-select 1.13.14, bootstrap-datetimepicker. Bootstrap 5.3 data-bs-theme does NOT cascade into these BS4-era widgets; these overrides patch the gaps. Verification caveat: admin requires login — visual sign-off by user. ============================================================ */ /* ---- 1. DataTables (bootstrap4 theme) ---- */ html[data-bs-theme=dark] .dataTables_wrapper .dataTables_filter input, html[data-bs-theme=dark] .dataTables_wrapper .dataTables_length select{ background:var(--snk-surface-2); color:var(--snk-text); border-color:var(--snk-border); } html[data-bs-theme=dark] .dataTables_wrapper .dataTables_info, html[data-bs-theme=dark] .dataTables_wrapper .dataTables_filter label, html[data-bs-theme=dark] .dataTables_wrapper .dataTables_length label{ color:var(--snk-text-muted); } html[data-bs-theme=dark] .dataTables_wrapper .dataTables_paginate .paginate_button{ color:var(--snk-text) !important; } html[data-bs-theme=dark] .dataTables_wrapper .dataTables_paginate .paginate_button.current, html[data-bs-theme=dark] .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover{ background:var(--snk-brand) !important; color:#32414A !important; border-color:var(--snk-border) !important; } /* ---- 2. bootstrap-select 1.13.14 ---- */ html[data-bs-theme=dark] .bootstrap-select .dropdown-toggle.btn{ background:var(--snk-surface-2); color:var(--snk-text); border-color:var(--snk-border); } html[data-bs-theme=dark] .bootstrap-select .dropdown-menu{ background:var(--snk-surface); color:var(--snk-text); border-color:var(--snk-border); } html[data-bs-theme=dark] .bootstrap-select .dropdown-menu .dropdown-item{ color:var(--snk-text); } html[data-bs-theme=dark] .bootstrap-select .dropdown-menu .dropdown-item:hover, html[data-bs-theme=dark] .bootstrap-select .dropdown-menu .dropdown-item.active, html[data-bs-theme=dark] .bootstrap-select .dropdown-menu .dropdown-item:active{ background:var(--snk-surface-2); color:var(--snk-text); } html[data-bs-theme=dark] .bootstrap-select .bs-searchbox .form-control{ background:var(--snk-surface-2); color:var(--snk-text); border-color:var(--snk-border); } /* ---- 3. bootstrap-datetimepicker ---- */ html[data-bs-theme=dark] .bootstrap-datetimepicker-widget, html[data-bs-theme=dark] .bootstrap-datetimepicker-widget.dropdown-menu{ background:var(--snk-surface); color:var(--snk-text); border-color:var(--snk-border); } html[data-bs-theme=dark] .bootstrap-datetimepicker-widget table td, html[data-bs-theme=dark] .bootstrap-datetimepicker-widget table th{ color:var(--snk-text); } html[data-bs-theme=dark] .bootstrap-datetimepicker-widget table td.day:hover, html[data-bs-theme=dark] .bootstrap-datetimepicker-widget table td.hour:hover, html[data-bs-theme=dark] .bootstrap-datetimepicker-widget table td.minute:hover, html[data-bs-theme=dark] .bootstrap-datetimepicker-widget table td.second:hover, html[data-bs-theme=dark] .bootstrap-datetimepicker-widget table .picker-switch:hover, html[data-bs-theme=dark] .bootstrap-datetimepicker-widget table td span:hover{ background:var(--snk-surface-2); } html[data-bs-theme=dark] .bootstrap-datetimepicker-widget table td.active, html[data-bs-theme=dark] .bootstrap-datetimepicker-widget table td.active:hover, html[data-bs-theme=dark] .bootstrap-datetimepicker-widget table td span.active{ background:var(--snk-brand); color:#32414A; } html[data-bs-theme=dark] .bootstrap-datetimepicker-widget table td.today:before{ border-bottom-color:var(--snk-brand); } html[data-bs-theme=dark] .bootstrap-datetimepicker-widget table td.disabled, html[data-bs-theme=dark] .bootstrap-datetimepicker-widget table td.disabled:hover{ color:var(--snk-text-muted); }