/* ============================================================================ SHARED THEME LAYER — light / dark / system ============================================================================ Stage 1 of making the whole app themeable. This file is deliberately INERT on its own: it defines the palette and the toggle component, but nothing in css/style.css consumes these tokens yet, so loading it changes nothing visually. Views get converted one at a time (see the roadmap note at the end). The palette is copied verbatim from lib/menu-page.html so the app and the menu pages are the SAME theme, not two that merely look similar. Dark is the base and .ew-light flips to light — that inversion is menu-page's convention and is kept so a single class drives both surfaces. `data-theme` on carries the RESOLVED value (never "system"), for selectors that need to target a specific theme. `.ew-light` is the workhorse. ============================================================================ */ :root { /* ---- dark (base) ---- */ --ew-accent: #f8dc12; --ew-green: #16a34a; --ew-red: #d6453f; --ew-bg: #16214d; --ew-card-bg: #111b3e; --ew-text: #eef0ff; --ew-muted: #aab0d8; --ew-border: #29366c; --ew-name: #ffffff; --ew-accent-btn: #f8dc12; --ew-accent-btn-text: #16214d; --ew-grid-bg: rgba(248, 220, 18, 0.08); --ew-grid-border: rgba(248, 220, 18, 0.22); --ew-footer-border: rgba(255, 255, 255, 0.08); --ew-card-shadow: 0 14px 40px rgba(0, 0, 0, 0.4); --ew-popup-bg: #141a52; --ew-input-bg: rgba(0, 0, 0, 0.3); --ew-btn-glow: rgba(248, 220, 18, 0.4); --ew-card-border: 2px solid var(--ew-border); --ew-hover-tint: rgba(248, 220, 18, 0.1); --ew-handle: rgba(255, 255, 255, 0.3); --ew-cta-chip: rgba(22, 33, 77, .16); } html.ew-light, body.ew-light { /* ---- light ---- */ --ew-bg: #eef0f8; --ew-card-bg: #ffffff; --ew-text: #161b3a; --ew-muted: #5d6488; --ew-border: #dde0ee; --ew-name: #16214d; --ew-accent-btn: #16214d; --ew-accent-btn-text: #ffffff; --ew-grid-bg: rgba(248, 220, 18, 0.14); --ew-grid-border: rgba(230, 193, 38, 0.4); --ew-footer-border: #e7eaf5; --ew-card-shadow: 0 10px 30px rgba(20, 26, 63, 0.14); --ew-popup-bg: #ffffff; --ew-input-bg: rgba(20, 26, 63, 0.06); --ew-btn-glow: rgba(230, 193, 38, 0.5); --ew-card-border: 2px solid #f8dc12; --ew-hover-tint: rgba(26, 35, 126, 0.05); --ew-handle: rgba(20, 26, 63, 0.25); --ew-cta-chip: rgba(248, 220, 18, .18); } /* --------------------------------------------------------------------------- Floating theme toggle — System / Dark / Light, bottom-right. Lifted verbatim from lib/menu-page.html so behaviour is identical everywhere: a 114px pill that collapses on scroll onto whichever segment is active, and re-expands on tap. --fab-lift lets a page push it above its own bottom bar. --------------------------------------------------------------------------- */ .theme-fab { position: fixed; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 10005; width: 114px; height: 42px; pointer-events: none; transform: translate3d(0, calc(-1 * var(--fab-lift, 0px)), 0); transition: transform .3s cubic-bezier(.22, 1, .36, 1); will-change: transform; } @media (prefers-reduced-motion: reduce) { .theme-fab { transition: none; } } .theme-fab .tf-bg { position: absolute; inset: 0; background: var(--ew-card-bg); border: 1px solid var(--ew-border); border-radius: 999px; box-shadow: 0 2px 6px rgba(0, 0, 0, .28), 0 12px 36px rgba(0, 0, 0, .5); transition: opacity .25s ease; pointer-events: auto; } body.ew-light .theme-fab .tf-bg { box-shadow: 0 2px 6px rgba(22, 33, 77, .16), 0 12px 36px rgba(22, 33, 77, .28); } .theme-fab.collapsed .tf-bg { opacity: 0; pointer-events: none; } .theme-fab button { position: absolute; top: 4px; left: 4px; width: 34px; height: 34px; border-radius: 50%; border: none; background: transparent; color: var(--ew-muted); display: flex; align-items: center; justify-content: center; cursor: pointer; pointer-events: auto; transition: transform .3s cubic-bezier(.22, .61, .36, 1), opacity .22s ease, background .15s ease, color .15s ease, box-shadow .25s ease; will-change: transform, opacity; } .theme-fab button.active { background: var(--ew-accent-btn); color: var(--ew-accent-btn-text); } .theme-fab.collapsed button:not(.active) { opacity: 0; pointer-events: none; } .theme-fab.collapsed button.active { box-shadow: 0 2px 6px rgba(0, 0, 0, .28), 0 10px 30px rgba(0, 0, 0, .45); } body.ew-light .theme-fab.collapsed button.active { box-shadow: 0 2px 6px rgba(22, 33, 77, .16), 0 10px 30px rgba(22, 33, 77, .26); } .theme-fab svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } /* --------------------------------------------------------------------------- ROADMAP — how a view gets themed. Nothing in css/style.css reads these tokens yet; that file has ~375 hardcoded colours and its variables (--yolk-blue/--yolk-yellow) are BRAND colours, not roles, so they can't simply be flipped. Convert a view by replacing its literal colours with the role tokens above (--ew-bg page, --ew-card-bg raised surfaces, --ew-text / --ew-muted type, --ew-border hairlines), then check it in both themes. The toggle is only mounted on pages that have been converted — a toggle over unconverted styles looks broken, which is why it is opt-in. Known limits: /rewards and /order are third-party Toast iframes and cannot be themed; the map needs its own Google Maps dark style array. --------------------------------------------------------------------------- */