/* * Dark-mode theme for Lexxy. * * The gem defines its colors as CSS custom properties in :root with only light * values. This app uses a manual dark-mode toggle: a `.dark` class on * (set from localStorage / system preference by a head script, flipped by the * theme controller), which is what Tailwind's `dark:` variant keys off. So these * overrides must scope to `.dark` too — NOT `@media (prefers-color-scheme: dark)`, * which would fire on OS preference even when the user has toggled the site the * other way, leaving near-white ink on a white background (or vice versa). * * Lexxy's surface/text tokens all derive from a neutral "ink" ramp plus a couple * of accents, so remapping those makes both the rendered content (.lexxy-content) * and the editor (, --lexxy-color-canvas) follow automatically. * * IMPORTANT: this must be loaded *after* lexxy.css. `.dark` (the class lands on * ) and the gem's `:root` have equal specificity, so source order breaks * the tie — loading later is what lets these overrides win (see * app/views/layouts/application.html.erb). */ .dark { /* Neutral ramp flipped: light text on dark surfaces (≈ stone-900/800/100) */ --lexxy-color-ink: oklch(95% 0 0); --lexxy-color-ink-medium: oklch(75% 0 0); --lexxy-color-ink-light: oklch(62% 0 0); --lexxy-color-ink-lighter: oklch(45% 0 0); --lexxy-color-ink-lightest: oklch(33% 0.005 60); --lexxy-color-ink-inverted: oklch(27% 0.006 56); /* canvas / editor bg ≈ stone-800 */ /* Brighter link for contrast on dark */ --lexxy-color-link: var(--lexxy-color-accent-medium); /* Code tokens tuned for dark backgrounds */ --lexxy-color-code-token-att: #ff7b72; --lexxy-color-code-token-comment: #8b949e; --lexxy-color-code-token-function: #d2a8ff; --lexxy-color-code-token-operator: #ff7b72; --lexxy-color-code-token-property: #79c0ff; --lexxy-color-code-token-punctuation: #c9d1d9; --lexxy-color-code-token-selector: #7ee787; --lexxy-color-code-token-variable: #ffa657; }