/* ============ Dark mode ============ Activated by . Overrides the base color tokens first (covers most of styles.css, which already reads from CSS variables), then patches the editorial re-skin in dashboard.css and the login/modal styles, which use their own hard-coded colors. */ :root[data-theme="dark"]{ --ink:#e7edf3; --muted:#93a4b8; --blue:#4fc3ec; --navy:#eaf3fb; --aqua:#122a3a; --line:#25323f; --paper:#0b1420; --white:#121d2b; --glucose-low:#ff8b83;--glucose-low-bg:#3a1a1a; --glucose-normal:#57e2a0;--glucose-normal-bg:#123326; --glucose-elevated:#ffbf6b;--glucose-elevated-bg:#3a2b12; --glucose-high:#ff8a80;--glucose-high-bg:#3a1816; } [data-theme="dark"] body{ background:radial-gradient(circle at 90% -5%,#123246 0,transparent 25%),radial-gradient(circle at 0 23%,#0f2338 0,transparent 24%),var(--paper); } [data-theme="dark"] .theme-icon{filter:none} /* --- Editorial re-skin (dashboard.css) overrides --- */ [data-theme="dark"] body{background-color:#0b1420;color:var(--ink)} [data-theme="dark"] .brand{color:var(--ink)} [data-theme="dark"] .hero h1,[data-theme="dark"] .workspace-header h1{color:var(--ink)} [data-theme="dark"] .hero h1 span{color:#e79274} [data-theme="dark"] .notice{background:#152a22;border:1px solid #223b30;color:#bfe9d5} [data-theme="dark"] .card,[data-theme="dark"] .health-panel,[data-theme="dark"] .article-grid article,[data-theme="dark"] .insight-card,[data-theme="dark"] .habit,[data-theme="dark"] .trend-chart-card{ background:#121d2b;border-color:#233244;color:var(--ink);box-shadow:0 10px 26px #00000040 } [data-theme="dark"] .habit.done{background:#122a20;box-shadow:inset 0 0 0 1px #2b5c45} [data-theme="dark"] .medication-card,[data-theme="dark"] .exercise-card,[data-theme="dark"] .habit-card,[data-theme="dark"] .water-card{ background:linear-gradient(145deg,#121d2b,#101827) } [data-theme="dark"] .glucose-card{background:linear-gradient(135deg,#092a4a,#0a5b8c 57%,#1c8ba0)} [data-theme="dark"] .workspace-header{border-bottom-color:#23303c} [data-theme="dark"] .workspace-header p:not(.eyebrow){color:var(--muted)} [data-theme="dark"] .workspace-panel{background:#101a26} [data-theme="dark"] .workspace-panel .panel-head{border-bottom-color:#233244} [data-theme="dark"] .meal-row,[data-theme="dark"] .exercise-row,[data-theme="dark"] .glucose-row{border-bottom-color:#233244} [data-theme="dark"] .meal-icon{background:var(--aqua);color:var(--blue)} [data-theme="dark"] .empty-list,[data-theme="dark"] .empty-state{color:var(--muted)} [data-theme="dark"] .empty-list strong{color:var(--ink)} [data-theme="dark"] .meal-list{background:#121d2b;box-shadow:0 12px 30px #00000030} [data-theme="dark"] .panel-list{background:var(--paper)} [data-theme="dark"] .progress{background:#1c2a38} [data-theme="dark"] .remove-entry:hover{color:#ff8f83} /* Water */ [data-theme="dark"] .water-dot{background:#16232f;border-color:#274154} [data-theme="dark"] .water-note{color:var(--muted)} [data-theme="dark"] .water-note strong{color:var(--ink)} [data-theme="dark"] .stepper{background:#121d2b;color:var(--ink);box-shadow:0 8px 18px #00000040} /* Journal gallery / glucose story keep their own dark editorial background already */ [data-theme="dark"] .journal-gallery figure{background:#101a26} /* Care guide */ [data-theme="dark"] .care-grid,[data-theme="dark"] .care-grid article,[data-theme="dark"] .care-grid article:nth-child(odd){border-color:#233244} [data-theme="dark"] .care-grid h3{color:var(--ink)} [data-theme="dark"] .care-grid p{color:var(--muted)} [data-theme="dark"] .care-source{color:var(--muted)} [data-theme="dark"] .care-number{color:#e79274} /* Founder page */ [data-theme="dark"] .founder-portrait-wrap:before{border-color:#e79274} [data-theme="dark"] .portrait-index{background:#0b1420;color:#e79274} [data-theme="dark"] .founder-copy>p{color:var(--muted)} [data-theme="dark"] .founder-copy blockquote{color:var(--ink);border-left-color:#e79274} [data-theme="dark"] .focus-areas{border-top-color:#233244} [data-theme="dark"] .focus-areas p{color:var(--ink)} /* Insight banner */ [data-theme="dark"] .insight-section{background:linear-gradient(120deg,#08192c,#0a4e73 58%,#1f7f92);color:#eaf7fb} /* Article cards */ [data-theme="dark"] .article-grid article{background:linear-gradient(145deg,#121d2b,#101827)} [data-theme="dark"] .article-grid p{color:var(--muted)} /* Glucose notebook */ [data-theme="dark"] .glucose-notebook{ background:repeating-linear-gradient(180deg,transparent 0,transparent 42px,#1f3a4a 43px),linear-gradient(145deg,#101c29,#0e1f2c); border-color:#274154;box-shadow:0 26px 60px #00000040 } [data-theme="dark"] .glucose-notebook:before{background:#4a2b2b80} [data-theme="dark"] .notebook-binding{background:repeating-linear-gradient(180deg,transparent 0 21px,#4a7ea640 22px 25px,transparent 26px 43px)} [data-theme="dark"] .notebook-head h2{color:var(--ink)} [data-theme="dark"] .notebook-head p:not(.eyebrow){color:var(--muted)} [data-theme="dark"] .notebook-summary{border-color:#274154;background:#101c29cc} [data-theme="dark"] .notebook-summary>span{border-right-color:#274154;color:var(--muted)} [data-theme="dark"] .notebook-summary strong{color:var(--ink)} [data-theme="dark"] .notebook-toolbar button{border-color:#2c4356;background:#101c29;color:var(--muted)} [data-theme="dark"] .notebook-toolbar button.active{border-color:var(--blue);background:var(--blue);color:#06212f} [data-theme="dark"] .notebook-entry{border-color:#2c4356;background:#0f1c28d0;box-shadow:0 8px 22px #00000030} [data-theme="dark"] .notebook-page-number{color:#6f889a} [data-theme="dark"] .notebook-reading strong{color:var(--ink)} [data-theme="dark"] .notebook-reading small{color:#6f889a} [data-theme="dark"] .notebook-entry-meta strong{color:var(--ink)} [data-theme="dark"] .notebook-entry-meta small{color:#6f889a} [data-theme="dark"] .notebook-expand{color:var(--blue)} [data-theme="dark"] .notebook-entry-detail{border-top-color:#2c4356} [data-theme="dark"] .notebook-entry-detail p{color:var(--muted)} [data-theme="dark"] .notebook-empty{color:var(--muted)} [data-theme="dark"] .notebook-empty strong{color:var(--ink)} /* Trend charts and table */ [data-theme="dark"] .trend-table th{border-bottom-color:#233244;color:var(--muted)} [data-theme="dark"] .trend-table td{border-bottom-color:#233244} [data-theme="dark"] .trend-single strong{color:var(--ink)} /* Modals / forms */ [data-theme="dark"] dialog{background:#101a26;color:var(--ink)} [data-theme="dark"] dialog::backdrop{background:#00000090} [data-theme="dark"] .modal-form input,[data-theme="dark"] .modal-form select,[data-theme="dark"] .modal-form textarea{ background:#0c1620;border-color:#2c3d4d;color:var(--ink) } [data-theme="dark"] .modal-form li{color:var(--muted)} [data-theme="dark"] .review-note{background:#3a2f12;color:#f0d999} [data-theme="dark"] .nutrition-footnote{color:var(--muted)} [data-theme="dark"] .food-option{background:#0c1620;border-color:#2c3d4d;color:var(--ink)} [data-theme="dark"] .food-option:hover{border-color:var(--blue);background:#0f2230} [data-theme="dark"] .food-option small{color:var(--muted)} [data-theme="dark"] .nutrition-preview{background:linear-gradient(135deg,#0f2230,#101c29);border-color:#274154} [data-theme="dark"] .nutrition-preview p{color:var(--muted)} [data-theme="dark"] .portion-select{background:#0c1620;border-color:#2c3d4d;color:var(--ink)} [data-theme="dark"] .macro{background:#0c1620} [data-theme="dark"] .macro b{color:var(--ink)} [data-theme="dark"] .macro span{color:var(--muted)} /* Login screen */ [data-theme="dark"] .login-screen{background:radial-gradient(circle at 78% 17%,#123246 0,transparent 28%),radial-gradient(circle at 10% 85%,#0f2338 0,transparent 30%),linear-gradient(135deg,#0b1420,#0d1826 52%,#0a1622)} [data-theme="dark"] .login-panel{background:linear-gradient(145deg,#101c29dc,#0e1f2ce8);border-color:#233244;color:var(--ink)} [data-theme="dark"] .login-panel>p:not(.eyebrow){color:var(--muted)} [data-theme="dark"] .login-panel input{background:#0c1620;border-color:#2c3d4d;color:var(--ink)} [data-theme="dark"] .login-panel small{color:var(--muted)} [data-theme="dark"] .about-block{background:linear-gradient(145deg,#101c29,#0e1f2c);border-color:#233244} [data-theme="dark"] .about-heading{color:var(--ink)} [data-theme="dark"] .about-copy{color:var(--muted)} [data-theme="dark"] .about-points li{color:var(--ink)} [data-theme="dark"] .founder-credit{color:var(--ink)} [data-theme="dark"] .google-button{background:#101c29;border-color:#2c3d4d;color:var(--ink)} [data-theme="dark"] .login-status{color:var(--muted)} /* Footer already dark green; keep readable */ [data-theme="dark"] footer{color:#c7d1cb} /* ============================================================ Dark-mode patch for dashboard.css's "editorial" and "coastal blue" re-skins, which hardcode light-only hex colors instead of the theme variables above. Without these, dark mode left several things dark-on-dark (headings, card text) or stuck permanently light (page backgrounds, some cards, dialogs) — this section only touches dark mode; light mode is untouched. ============================================================ */ /* Overview page borrows its own local palette (--overview-*); re-point those to dark equivalents so every element that already reads from them (headings, buttons, borders) follows. */ [data-theme="dark"] .app-view-overview{ --overview-ink:#e7edf3;--overview-blue:#4fc3ec;--overview-bright:#6fd8ee; --overview-pale:#132a3a;--overview-line:#25323f; } [data-theme="dark"] .app-view-overview .subhead, [data-theme="dark"] .brief-intro>p:not(.eyebrow), [data-theme="dark"] .brief-grid p{color:var(--muted)} /* Hero "quick log" widget was a hardcoded near-white panel */ [data-theme="dark"] .hero-quicklog{background:linear-gradient(145deg,#101c29ed,#0e2230eb);border-color:#233244;box-shadow:0 24px 55px #00000050} [data-theme="dark"] .hero-quicklog:before{background:#42b8dc22} [data-theme="dark"] .quicklog-head>span{color:var(--blue)} [data-theme="dark"] .quicklog-head small,[data-theme="dark"] .quicklog-option small,[data-theme="dark"] .quicklog-note{color:var(--muted)} [data-theme="dark"] .quicklog-option{color:var(--ink);background:#101c29} [data-theme="dark"] .quicklog-option.meal{background:#12303f} [data-theme="dark"] .quicklog-option.glucose{background:#12283f} [data-theme="dark"] .quicklog-option.movement{background:#123a37} [data-theme="dark"] .quicklog-option.context{background:#161f34} [data-theme="dark"] .quicklog-option.medication{background:#231a37} [data-theme="dark"] .quicklog-option:hover{border-color:#233244} [data-theme="dark"] .quicklog-option i{background:#0c1620cc;color:var(--blue)} [data-theme="dark"] .quicklog-option b{color:var(--blue)} /* Overview dashboard cards: one consistent dark surface for all non-hero cards (matching the light-mode cleanup), instead of a different tinted background per card. */ [data-theme="dark"] .app-view-overview .card{background:#121d2b;box-shadow:0 12px 32px #00000030} [data-theme="dark"] .app-view-overview .card:hover{border-color:#2c4a5e} [data-theme="dark"] .app-view-overview .glucose-card{background:linear-gradient(145deg,#0d2c4a 0%,#0e4a6e 58%,#1c7396 100%)} [data-theme="dark"] .app-view-overview .dashboard-grid .card:not(.glucose-card){background:#121d2b;border-color:#233244} [data-theme="dark"] .app-view-overview .dashboard-grid .card:not(.glucose-card) .card-heading{color:var(--ink)} [data-theme="dark"] .app-view-overview .dashboard-grid .card:not(.glucose-card) .metric{color:var(--blue)} /* Page headings (Food/Water/Glucose/Meds/Trends/Founder) were hardcoded dark-navy text — nearly invisible on a dark page. */ [data-theme="dark"] .workspace-header h1, [data-theme="dark"] .founder-copy h1, [data-theme="dark"] .founder-copy blockquote{color:var(--ink)} /* Each page tab had its own pastel gradient background that never switched with the theme. */ [data-theme="dark"] .app-view-food{background:linear-gradient(180deg,#0b1420 0,#0d1a26 55%,#0a141f 100%)} [data-theme="dark"] .app-view-water{background:radial-gradient(circle at 82% 18%,#12333722,transparent 28%),linear-gradient(180deg,#0b1a1c,#0a1a1e 70%,#0a1420)} [data-theme="dark"] .app-view-glucose{background:radial-gradient(circle at 92% 4%,#123a5522,transparent 25%),linear-gradient(180deg,#0b1622,#0a1927 70%,#0a1420)} [data-theme="dark"] .app-view-founder{background:linear-gradient(145deg,#0b1420 0%,#0d1e28 52%,#0a1420 100%)} /* Food tab's meal-suggestion grid was hardcoded light */ [data-theme="dark"] .food-chip-grid{background:#233244;border-color:#233244} [data-theme="dark"] .food-chip-grid button{background:linear-gradient(145deg,#121d2b,#101827);color:var(--ink)} [data-theme="dark"] .food-chip-grid button:nth-child(3n+2){background:linear-gradient(145deg,#101c29,#0e1c26)} [data-theme="dark"] .food-chip-grid button:nth-child(3n){background:linear-gradient(145deg,#101a29,#0d1826)} [data-theme="dark"] .food-chip-grid button:hover,[data-theme="dark"] .food-chip-grid button:focus-visible{background:#16222f} [data-theme="dark"] .food-chip-grid span{color:var(--muted)} /* Diabetes-brief and article-grid re-pinned their own borders and backgrounds after the var-based versions further up. */ [data-theme="dark"] .diabetes-brief,[data-theme="dark"] .brief-grid,[data-theme="dark"] .brief-grid article{border-color:#233244} [data-theme="dark"] .article-grid article:nth-child(2){background:linear-gradient(145deg,#121d2b,#101f22)} [data-theme="dark"] .article-grid article:nth-child(3){background:linear-gradient(145deg,#121d2b,#101827)} /* Dialog border was still the light-mode blue */ [data-theme="dark"] dialog{border-color:#233244}