/* ========================================================================= MOBILE — ROUTINES / TO-DO LIST: DARK MODE The four immersive screens (Morning / Afternoon / Evening in mobile-routines.js, To-Do List in mobile-todo-list.js) are the only light surfaces left in the app — everything else runs on app.css's navy shell. That is by design: they were built to match light reference mockups. This file is the opposite skin, so the same screens can sit in the app's own dark family instead of flashing white when they take over the viewport. HOW IT SWITCHES Everything here is scoped under [data-rt-theme="dark"], an attribute mobile-app.js sets on from the `routineDarkMode` preference (see applyRoutineTheme / SETTINGS_TOGGLES there). Nothing in mobile-routines.js or mobile-todo-list.js knows about the theme at all — they keep emitting the same .rt-page markup, and the attribute decides how it paints. That also means the switch is instant: no re-render, no reopening the screen. LOAD ORDER This file must come AFTER mobile-routines.css AND mobile-todo-list.css. Most rules here out-specify their light counterparts on their own, but the artwork rules (.rt-has-art...) tie on specificity and are settled by source order — move this earlier and the bezel renders go light again. THE ARTWORK Three of the visuals are photographic PNGs, not CSS, so they cannot be re-tinted by variable: bezel-*.png — decorative, nothing sits on it, so it takes a filter(). hero-droplet — the afternoon water card; text sits ON it. footer-chrome — the bottom bar; the E emblem sits ON it. A filter on those last two would drag their foreground down with them, so they get a dark gradient layered OVER the image in the same background shorthand instead: the render darkens, the children stay at full strength. ========================================================================= */ /* ---------------- palette ---------------- Same variable names mobile-routines.css defines on .rt-page, re-valued. Every component it styles from these — greeting, progress bar, segments, emblem glow, hairlines — re-tints from this block alone. */ [data-rt-theme="dark"] .rt-page{ --rt-navy:#3d6bf0; /* saturated fill: ticked checkboxes, accents */ --rt-navy-deep:#060b1e; --rt-blue:#8fb6ff; /* readable accent text on a dark field */ --rt-ink:#edf1fb; --rt-body:#bac4da; --rt-meta:#7e8aa3; --rt-sky-tint:#6fd0f2; --rt-track:rgba(255,255,255,.10); --rt-hairline:rgba(255,255,255,.09); --rt-canvas:#0b1020; background:linear-gradient(180deg,#0b1020 0%,#080c18 42%,#05070f 100%); color:var(--rt-ink); /* Native controls reached from inside this tree paint from color-scheme, not currentColor — without this they render black-on-black in the WebView. */ color-scheme:dark; } [data-rt-theme="dark"] .rt-page-morning{ --rt-canvas:#0b1020; } [data-rt-theme="dark"] .rt-page-afternoon{ --rt-canvas:#091320; } [data-rt-theme="dark"] .rt-page-evening{ --rt-canvas:#100c1e; --rt-navy:#6e52d8; --rt-blue:#bba6ff; --rt-sky-tint:#b49cff; background:linear-gradient(180deg,#100c1e 0%,#0b0916 42%,#06050d 100%); } [data-rt-theme="dark"] .rt-has-art{ background:linear-gradient(180deg, var(--rt-canvas) 0%, var(--rt-canvas) 45%, #05070f 100%); } [data-rt-theme="dark"] .rt-page-evening.rt-has-art{ background:linear-gradient(180deg, var(--rt-canvas) 0%, var(--rt-canvas) 45%, #06050d 100%); } /* ---------------- bezel / sky artwork ---------------- Stand-in glows first (the build with no assets), then the real renders. */ [data-rt-theme="dark"] .rt-sky::before{ background:linear-gradient(135deg,rgba(61,107,240,.42),rgba(30,54,120,.18) 60%,transparent 100%); } [data-rt-theme="dark"] .rt-page-afternoon .rt-sky::before{ background:linear-gradient(135deg,rgba(48,150,220,.40),rgba(20,60,100,.16) 60%,transparent 100%); } [data-rt-theme="dark"] .rt-page-evening .rt-sky::before{ background:linear-gradient(135deg,rgba(140,110,240,.42),rgba(60,40,120,.18) 60%,transparent 100%); } /* The renders themselves. .rt-sky is an empty, pointer-events:none layer at z-index 0 with .rt-body above it, so a filter here touches nothing else. */ [data-rt-theme="dark"] .rt-has-art .rt-sky{ filter:brightness(.34) saturate(1.35) contrast(1.08); } /* ---------------- top bar ---------------- */ [data-rt-theme="dark"] .rt-topbar-btn{ background:rgba(255,255,255,.06); border-color:var(--rt-hairline); color:var(--rt-blue); box-shadow:0 4px 14px rgba(0,0,0,.4); } /* ---------------- progress card ---------------- */ [data-rt-theme="dark"] .rt-progress{ background:rgba(255,255,255,.05); border-color:var(--rt-hairline); box-shadow:0 6px 20px rgba(0,0,0,.35); } [data-rt-theme="dark"] .rt-seg.is-done{ background:linear-gradient(90deg,#2f5be0,#6f9cff); box-shadow:0 0 8px rgba(80,130,255,.6); } [data-rt-theme="dark"] .rt-page-evening .rt-seg.is-done{ background:linear-gradient(90deg,#6e52d8,#a98cff); box-shadow:0 0 8px rgba(140,110,240,.6); } /* ---------------- hero card (afternoon water) ---------------- CSS stand-in first; then the render, darkened by an overlay layer rather than a filter so .rt-hero-body's text stays bright on top of it. */ [data-rt-theme="dark"] .rt-hero{ background:linear-gradient(135deg,#12354f,#0b2135); border-color:rgba(111,208,242,.18); box-shadow:0 8px 24px rgba(0,0,0,.45); } [data-rt-theme="dark"] .rt-hero-art{ color:#6fd0f2; } [data-rt-theme="dark"] .rt-has-art .rt-hero{ background:linear-gradient(180deg,rgba(6,12,26,.66),rgba(6,12,26,.76)), url('../assets/routines/hero-droplet.png') center/100% 100% no-repeat; border-color:rgba(111,208,242,.16); } [data-rt-theme="dark"] .rt-hero-title{ color:#eaf3ff; } [data-rt-theme="dark"] .rt-hero-sub{ color:#a9c6de; } [data-rt-theme="dark"] .rt-hero-amount{ color:#eaf3ff; } [data-rt-theme="dark"] .rt-hero-amount span{ color:#8fb2cc; } /* ---------------- item cards ---------------- */ [data-rt-theme="dark"] .rt-card{ background:rgba(255,255,255,.055); border-color:var(--rt-hairline); box-shadow:0 4px 14px rgba(0,0,0,.3); } [data-rt-theme="dark"] .rt-check{ border-color:rgba(255,255,255,.22); color:#fff; } [data-rt-theme="dark"] .rt-trail-chevron{ border-color:rgba(255,255,255,.14); color:var(--rt-meta); } [data-rt-theme="dark"] .rt-trail-check{ background:radial-gradient(circle,#123a4f,#0a2030); color:var(--rt-sky-tint); box-shadow:0 0 14px rgba(111,208,242,.45); } [data-rt-theme="dark"] .rt-page-evening .rt-trail-check{ background:radial-gradient(circle,#2a2050,#160f2e); box-shadow:0 0 14px rgba(180,156,255,.45); } [data-rt-theme="dark"] .rt-subitem{ background:rgba(255,255,255,.04); } /* ---------------- CTA ---------------- The rim is a brushed-chrome gradient in light mode; on a dark page a bright silver ring reads as a leftover white edge, so it becomes graphite. */ [data-rt-theme="dark"] .rt-cta-rim{ background:linear-gradient(160deg,#6b7486 0%,#2a3040 22%,#151a26 50%,#3a4252 78%,#6b7486 100%); box-shadow:0 14px 30px rgba(0,0,0,.55), 0 0 26px rgba(111,208,242,.18); } [data-rt-theme="dark"] .rt-cta{ background:linear-gradient(180deg,#2c56d4,#0d1f78); box-shadow:inset 0 1px 0 rgba(255,255,255,.24), inset 0 -8px 18px rgba(111,208,242,.28); } [data-rt-theme="dark"] .rt-page-evening .rt-cta{ background:linear-gradient(180deg,#6244cc,#2b1c66); box-shadow:inset 0 1px 0 rgba(255,255,255,.24), inset 0 -8px 18px rgba(180,156,255,.28); } [data-rt-theme="dark"] .rt-page-evening .rt-cta-rim{ box-shadow:0 14px 30px rgba(0,0,0,.55), 0 0 26px rgba(180,156,255,.2); } /* ---------------- pinned chrome footer ---------------- Same overlay-not-filter reason as the hero: .rt-emblem is a child. */ [data-rt-theme="dark"] .rt-footer{ background:linear-gradient(180deg,#141a2a,#070a12); border-top:1px solid rgba(255,255,255,.07); box-shadow:0 -6px 20px rgba(0,0,0,.5); } [data-rt-theme="dark"] .rt-has-art .rt-footer{ background:linear-gradient(180deg,rgba(7,10,18,.72),rgba(7,10,18,.84)), url('../assets/routines/footer-chrome.png') center top/100% calc(100% - env(safe-area-inset-bottom)) no-repeat, #070a12; border-top:0; box-shadow:none; } [data-rt-theme="dark"] .rt-emblem{ background:radial-gradient(circle at 35% 28%,#3d6bf0,#060b1e); box-shadow:0 0 14px rgba(111,208,242,.45), inset 0 0 0 2px rgba(255,255,255,.14); } [data-rt-theme="dark"] .rt-page-evening .rt-emblem{ background:radial-gradient(circle at 35% 28%,#7a5ce0,#0d0820); box-shadow:0 0 14px rgba(180,156,255,.45), inset 0 0 0 2px rgba(255,255,255,.14); } /* ========================================================================= TO-DO LIST Keeps its green identity — the point of the green was to tell the to-do screen apart from the three blue/lilac periods at a glance, and that job still has to be done in the dark. ========================================================================= */ [data-rt-theme="dark"] .rt-page-todo{ --rt-canvas:#06140f; --rt-navy:#1e9e6b; --rt-navy-deep:#03150d; --rt-blue:#5fd8a4; --rt-sky-tint:#4fcf9a; background:linear-gradient(180deg,#06140f 0%,#050f0b 42%,#040807 100%); } [data-rt-theme="dark"] .rt-page-todo.rt-has-art{ background:linear-gradient(180deg, var(--rt-canvas) 0%, var(--rt-canvas) 45%, #040807 100%); } [data-rt-theme="dark"] .rt-page-todo .rt-sky::before{ background:linear-gradient(135deg,rgba(30,158,107,.40),rgba(14,70,48,.16) 60%,transparent 100%); } [data-rt-theme="dark"] .rt-page-todo .rt-cta{ background:linear-gradient(180deg,#149160,#052e1e); box-shadow:inset 0 1px 0 rgba(255,255,255,.24), inset 0 -8px 18px rgba(79,207,154,.28); } [data-rt-theme="dark"] .rt-page-todo .rt-cta-rim{ box-shadow:0 14px 30px rgba(0,0,0,.55), 0 0 26px rgba(79,207,154,.2); } [data-rt-theme="dark"] .rt-page-todo .rt-emblem{ background:radial-gradient(circle at 35% 28%,#1c8f60,#03150d); box-shadow:0 0 14px rgba(79,207,154,.45), inset 0 0 0 2px rgba(255,255,255,.14); } [data-rt-theme="dark"] .rt-page-todo .rt-seg.is-done{ background:linear-gradient(90deg,#149160,#4fcf9a); box-shadow:0 0 8px rgba(79,207,154,.55); } [data-rt-theme="dark"] .rt-page-todo .rt-trail-check{ background:radial-gradient(circle,#0e3d2a,#062018); color:#4fcf9a; box-shadow:0 0 14px rgba(79,207,154,.45); } /* context chips on each row */ [data-rt-theme="dark"] .rt-page-todo .td-chip{ background:rgba(79,207,154,.13); color:#86e3ba; } /* crossed-off rows — dimmed further rather than removed, same as light */ [data-rt-theme="dark"] .rt-page-todo .rt-card.is-done{ background:rgba(255,255,255,.025); box-shadow:none; } [data-rt-theme="dark"] .rt-page-todo .rt-card.is-done .rt-row-title{ text-decoration-color:rgba(186,196,218,.5); color:var(--rt-meta); } [data-rt-theme="dark"] .rt-page-todo .rt-subitem.is-done .rt-row-title{ text-decoration-color:rgba(186,196,218,.45); color:var(--rt-meta); } /* all-clear panel */ [data-rt-theme="dark"] .rt-page-todo .td-empty{ background:rgba(255,255,255,.04); border-color:rgba(79,207,154,.24); }