/* * Dynamic Juno — Theme System * themes.css — load AFTER styles.css in index.html * * Usage: * * Set data-theme="manuscript|birch|slate|dusk|obsidian|embers|pitch" * on . Omitting the attribute uses the default paper aesthetic * already defined in styles.css (unchanged). * * Each theme overrides the same CSS custom-property names that * styles.css already defines, so no component code needs to change. * * Dark-sidebar themes (dusk) and dark-center themes (obsidian, embers, * pitch) use scoped overrides on .rail--left / .rail--right so that * ink color flips to light inside the dark rails without touching the * center-stage text. * * Add this script tag to index.html BEFORE the Babel scripts: * * This prevents a flash of the default theme on load. */ /* ════════════════════════════════════════════════════════════ MANUSCRIPT — Warm cream · Deep ink · Amber serif ════════════════════════════════════════════════════════════ */ [data-theme="manuscript"] { --paper: oklch(97.5% 0.01 75); --paper-2: oklch(95.2% 0.013 76); --paper-3: oklch(94.5% 0.013 75); --paper-edge: oklch(91% 0.012 75); --rule: oklch(85% 0.016 76); --rule-soft: oklch(91.5% 0.011 75); --ink: oklch(16% 0.016 55); --ink-2: oklch(29% 0.013 58); --ink-3: oklch(40% 0.012 61); --ink-muted: oklch(45% 0.012 63); --ink-faint: oklch(52% 0.01 68); --amber: oklch(53% 0.18 50); --amber-2: oklch(63% 0.15 52); --amber-soft: oklch(96% 0.038 62); --amber-line: oklch(79% 0.1 55); --ff-display: "Newsreader", "Source Serif 4", Georgia, serif; --shadow: 0 1px 2px oklch(28% 0.01 70 / 0.06), 0 4px 12px oklch(28% 0.01 70 / 0.04); --shadow-lg: 0 2px 4px oklch(28% 0.01 70 / 0.08), 0 18px 48px oklch(28% 0.01 70 / 0.1); } /* ════════════════════════════════════════════════════════════ BIRCH — Sage tint · Forest accent · Compact serif ════════════════════════════════════════════════════════════ */ [data-theme="birch"] { --paper: oklch(97.5% 0.006 140); --paper-2: oklch(92% 0.018 145); --paper-3: oklch(91% 0.016 143); --paper-edge: oklch(88% 0.014 144); --rule: oklch(85% 0.015 145); --rule-soft: oklch(89% 0.012 144); --ink: oklch(22% 0.015 150); --ink-2: oklch(35% 0.012 148); --ink-3: oklch(44% 0.012 146); --ink-muted: oklch(46% 0.012 146); --ink-faint: oklch(52% 0.01 144); --amber: oklch(46% 0.1 155); --amber-2: oklch(54% 0.09 153); --amber-soft: oklch(94% 0.025 150); --amber-line: oklch(78% 0.05 152); --ff-display: "Newsreader", "Source Serif 4", Georgia, serif; --shadow: 0 1px 2px oklch(25% 0.015 148 / 0.06), 0 4px 12px oklch(25% 0.015 148 / 0.04); --shadow-lg: 0 2px 4px oklch(25% 0.015 148 / 0.08), 0 18px 48px oklch(25% 0.015 148 / 0.1); } /* ════════════════════════════════════════════════════════════ SLATE — Blue-gray rails · Steel accent · Sans-serif body ════════════════════════════════════════════════════════════ */ [data-theme="slate"] { --paper: oklch(97.5% 0.005 245); --paper-2: oklch(93.5% 0.009 248); --paper-3: oklch(92.5% 0.009 246); --paper-edge: oklch(89% 0.01 247); --rule: oklch(82% 0.013 248); --rule-soft: oklch(88.5% 0.008 247); --ink: oklch(16% 0.015 252); --ink-2: oklch(29% 0.013 250); --ink-3: oklch(39% 0.011 249); --ink-muted: oklch(44% 0.011 248); --ink-faint: oklch(51% 0.008 246); --amber: oklch(44% 0.2 248); --amber-2: oklch(54% 0.16 248); --amber-soft: oklch(95% 0.032 248); --amber-line: oklch(72% 0.1 248); --ff-display: "Inter Tight", "Inter", system-ui, sans-serif; --shadow: 0 1px 2px oklch(22% 0.01 248 / 0.06), 0 4px 12px oklch(22% 0.01 248 / 0.04); --shadow-lg: 0 2px 4px oklch(22% 0.01 248 / 0.08), 0 18px 48px oklch(22% 0.01 248 / 0.1); } [data-theme="slate"] body::before { opacity: 0; } /* ════════════════════════════════════════════════════════════ DUSK — Warm light center · Dark charcoal rails · Copper ════════════════════════════════════════════════════════════ */ [data-theme="dusk"] { --paper: oklch(96% 0.008 70); --paper-2: oklch(93% 0.01 70); /* center-stage surface (rail dark set via scoped block) */ --paper-3: oklch(91% 0.01 70); /* center-stage deeper surface */ --paper-edge: oklch(84% 0.011 68); --rule: oklch(84% 0.011 68); --rule-soft: oklch(89% 0.008 70); --ink: oklch(17% 0.013 57); --ink-2: oklch(31% 0.011 59); --ink-3: oklch(40% 0.01 61); --ink-muted: oklch(44% 0.01 62); --ink-faint: oklch(50% 0.008 65); --amber: oklch(61% 0.22 44); --amber-2: oklch(70% 0.18 46); --amber-soft: oklch(96% 0.045 50); --amber-line: oklch(78% 0.1 47); --shadow: 0 1px 3px oklch(10% 0.01 55 / 0.14), 0 4px 14px oklch(10% 0.01 55 / 0.09); --shadow-lg: 0 2px 6px oklch(10% 0.01 55 / 0.18), 0 20px 50px oklch(10% 0.01 55 / 0.13); } [data-theme="dusk"] body::before { opacity: 0; } /* Dark rails need light text */ [data-theme="dusk"] .rail--left, [data-theme="dusk"] .rail--right { --ink: oklch(93% 0.012 74); --ink-2: oklch(79% 0.011 71); --ink-3: oklch(68% 0.012 69); --ink-muted: oklch(65% 0.012 67); --ink-faint: oklch(72% 0.01 63); --paper: oklch(28% 0.02 55); --paper-2: oklch(33% 0.018 55); --paper-3: oklch(38% 0.016 55); --paper-edge: oklch(40% 0.016 55); --rule: oklch(40% 0.016 55); --rule-soft: oklch(34% 0.014 55); --amber-soft: oklch(32% 0.1 46); --amber-line: oklch(46% 0.16 44); --phase-orange: oklch(85% 0.12 55); --phase-orange-soft: oklch(35% 0.04 55); --phase-yellow: oklch(85% 0.12 90); --phase-yellow-soft: oklch(35% 0.03 90); --phase-beige: oklch(85% 0.06 70); --phase-beige-soft: oklch(35% 0.02 70); --phase-blue: oklch(85% 0.10 230); --phase-blue-soft: oklch(35% 0.04 230); --phase-pink: oklch(85% 0.12 350); --phase-pink-soft: oklch(35% 0.04 350); --phase-green: oklch(85% 0.10 140); --phase-green-soft: oklch(35% 0.04 140); } /* ════════════════════════════════════════════════════════════ OBSIDIAN — Dark navy center · Near-black rails · Electric blue ════════════════════════════════════════════════════════════ */ [data-theme="obsidian"] { --paper: oklch(22% 0.022 258); --paper-2: oklch(15% 0.026 262); --paper-3: oklch(14% 0.024 260); --paper-edge: oklch(32% 0.02 257); --rule: oklch(34% 0.022 256); --rule-soft: oklch(27% 0.02 258); --ink: oklch(91% 0.008 240); --ink-2: oklch(76% 0.01 244); --ink-3: oklch(65% 0.011 246); --ink-muted: oklch(62% 0.012 248); --ink-faint: oklch(68% 0.014 252); --amber: oklch(66% 0.22 254); --amber-2: oklch(74% 0.18 254); --amber-soft: oklch(30% 0.13 256); --amber-line: oklch(45% 0.17 254); --ff-display: "Inter Tight", "Inter", system-ui, sans-serif; --shadow: 0 1px 3px oklch(5% 0.02 260 / 0.65), 0 4px 16px oklch(5% 0.02 260 / 0.45); --shadow-lg: 0 4px 8px oklch(5% 0.02 260 / 0.75), 0 24px 56px oklch(5% 0.02 260 / 0.6); --phase-orange: oklch(85% 0.12 55); --phase-orange-soft: oklch(29% 0.04 55); --phase-yellow: oklch(85% 0.12 90); --phase-yellow-soft: oklch(29% 0.03 90); --phase-beige: oklch(85% 0.06 70); --phase-beige-soft: oklch(29% 0.02 70); --phase-blue: oklch(85% 0.10 230); --phase-blue-soft: oklch(29% 0.04 230); --phase-pink: oklch(85% 0.12 350); --phase-pink-soft: oklch(29% 0.04 350); --phase-green: oklch(85% 0.10 140); --phase-green-soft: oklch(29% 0.04 140); } [data-theme="obsidian"] body::before { opacity: 0; } /* ════════════════════════════════════════════════════════════ EMBERS — Dark umber center · Near-black rails · Gold italic ════════════════════════════════════════════════════════════ */ [data-theme="embers"] { --paper: oklch(21% 0.024 48); --paper-2: oklch(14% 0.028 46); --paper-3: oklch(13% 0.026 44); --paper-edge: oklch(30% 0.022 50); --rule: oklch(32% 0.022 50); --rule-soft: oklch(26% 0.02 48); --ink: oklch(89% 0.016 72); --ink-2: oklch(75% 0.016 70); --ink-3: oklch(66% 0.017 67); --ink-muted: oklch(63% 0.018 65); --ink-faint: oklch(68% 0.016 62); --amber: oklch(70% 0.2 78); --amber-2: oklch(78% 0.16 80); --amber-soft: oklch(28% 0.1 70); --amber-line: oklch(46% 0.16 74); --ff-display: "Cormorant Garamond", "Newsreader", Georgia, serif; --shadow: 0 1px 3px oklch(5% 0.03 48 / 0.65), 0 4px 16px oklch(5% 0.03 48 / 0.45); --shadow-lg: 0 4px 8px oklch(5% 0.03 48 / 0.75), 0 24px 56px oklch(5% 0.03 48 / 0.6); --phase-orange: oklch(85% 0.12 55); --phase-orange-soft: oklch(29% 0.04 55); --phase-yellow: oklch(85% 0.12 90); --phase-yellow-soft: oklch(29% 0.03 90); --phase-beige: oklch(85% 0.06 70); --phase-beige-soft: oklch(29% 0.02 70); --phase-blue: oklch(85% 0.10 230); --phase-blue-soft: oklch(29% 0.04 230); --phase-pink: oklch(85% 0.12 350); --phase-pink-soft: oklch(29% 0.04 350); --phase-green: oklch(85% 0.10 140); --phase-green-soft: oklch(29% 0.04 140); } [data-theme="embers"] body::before { opacity: 0; } /* Embers uses Cormorant Garamond — increase sizes for legibility */ [data-theme="embers"] .msg__text { font-size: calc(17.5px * var(--text-scale, 1)); line-height: 1.82; } [data-theme="embers"] .composer__box textarea { font-size: calc(18.5px * var(--text-scale, 1)); line-height: 1.72; } [data-theme="embers"] .prose { font-size: calc(17px * var(--text-scale, 1)); line-height: 1.78; } [data-theme="embers"] .reader__title { font-size: calc(22px * var(--text-scale, 1)); } /* ════════════════════════════════════════════════════════════ PITCH — Deep charcoal center · Near-black rails · Warm white ════════════════════════════════════════════════════════════ */ [data-theme="pitch"] { --paper: oklch(21% 0.005 60); --paper-2: oklch(13.5% 0.006 55); --paper-3: oklch(12% 0.005 53); --paper-edge: oklch(29% 0.004 57); --rule: oklch(31% 0.005 57); --rule-soft: oklch(25% 0.004 58); --ink: oklch(89% 0.007 62); --ink-2: oklch(74% 0.007 61); --ink-3: oklch(63% 0.006 60); --ink-muted: oklch(62% 0.006 60); --ink-faint: oklch(67% 0.005 58); --amber: oklch(80% 0.018 74); --amber-2: oklch(86% 0.014 75); --amber-soft: oklch(26% 0.014 66); --amber-line: oklch(50% 0.012 67); --ff-display: "Newsreader", "Source Serif 4", Georgia, serif; --shadow: 0 1px 3px oklch(3% 0.005 55 / 0.72), 0 4px 16px oklch(3% 0.005 55 / 0.52); --shadow-lg: 0 4px 10px oklch(3% 0.005 55 / 0.82), 0 28px 64px oklch(3% 0.005 55 / 0.68); --phase-orange: oklch(85% 0.12 55); --phase-orange-soft: oklch(29% 0.04 55); --phase-yellow: oklch(85% 0.12 90); --phase-yellow-soft: oklch(29% 0.03 90); --phase-beige: oklch(85% 0.06 70); --phase-beige-soft: oklch(29% 0.02 70); --phase-blue: oklch(85% 0.10 230); --phase-blue-soft: oklch(29% 0.04 230); --phase-pink: oklch(85% 0.12 350); --phase-pink-soft: oklch(29% 0.04 350); --phase-green: oklch(85% 0.10 140); --phase-green-soft: oklch(29% 0.04 140); } [data-theme="pitch"] body::before { opacity: 0; } /* ════════════════════════════════════════════════════════════ Shared: user message bubble on dark-center themes (--ink is now light, so flip the bubble to accent color) ════════════════════════════════════════════════════════════ */ [data-theme="obsidian"] .msg--user .msg__text, [data-theme="embers"] .msg--user .msg__text, [data-theme="pitch"] .msg--user .msg__text { background: var(--amber-soft); color: var(--ink); border: 1px solid var(--rule-soft); } /* Passage-edit redline diff — lift ink lightness so marks read on dark surfaces */ [data-theme="obsidian"], [data-theme="pitch"], [data-theme="dusk"] { --diff-ins-ink: oklch(78% 0.14 145); --diff-ins-bg: oklch(70% 0.15 145 / 0.20); --diff-del-ink: oklch(72% 0.17 20); --diff-del-bg: oklch(68% 0.18 20 / 0.20); } /* ════════════════════════════════════════════════════════════ Cormorant Garamond — add to font preload in index.html: family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,600 ════════════════════════════════════════════════════════════ */