/* * ============================================================================ * GUTSPHERE — DARK MODE PALETTE * ---------------------------------------------------------------------------- * This file is the SINGLE SOURCE OF TRUTH for the dark mode color palette. * Edit values here only. Component code never needs to change. * * How it works: * - The :root block below adds new tokens that didn't exist before (card * surfaces, nav backgrounds). These are also used in LIGHT mode. * - The .dark block remaps every Gutsphere CSS variable to its dark value. * When is set, the cascade picks these up everywhere. * * Activation: * - Default: follows OS preference (prefers-color-scheme) via the script in * app/views/layouts/shared/_check_dark_mode.html.erb. * - User override: dark_mode_controller.js writes 'theme' to localStorage. * * Tweaking the palette: * - Change a hex value below → reload → entire app updates. * - No component file, layout file, or view file needs editing for palette * adjustments. That is the whole point of this file. * ============================================================================ */ /* --------------------------------------------------------------------------- * NEW TOKENS (also used in light mode) * Added because the codebase previously had literal #fff / rgba(255,...) in * many places; now every surface has a named token. * ------------------------------------------------------------------------- */ :root { /* Card / sheet surfaces */ --gs-card: #FFFFFF; --gs-card-elevated: #FFFFFF; /* Legacy alias — many components use var(--gs-white, #FFFFFF) */ --gs-white: #FFFFFF; /* Frosted nav backgrounds (header + bottom nav) */ --gs-nav-bg: rgba(255, 255, 255, 0.95); --gs-nav-active: rgba(245, 238, 232, 0.85); /* Overlay for sheets / modals */ --gs-overlay: rgba(28, 25, 23, 0.30); /* Chart / accent (not label text) */ --gs-amber: #F59E0B; /* Guide avatar accents */ --gs-sky-bg: rgba(56, 189, 248, 0.12); --gs-sky-text: #0369A1; --gs-purple-bg: rgba(168, 85, 247, 0.1); --gs-purple-text: #7C3AED; --gs-rose-bg: rgba(244, 63, 94, 0.1); --gs-rose-text: #E11D48; /* Bowel home — What Stands Out section (light) */ --gs-insight-section-bg: rgba(239, 83, 80, 0.07); --gs-insight-section-border: rgba(239, 83, 80, 0.22); /* Weekly snapshot metric tiles */ --gs-snapshot-tile-bg: #FAF6F2; --gs-snapshot-bar-fill: #EF5350; --gs-snapshot-bar-empty: #E7E0DA; --gs-segment-track-bg: #FAF6F2; } /* =========================================================================== * THE DARK PALETTE — edit these values to tweak the whole app's dark mode * =========================================================================== */ .dark { /* ------------------------------------------------------------------------- * 1. SURFACES (page canvas + cards + nav) * Rule: canvas is the darkest. Cards are one step lighter. Elevated * surfaces (sheets, popovers) are one step lighter again. * Warm-charcoal hue (h ≈ 30°) — never cool gray, never pure black. * ----------------------------------------------------------------------- */ --gs-sand: #1A1614; /* page canvas (deepest) */ --gs-sand-light: #221E1B; /* row icon bg / sub-tab inactive */ --gs-warm-cream: #2A2522; /* gradient endpoints */ --gs-card: #221E1B; /* card backgrounds (was #fff) */ --gs-card-elevated: #2A2522; /* sheets, modals, popovers */ --gs-white: var(--gs-card); --gs-nav-bg: rgba(34, 30, 27, 0.95); /* frosted nav */ --gs-nav-active: rgba(248, 113, 113, 0.14); /* active nav pill */ --gs-overlay: rgba(0, 0, 0, 0.55); /* sheet backdrop */ /* ------------------------------------------------------------------------- * 2. TEXT (warm off-white, no pure white) * ----------------------------------------------------------------------- */ --gs-text-primary: #F5F0EC; /* headings */ --gs-text-secondary: #C4BBB5; /* body */ --gs-text-muted: #8A817A; /* supporting info */ --gs-text-hint: #6B6660; /* labels, metadata */ /* ------------------------------------------------------------------------- * 3. BORDERS (lift slightly — borders are how we replace shadows in dark) * ----------------------------------------------------------------------- */ --gs-border: #3A3431; --gs-border-hover: #4A423E; --gs-divider: rgba(255, 255, 255, 0.05); /* ------------------------------------------------------------------------- * 4. BRAND (coral lifts to lighter, slightly desaturated for dark canvas) * ----------------------------------------------------------------------- */ --gs-coral: #F87171; --gs-coral-glow: rgba(248, 113, 113, 0.12); --gs-coral-light: rgba(248, 113, 113, 0.20); /* Form choice chip — selected (lighter coral on charcoal; avoids muddy dark red) */ --gs-choice-selected-border: #FCA5A5; --gs-choice-selected-bg: rgba(248, 113, 113, 0.22); --gs-choice-selected-text: #FCA5A5; /* Bowel home — What Stands Out (lifted glow on dark canvas) */ --gs-insight-section-bg: rgba(248, 113, 113, 0.18); --gs-insight-section-border: rgba(248, 113, 113, 0.40); /* Weekly snapshot — tiles + score bars need more contrast */ --gs-snapshot-tile-bg: #2A2522; --gs-snapshot-bar-fill: #F87171; --gs-snapshot-bar-empty: #4A423E; /* Pill tab track — elevated so tabs read on card surface */ --gs-segment-track-bg: #2A2522; /* ------------------------------------------------------------------------- * 5. STATUS COLORS (lighter / less saturated for dark backgrounds) * ----------------------------------------------------------------------- */ --gs-green: #7BC68F; --gs-green-bg: rgba(123, 198, 143, 0.18); --gs-amber: #FCD34D; --gs-amber-bg: rgba(252, 211, 77, 0.18); --gs-amber-text: #FCD34D; --gs-sky-bg: rgba(56, 189, 248, 0.18); --gs-sky-text: #38BDF8; --gs-purple-bg: rgba(168, 85, 247, 0.16); --gs-purple-text: #A78BFA; --gs-rose-bg: rgba(244, 63, 94, 0.16); --gs-rose-text: #FB7185; --gs-red: #F87171; --gs-red-bg: rgba(248, 113, 113, 0.18); /* ------------------------------------------------------------------------- * 6. SHADOWS (more visible on dark canvas — borders + shadow combined) * ----------------------------------------------------------------------- */ --gs-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.50); --gs-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.60); --gs-shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.70); } /* =========================================================================== * PALETTE OPTIONS — live-switchable via * ---------------------------------------------------------------------------- * The .dark block above is the default palette ("current" / warm sand). * Setting data-palette on overrides surface + accent tokens to try * an alternative palette without touching components or views. * * Used by: * - app/javascript/controllers/palette_switcher_controller.js * - app/views/components/ui/shared/_palette_switcher.html.erb * * To add a new palette: copy a block below, change the data-palette name, * tweak values. The switcher UI reads palette names from its partial, so * register new palettes there too. * * NOTE: palette overrides only apply in dark mode. Light mode is fixed * (warm sand) so palette has no effect when .dark is absent. * =========================================================================== */ /* --- Option B: Evolved Warm (neutralized canvas, warmth on cards) ---------- */ .dark[data-palette="evolved-warm"] { --gs-sand: #181614; --gs-sand-light: #221E1B; --gs-warm-cream: #2C2724; --gs-card: #241F1C; --gs-card-elevated: #2C2724; --gs-nav-bg: rgba(36, 31, 28, 0.95); --gs-nav-active: rgba(251, 113, 133, 0.14); --gs-coral: #FB7185; --gs-coral-glow: rgba(251, 113, 133, 0.14); --gs-coral-light: rgba(251, 113, 133, 0.22); } /* --- Option C: Neutral Charcoal (Apple Notes / Material default) ----------- */ .dark[data-palette="neutral"] { --gs-sand: #161616; --gs-sand-light: #1F1F1F; --gs-warm-cream: #262626; --gs-card: #1F1F1F; --gs-card-elevated: #262626; --gs-text-primary: #F5F5F5; --gs-text-secondary: #B8B8B8; --gs-text-muted: #8A8A8A; --gs-text-hint: #6A6A6A; --gs-border: #333333; --gs-border-hover: #424242; --gs-nav-bg: rgba(31, 31, 31, 0.95); --gs-nav-active: rgba(248, 113, 113, 0.14); } /* --- Option D: Deep Teal-Charcoal (premium clinical) ----------------------- */ .dark[data-palette="teal"] { --gs-sand: #0F1719; --gs-sand-light: #142022; --gs-warm-cream: #1B292C; --gs-card: #142022; --gs-card-elevated: #1B292C; --gs-text-primary: #ECF1F2; --gs-text-secondary: #B0BCBF; --gs-text-muted: #7F8B8E; --gs-text-hint: #5F6A6D; --gs-border: #2C3C40; --gs-border-hover: #3C4C50; --gs-nav-bg: rgba(20, 32, 34, 0.95); --gs-nav-active: rgba(248, 113, 113, 0.18); --gs-coral: #F87171; --gs-coral-glow: rgba(248, 113, 113, 0.16); --gs-coral-light: rgba(248, 113, 113, 0.24); --gs-green: #5EEAD4; --gs-green-bg: rgba(94, 234, 212, 0.18); } /* --- Option E: Deep Forest (organic wellness) ------------------------------ */ .dark[data-palette="forest"] { --gs-sand: #131A15; --gs-sand-light: #1B231D; --gs-warm-cream: #222D24; --gs-card: #1B231D; --gs-card-elevated: #222D24; --gs-text-primary: #EEF1EE; --gs-text-secondary: #B2BCB4; --gs-text-muted: #818B83; --gs-text-hint: #616B63; --gs-border: #2E3A30; --gs-border-hover: #3E4A40; --gs-nav-bg: rgba(27, 35, 29, 0.95); --gs-nav-active: rgba(251, 113, 133, 0.16); --gs-coral: #FB7185; --gs-coral-glow: rgba(251, 113, 133, 0.16); --gs-coral-light: rgba(251, 113, 133, 0.24); } /* --- Option F: Plum / Aubergine (premium, evening) ------------------------- */ .dark[data-palette="plum"] { --gs-sand: #1A141A; --gs-sand-light: #231B25; --gs-warm-cream: #2C2330; --gs-card: #231B25; --gs-card-elevated: #2C2330; --gs-text-primary: #F2EDF5; --gs-text-secondary: #BFB6C5; --gs-text-muted: #8F8595; --gs-text-hint: #6F6575; --gs-border: #3A3040; --gs-border-hover: #4A4050; --gs-nav-bg: rgba(35, 27, 37, 0.95); --gs-nav-active: rgba(251, 113, 133, 0.16); --gs-coral: #FB7185; --gs-coral-glow: rgba(251, 113, 133, 0.15); --gs-coral-light: rgba(251, 113, 133, 0.22); } /* --------------------------------------------------------------------------- * Header back control — inline background:#fff preserves Brakeman ignore * fingerprint on link_to; remap to card surface in dark mode. * ------------------------------------------------------------------------- */ .dark header a[style*="background:#fff"] { background: var(--gs-card) !important; } /* --------------------------------------------------------------------------- * Native form controls — adapt to the dark mode color scheme * (date/time pickers, scrollbars, autofill, etc. inherit native dark UI). * ------------------------------------------------------------------------- */ .dark { color-scheme: dark; } :root:not(.dark) { color-scheme: light; } /* --------------------------------------------------------------------------- * Smooth theme transition (subtle, not flashy) * Only color-related properties — never layout properties. * ------------------------------------------------------------------------- */ html { transition: background-color 0.2s ease, color 0.2s ease; }