/* Nuttyverse unified theme for Forgejo. * * Single-file theme combining light and dark modes with chromatic overrides. * Mode switching uses `data-nv-scheme` attribute selectors set by bridge.js, * with a `prefers-color-scheme` media query fallback for no-JS contexts. * * Structure: * 1. Light mode defaults :root * 2. Dark no-JS fallback @media dark * 3. Dark bridge-controlled [data-nv-scheme="dark"] * 4. Chromatic light [data-nv-mode="chromatic"] * 5. Chromatic dark [scheme="dark"][mode="chromatic"] * 6. Syntax highlighting (Chroma) .chroma → --ch-* vars * 7. CodeMirror highlighting .CodeMirror → --cm-* vars * 8. Markup mode toggles image visibility * * Specificity: * :root (0,1,0) — light base * @media { :root:not([scheme]) } (0,2,0) — dark fallback * :root[data-nv-scheme="dark"] (0,2,0) — dark bridge * :root[data-nv-mode="chromatic"] (0,2,0) — light chromatic * :root[scheme="dark"][mode="chrom"] (0,3,0) — dark chromatic * * Token mapping reference (light mode, from doc/COLOR_SYSTEM.md): * * Token Mono L Chromatic L CF * ───────────── ────── ─────────── ──── * bg 1.000 0.990 0.08 * bg-subtle 0.985 0.960 0.10 * bg-element 0.965 0.930 0.12 * bg-hover 0.940 0.880 0.14 * bg-active 0.910 0.830 0.16 * border-subtle 0.850 0.850 0.10 * border 0.680 0.720 0.25 * border-strong 0.450 0.500 0.40 * text-tertiary 0.500 0.550 0.25 * text-secondary 0.300 0.350 0.15 * text 0.000 0.150 0.10 * bg-solid 0.000 cusp 1.00 * text-contrast 1.000 0/1 (APCA) 0 * * Token mapping reference (dark mode, from doc/COLOR_SYSTEM.md): * * Token Mono L Chromatic L CF * ───────────── ────── ─────────── ──── * bg 0.000 0.110 0.10 * bg-subtle 0.045 0.140 0.12 * bg-element 0.095 0.190 0.14 * bg-hover 0.150 0.230 0.16 * bg-active 0.200 0.270 0.18 * border-subtle 0.230 0.220 0.12 * border 0.400 0.320 0.30 * border-strong 0.600 0.500 0.40 * text-tertiary 0.500 0.500 0.25 * text-secondary 0.720 0.700 0.15 * text 1.000 0.900 0.10 * bg-solid 1.000 cusp 1.00 * text-contrast 0.000 0/1 (APCA) 0 * * COUPLED: bridge.js, app/src/styles/colors.css, doc/COLOR_SYSTEM.md */ /* ───────────────────────────────────────────────────────────────────────── */ /* Section 1 — Light mode defaults */ /* ───────────────────────────────────────────────────────────────────────── */ :root { /* ────────────────────────────────────────────────────────────────────── */ /* Fonts */ /* ────────────────────────────────────────────────────────────────────── */ --fonts-proportional: "Concourse OT", sans-serif; --fonts-monospace: "Iosevka", ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace; --fonts-regular: var(--fonts-proportional); /* ────────────────────────────────────────────────────────────────────── */ /* Steel scale (for console and selection) */ /* ────────────────────────────────────────────────────────────────────── */ /* Console/terminal areas are always dark, independent of the * page theme. This scale is identical in both light and dark * modes — defined here once and never redeclared. */ --steel-900: oklch(0 0 0); --steel-850: oklch(0.02 0 0); --steel-800: oklch(0.045 0 0); --steel-750: oklch(0.07 0 0); --steel-700: oklch(0.095 0 0); --steel-650: oklch(0.15 0 0); --steel-600: oklch(0.2 0 0); --steel-550: oklch(0.23 0 0); --steel-500: oklch(0.32 0 0); --steel-450: oklch(0.4 0 0); --steel-400: oklch(0.5 0 0); --steel-350: oklch(0.6 0 0); --steel-300: oklch(0.72 0 0); --steel-250: oklch(0.78 0 0); --steel-200: oklch(0.83 0 0); --steel-150: oklch(0.88 0 0); --steel-100: oklch(0.92 0 0); /* ────────────────────────────────────────────────────────────────────── */ /* Zinc scale (18 steps) */ /* ────────────────────────────────────────────────────────────────────── */ /* Achromatic light ramp from L=1.000 (page bg) down to * L=0.000 (text). Each step is annotated with its nearest * Nuttyverse token. */ --zinc-50: oklch(1 0 0); /* bg — page background */ --zinc-100: oklch(0.985 0 0); /* bg-subtle — recessed surface */ --zinc-150: oklch(0.975 0 0); /* — between */ --zinc-200: oklch(0.965 0 0); /* bg-element — cards, boxes */ --zinc-250: oklch(0.95 0 0); /* — between */ --zinc-300: oklch(0.94 0 0); /* bg-hover — hover states */ --zinc-350: oklch(0.91 0 0); /* bg-active — pressed states */ --zinc-400: oklch(0.85 0 0); /* border-subtle — subtle dividers */ --zinc-450: oklch(0.78 0 0); /* — between */ --zinc-500: oklch(0.68 0 0); /* border — standard borders */ --zinc-550: oklch(0.6 0 0); /* — between */ --zinc-600: oklch(0.5 0 0); /* text-tertiary — muted text */ --zinc-650: oklch(0.45 0 0); /* border-strong — strong borders */ --zinc-700: oklch(0.3 0 0); /* text-secondary — secondary text */ --zinc-750: oklch(0.2 0 0); /* — between */ --zinc-800: oklch(0.1 0 0); /* — near text */ --zinc-850: oklch(0.05 0 0); /* — between */ --zinc-900: oklch(0 0 0); /* text — primary text */ /* ────────────────────────────────────────────────────────────────────── */ /* Primary (black accent) */ /* ────────────────────────────────────────────────────────────────────── */ /* In mono light mode, the solid surface is pure black (L=0.000). */ --color-primary: oklch(0 0 0); --color-primary-contrast: oklch(1 0 0); --color-primary-dark-1: oklch(0 0 0); --color-primary-dark-2: oklch(0 0 0); --color-primary-dark-3: oklch(0 0 0); --color-primary-dark-4: oklch(0 0 0); --color-primary-dark-5: oklch(0.05 0 0); --color-primary-dark-6: oklch(0.1 0 0); --color-primary-dark-7: oklch(0.15 0 0); --color-primary-light-1: oklch(0.1 0 0); --color-primary-light-2: oklch(0.2 0 0); --color-primary-light-3: oklch(0.3 0 0); --color-primary-light-4: oklch(0.4 0 0); --color-primary-light-5: oklch(0.5 0 0); --color-primary-light-6: oklch(0.68 0 0); --color-primary-light-7: oklch(0.85 0 0); --color-primary-alpha-10: oklch(0 0 0 / 0.1); --color-primary-alpha-20: oklch(0 0 0 / 0.2); --color-primary-alpha-30: oklch(0 0 0 / 0.3); --color-primary-alpha-40: oklch(0 0 0 / 0.4); --color-primary-alpha-50: oklch(0 0 0 / 0.5); --color-primary-alpha-60: oklch(0 0 0 / 0.6); --color-primary-alpha-70: oklch(0 0 0 / 0.7); --color-primary-alpha-80: oklch(0 0 0 / 0.8); --color-primary-alpha-90: oklch(0 0 0 / 0.9); --color-primary-hover: oklch(0.12 0 0); --color-primary-active: oklch(0.2 0 0); /* ────────────────────────────────────────────────────────────────────── */ /* Secondary */ /* ────────────────────────────────────────────────────────────────────── */ --color-secondary: var(--zinc-200); --color-secondary-dark-1: var(--zinc-200); --color-secondary-dark-2: var(--zinc-300); --color-secondary-dark-3: var(--zinc-300); --color-secondary-dark-4: var(--zinc-400); --color-secondary-dark-5: var(--zinc-400); --color-secondary-dark-6: var(--zinc-500); --color-secondary-dark-7: var(--zinc-500); --color-secondary-dark-8: var(--zinc-600); --color-secondary-dark-9: var(--zinc-600); --color-secondary-dark-10: var(--zinc-700); --color-secondary-dark-11: var(--zinc-700); --color-secondary-dark-12: var(--zinc-800); --color-secondary-dark-13: var(--zinc-800); --color-secondary-light-1: var(--zinc-200); --color-secondary-light-2: var(--zinc-100); --color-secondary-light-3: var(--zinc-100); --color-secondary-light-4: var(--zinc-50); --color-secondary-alpha-10: oklch(0.965 0 0 / 0.1); --color-secondary-alpha-20: oklch(0.965 0 0 / 0.2); --color-secondary-alpha-30: oklch(0.965 0 0 / 0.3); --color-secondary-alpha-40: oklch(0.965 0 0 / 0.4); --color-secondary-alpha-50: oklch(0.965 0 0 / 0.5); --color-secondary-alpha-60: oklch(0.965 0 0 / 0.6); --color-secondary-alpha-70: oklch(0.965 0 0 / 0.7); --color-secondary-alpha-80: oklch(0.965 0 0 / 0.8); --color-secondary-alpha-90: oklch(0.965 0 0 / 0.9); --color-secondary-hover: var(--color-secondary-dark-2); --color-secondary-active: var(--color-secondary-dark-4); /* ────────────────────────────────────────────────────────────────────── */ /* Console */ /* ────────────────────────────────────────────────────────────────────── */ /* Always dark, identical in both themes — defined once. */ --color-console-fg: oklch(0.92 0 0); --color-console-fg-subtle: oklch(0.64 0 0); --color-console-bg: oklch(0.07 0 0); --color-console-border: oklch(0.22 0 0); --color-console-hover-bg: oklch(1 0 0 / 0.09); --color-console-active-bg: oklch(0.3 0 0); --color-console-menu-bg: oklch(0.22 0 0); --color-console-menu-border: oklch(0.38 0 0); /* ────────────────────────────────────────────────────────────────────── */ /* Named colors */ /* ────────────────────────────────────────────────────────────────────── */ /* Light mode variants use slightly higher chroma (+0.02) * than dark mode to compensate for reduced chromatic salience * against bright backgrounds (Hunt effect). */ --color-red: oklch(0.52 0.2 27); --color-red-light: oklch(0.6 0.2 27); --color-red-dark-1: oklch(0.46 0.2 27); --color-red-dark-2: oklch(0.42 0.2 27); --color-orange: oklch(0.54 0.18 50); --color-orange-light: oklch(0.62 0.18 50); --color-orange-dark-1: oklch(0.48 0.18 50); --color-orange-dark-2: oklch(0.44 0.18 50); --color-yellow: oklch(0.58 0.17 85); --color-yellow-light: oklch(0.66 0.17 85); --color-yellow-dark-1: oklch(0.52 0.17 85); --color-yellow-dark-2: oklch(0.48 0.17 85); --color-olive: oklch(0.52 0.17 130); --color-olive-light: oklch(0.6 0.17 130); --color-olive-dark-1: oklch(0.46 0.17 130); --color-olive-dark-2: oklch(0.42 0.17 130); --color-green: oklch(0.48 0.17 145); --color-green-light: oklch(0.56 0.17 145); --color-green-dark-1: oklch(0.42 0.17 145); --color-green-dark-2: oklch(0.38 0.17 145); --color-teal: oklch(0.52 0.14 185); --color-teal-light: oklch(0.6 0.14 185); --color-teal-dark-1: oklch(0.46 0.14 185); --color-teal-dark-2: oklch(0.42 0.14 185); --color-blue: oklch(0.5 0.17 250); --color-blue-light: oklch(0.58 0.17 250); --color-blue-dark-1: oklch(0.44 0.17 250); --color-blue-dark-2: oklch(0.4 0.17 250); --color-violet: oklch(0.5 0.2 290); --color-violet-light: oklch(0.58 0.2 290); --color-violet-dark-1: oklch(0.44 0.2 290); --color-violet-dark-2: oklch(0.4 0.2 290); --color-purple: oklch(0.48 0.2 305); --color-purple-light: oklch(0.56 0.2 305); --color-purple-dark-1: oklch(0.42 0.2 305); --color-purple-dark-2: oklch(0.38 0.2 305); --color-pink: oklch(0.52 0.2 350); --color-pink-light: oklch(0.6 0.2 350); --color-pink-dark-1: oklch(0.46 0.2 350); --color-pink-dark-2: oklch(0.42 0.2 350); --color-brown: oklch(0.48 0.1 60); --color-brown-light: oklch(0.56 0.1 60); --color-brown-dark-1: oklch(0.42 0.1 60); --color-brown-dark-2: oklch(0.38 0.1 60); --color-grey: oklch(0.42 0 0); --color-grey-light: oklch(0.56 0 0); --color-black: oklch(0 0 0); --color-black-light: oklch(0.1 0 0); --color-black-dark-1: oklch(0 0 0); --color-black-dark-2: oklch(0 0 0); /* ────────────────────────────────────────────────────────────────────── */ /* ANSI terminal colors */ /* ────────────────────────────────────────────────────────────────────── */ /* Identical in both themes — defined once. */ --color-ansi-black: oklch(0.15 0 0); --color-ansi-red: oklch(0.58 0.18 27); --color-ansi-green: oklch(0.65 0.12 145); --color-ansi-yellow: oklch(0.68 0.15 85); --color-ansi-blue: oklch(0.55 0.12 250); --color-ansi-magenta: oklch(0.56 0.18 340); --color-ansi-cyan: oklch(0.6 0.1 195); --color-ansi-white: var(--color-console-fg-subtle); --color-ansi-bright-black: oklch(0.3 0 0); --color-ansi-bright-red: oklch(0.63 0.16 27); --color-ansi-bright-green: oklch(0.7 0.1 145); --color-ansi-bright-yellow: oklch(0.75 0.14 85); --color-ansi-bright-blue: oklch(0.6 0.1 250); --color-ansi-bright-magenta: oklch(0.61 0.16 340); --color-ansi-bright-cyan: oklch(0.68 0.08 195); --color-ansi-bright-white: var(--color-console-fg); /* ────────────────────────────────────────────────────────────────────── */ /* Special colors */ /* ────────────────────────────────────────────────────────────────────── */ --color-gold: oklch(0.65 0.12 85); --color-white: oklch(1 0 0); /* ────────────────────────────────────────────────────────────────────── */ /* Diff colors */ /* ────────────────────────────────────────────────────────────────────── */ --color-diff-removed-word-bg: oklch(0.8 0.08 27); --color-diff-added-word-bg: oklch(0.83 0.08 145); --color-diff-removed-row-bg: oklch(0.95 0.02 27); --color-diff-moved-row-bg: oklch(0.95 0.03 85); --color-diff-added-row-bg: oklch(0.96 0.02 145); --color-diff-removed-row-border: oklch(0.8 0.08 27); --color-diff-moved-row-border: oklch(0.75 0.1 85); --color-diff-added-row-border: oklch(0.83 0.08 145); --color-diff-inactive: var(--zinc-100); /* ────────────────────────────────────────────────────────────────────── */ /* Status / alert colors */ /* ────────────────────────────────────────────────────────────────────── */ --color-error-border: oklch(0.78 0.1 27); --color-error-bg: oklch(0.95 0.03 27); --color-error-bg-active: oklch(0.85 0.08 27); --color-error-bg-hover: oklch(0.9 0.05 27); --color-error-text: oklch(0.3 0.1 27); --color-success-border: oklch(0.75 0.1 145); --color-success-bg: oklch(0.96 0.02 145); --color-success-text: oklch(0.25 0.08 145); --color-warning-border: oklch(0.75 0.12 85); --color-warning-bg: oklch(0.96 0.03 85); --color-warning-text: oklch(0.3 0.12 85); --color-info-border: oklch(0.7 0.08 250); --color-info-bg: oklch(0.96 0.02 250); --color-info-text: oklch(0.25 0.1 250); /* ────────────────────────────────────────────────────────────────────── */ /* Badge colors */ /* ────────────────────────────────────────────────────────────────────── */ --color-red-badge: oklch(0.5 0.2 27); --color-red-badge-bg: oklch(0.5 0.2 27 / 0.13); --color-red-badge-hover-bg: oklch(0.5 0.2 27 / 0.27); --color-green-badge: oklch(0.55 0.16 145); --color-green-badge-bg: oklch(0.55 0.16 145 / 0.13); --color-green-badge-hover-bg: oklch(0.55 0.16 145 / 0.27); --color-yellow-badge: oklch(0.6 0.17 85); --color-yellow-badge-bg: oklch(0.6 0.17 85 / 0.13); --color-yellow-badge-hover-bg: oklch(0.6 0.17 85 / 0.27); --color-orange-badge: oklch(0.54 0.18 50); --color-orange-badge-bg: oklch(0.54 0.18 50 / 0.13); --color-orange-badge-hover-bg: oklch(0.54 0.18 50 / 0.27); /* ────────────────────────────────────────────────────────────────────── */ /* Thin element / danger vars */ /* ────────────────────────────────────────────────────────────────────── */ --thin-lightness: 0.45; --regular-chroma: 0.19; --color-thin-green: oklch(var(--thin-lightness) var(--regular-chroma) 145); --color-thin-red: oklch(var(--thin-lightness) var(--regular-chroma) 27); --color-thin-purple: oklch(var(--thin-lightness) var(--regular-chroma) 298); --color-thin-orange: oklch(var(--thin-lightness) var(--regular-chroma) 41); --thin-lightness-highlight: 0.38; --color-thin-red-highlight: oklch(var(--thin-lightness-highlight) var(--regular-chroma) 27); --bg-lightness: 0.95; --bg-chroma: 0.03; --color-danger-bg: oklch(var(--bg-lightness) var(--bg-chroma) 27); /* ────────────────────────────────────────────────────────────────────── */ /* UI surface colors */ /* ────────────────────────────────────────────────────────────────────── */ --color-body: oklch(1 0 0); /* bg */ --color-box-header: var(--zinc-100); /* bg-subtle */ --color-box-body: var(--zinc-50); /* bg */ --color-box-body-highlight: var(--zinc-200); /* bg-element */ --color-text-dark: oklch(0 0 0); --color-text: var(--zinc-900); /* text */ --color-text-light: var(--zinc-700); /* text-secondary */ --color-text-light-1: var(--zinc-650); /* border-strong */ --color-text-light-2: var(--zinc-600); /* text-tertiary */ --color-text-light-3: var(--zinc-550); --color-footer: var(--zinc-100); --color-timeline: var(--zinc-200); --color-input-text: var(--zinc-800); --color-input-background: oklch(1 0 0); --color-input-toggle-background: oklch(1 0 0); --color-input-border: var(--zinc-300); /* bg-hover */ --color-input-border-hover: var(--zinc-400); /* border-subtle */ --color-header-wrapper: var(--zinc-50); --color-header-wrapper-transparent: oklch(0.985 0 0 / 0); --color-light: oklch(1 0 0 / 0.8); --color-light-mimic-enabled: rgba(0, 0, 0, calc(6 / 255 * 222 / 255 / var(--opacity-disabled))); --color-light-border: oklch(0 0 0 / 0.11); --color-hover: oklch(0.92 0 0 / 0.67); --color-active: oklch(0.91 0 0); --color-menu: var(--zinc-100); --color-card: var(--zinc-50); --fancy-card-bg: var(--zinc-100); --fancy-card-border: var(--zinc-200); --color-markup-table-row: oklch(1 0 0 / 0.02); --color-markup-code-block: var(--zinc-150); --color-markup-code-inline: var(--zinc-200); --color-button: var(--zinc-150); --color-code-bg: var(--zinc-50); --color-shadow: oklch(0 0 0 / 0.38); --color-secondary-bg: var(--zinc-100); --color-text-focus: oklch(1 0 0); --color-expand-button: var(--zinc-200); --color-placeholder-text: var(--color-text-light-3); --color-editor-line-highlight: var(--zinc-100); --color-project-board-bg: var(--color-secondary-light-2); --color-project-board-dark-label: var(--color-text-light-3); --color-caret: var(--color-text); --color-reaction-bg: oklch(0 0 0 / 0.04); --color-reaction-active-bg: var(--color-primary-alpha-20); --color-reaction-hover-bg: var(--color-primary-alpha-30); --color-tooltip-text: oklch(1 0 0); --color-tooltip-bg: oklch(0 0 0 / 0.94); --color-nav-bg: var(--zinc-100); --color-nav-hover-bg: var(--zinc-300); --color-secondary-nav-bg: var(--color-body); --color-label-text: var(--color-text); --color-label-bg: oklch(0.8 0 0 / 0.48); --color-label-hover-bg: oklch(0.8 0 0 / 0.63); --color-label-active-bg: oklch(0.8 0 0); --color-label-bg-alt: oklch(0.8 0 0); /* ────────────────────────────────────────────────────────────────────── */ /* Accent / link colors */ /* ────────────────────────────────────────────────────────────────────── */ /* Fixed blue (h=250) in mono mode. */ --color-accent: oklch(0.45 0.15 250); --color-small-accent: oklch(0.5 0.12 250); --color-highlight-fg: oklch(0.35 0.15 250); --color-highlight-bg: oklch(0.92 0.06 250); --color-overlay-backdrop: oklch(0 0 0 / 0.75); --color-selection-bg: oklch(0.25 0.1 250); --color-selection-fg: oklch(1 0 0); --checkerboard-color-1: oklch(1 0 0); --checkerboard-color-2: oklch(0.92 0 0); accent-color: var(--color-accent); /* ────────────────────────────────────────────────────────────────────── */ /* Syntax highlighting variables (light defaults) */ /* ────────────────────────────────────────────────────────────────────── */ /* Chroma classes reference these variables so that the rule * blocks are defined once. Dark mode overrides the variable * values. * * Where light mode shares a color across classes but dark * mode diverges, each class gets its own variable so dark * can override independently. */ /* Chroma: Comment family */ --ch-comment: #6a737d; /* .c, .c1, .ch */ --ch-comment-multiline: #999988; /* .cm */ --ch-comment-preproc: #109295; /* .cp */ --ch-comment-preproc-file: #4c4dbc; /* .cpf */ --ch-comment-special: #999999; /* .cs */ /* Chroma: Keyword family */ --ch-keyword: #d73a49; /* .k, .kd, .kr */ --ch-keyword-constant: #d73a49; /* .kc — same as keyword in light */ --ch-keyword-namespace: #d73a49; /* .kn — same as keyword in light */ --ch-keyword-pseudo: #d73a49; /* .kp — same as keyword in light */ --ch-keyword-type: #445588; /* .kt */ /* Chroma: Name family */ --ch-name: inherit; /* .n — unstyled in light */ --ch-name-builtin-pseudo: #999999; /* .bp */ --ch-name-builtin: #005cc5; /* .nb */ --ch-name-class: #445588; /* .nc */ --ch-name-decorator: #3c5d5d; /* .nd */ --ch-name-exception: #990000; /* .ne */ --ch-name-function: #005cc5; /* .nf */ --ch-name-entity: #6f42c1; /* .ni */ --ch-name-label: #990000; /* .nl */ --ch-name-namespace: #555555; /* .nn */ --ch-name-constant: #008080; /* .no */ --ch-name-tag: #22863a; /* .nt */ --ch-name-variable: #008080; /* .nv */ --ch-name-other: #24292e; /* .nx */ --ch-name-attribute: #d73a49; /* .na */ /* Chroma: Number family */ --ch-number: #009999; /* .m, .mb, .mf, .mh, .mi, .mo, .il */ /* Chroma: String family */ --ch-string: #106303; /* .s, .s1, .s2, .sb, .sd, .sh */ --ch-string-affix: #cc7a00; /* .sa */ --ch-string-char: #cc7a00; /* .sc */ --ch-string-delimiter: #106303; /* .dl */ --ch-string-escape: #994400; /* .se */ --ch-string-interpol: #cc7a00; /* .si */ --ch-string-regex: #4c4dbc; /* .sr */ --ch-string-symbol: #994400; /* .ss */ --ch-string-other: #106303; /* .sx */ /* Chroma: Operator family */ --ch-operator: #d73a49; /* .o */ --ch-operator-word: #d73a49; /* .ow — same as operator in light */ /* Chroma: Punctuation */ --ch-punctuation: inherit; /* .p — unstyled in light */ /* Chroma: Variable family */ --ch-variable: #008080; /* .vc, .vg, .vi */ /* Chroma: Generic family */ --ch-generic-deleted-fg: #000000; /* .gd foreground */ --ch-generic-deleted-bg: #ffdddd; /* .gd background */ --ch-generic-emph: #000000; /* .ge */ --ch-generic-heading: #999999; /* .gh */ --ch-generic-inserted-fg: #000000; /* .gi foreground */ --ch-generic-inserted-bg: #ddffdd; /* .gi background */ --ch-generic-output: #888888; /* .go */ --ch-generic-prompt: #555555; /* .gp */ --ch-generic-error: #aa0000; /* .gr */ --ch-generic-traceback: #aa0000; /* .gt — same as error in light */ --ch-generic-strong: inherit; /* .gs — unstyled in light */ --ch-generic-subheading: #aaaaaa; /* .gu */ /* Chroma: Misc */ --ch-whitespace: #bbbbbb; /* .w */ /* CodeMirror variables (dark theme values — light mode uses CM * built-in defaults which these intentionally match so the * rules work in both modes via a single variable set). */ --cm-property: #a0cc75; --cm-header: #9daccc; --cm-quote: #009900; --cm-keyword: #cc8a61; --cm-atom: #ef5e77; --cm-number: #ff5656; --cm-def: #e4e4e4; --cm-variable-2: #00bdbf; --cm-variable-3: #008855; --cm-comment: #8e9ab3; --cm-string: #a77272; --cm-string-2: #ff5500; --cm-meta: #ffb176; --cm-builtin: #b7c951; --cm-bracket: #999977; --cm-tag: #f1d273; --cm-attribute: #bfcc70; --cm-hr: #999999; --cm-url: #c5cfd0; --cm-link: #d8c792; --cm-error: #dbdbeb; color-scheme: light; } /* ────────────────────────────────────────────────────────────────────────── */ /* Section 2 — Dark mode no-JS fallback */ /* ────────────────────────────────────────────────────────────────────────── */ /* Activated by prefers-color-scheme: dark when bridge.js has NOT yet * set the data-nv-scheme attribute. Only overrides variables that * DIFFER from the light defaults. Steel, console, and ANSI are * identical — not redeclared. */ @media (prefers-color-scheme: dark) { :root:not([data-nv-scheme]) { --is-dark-theme: true; /* ────────────────────────────────────────────────────────────────── */ /* Primary (white accent) */ /* ────────────────────────────────────────────────────────────────── */ --color-primary: oklch(1 0 0); --color-primary-contrast: oklch(0 0 0); --color-primary-dark-1: oklch(0.92 0 0); --color-primary-dark-2: oklch(0.85 0 0); --color-primary-dark-3: oklch(0.78 0 0); --color-primary-dark-4: oklch(0.72 0 0); --color-primary-dark-5: oklch(0.65 0 0); --color-primary-dark-6: oklch(0.58 0 0); --color-primary-dark-7: oklch(0.5 0 0); --color-primary-light-1: oklch(1 0 0); --color-primary-light-2: oklch(1 0 0); --color-primary-light-3: oklch(1 0 0); --color-primary-light-4: oklch(1 0 0); --color-primary-light-5: oklch(0.985 0 0); --color-primary-light-6: oklch(0.965 0 0); --color-primary-light-7: oklch(0.94 0 0); --color-primary-alpha-10: oklch(1 0 0 / 0.1); --color-primary-alpha-20: oklch(1 0 0 / 0.2); --color-primary-alpha-30: oklch(1 0 0 / 0.3); --color-primary-alpha-40: oklch(1 0 0 / 0.4); --color-primary-alpha-50: oklch(1 0 0 / 0.5); --color-primary-alpha-60: oklch(1 0 0 / 0.6); --color-primary-alpha-70: oklch(1 0 0 / 0.7); --color-primary-alpha-80: oklch(1 0 0 / 0.8); --color-primary-alpha-90: oklch(1 0 0 / 0.9); --color-primary-hover: oklch(0.88 0 0); --color-primary-active: oklch(0.78 0 0); /* ────────────────────────────────────────────────────────────────── */ /* Secondary */ /* ────────────────────────────────────────────────────────────────── */ --color-secondary: var(--steel-700); --color-secondary-dark-1: var(--steel-550); --color-secondary-dark-2: var(--steel-500); --color-secondary-dark-3: var(--steel-450); --color-secondary-dark-4: var(--steel-400); --color-secondary-dark-5: var(--steel-350); --color-secondary-dark-6: var(--steel-300); --color-secondary-dark-7: var(--steel-250); --color-secondary-dark-8: var(--steel-200); --color-secondary-dark-9: var(--steel-150); --color-secondary-dark-10: var(--steel-100); --color-secondary-dark-11: var(--steel-100); --color-secondary-dark-12: var(--steel-100); --color-secondary-dark-13: var(--steel-100); --color-secondary-light-1: var(--steel-650); --color-secondary-light-2: var(--steel-700); --color-secondary-light-3: var(--steel-750); --color-secondary-light-4: var(--steel-800); --color-secondary-alpha-10: oklch(0.095 0 0 / 0.1); --color-secondary-alpha-20: oklch(0.095 0 0 / 0.2); --color-secondary-alpha-30: oklch(0.095 0 0 / 0.3); --color-secondary-alpha-40: oklch(0.095 0 0 / 0.4); --color-secondary-alpha-50: oklch(0.095 0 0 / 0.5); --color-secondary-alpha-60: oklch(0.095 0 0 / 0.6); --color-secondary-alpha-70: oklch(0.095 0 0 / 0.7); --color-secondary-alpha-80: oklch(0.095 0 0 / 0.8); --color-secondary-alpha-90: oklch(0.095 0 0 / 0.9); --color-secondary-hover: var(--color-secondary-light-1); --color-secondary-active: var(--color-secondary-light-2); /* ────────────────────────────────────────────────────────────────── */ /* Named colors */ /* ────────────────────────────────────────────────────────────────── */ --color-red: oklch(0.5 0.18 27); --color-red-light: oklch(0.58 0.18 27); --color-red-dark-1: oklch(0.44 0.18 27); --color-red-dark-2: oklch(0.4 0.18 27); --color-orange: oklch(0.55 0.16 50); --color-orange-light: oklch(0.63 0.16 50); --color-orange-dark-1: oklch(0.49 0.16 50); --color-orange-dark-2: oklch(0.45 0.16 50); --color-yellow: oklch(0.6 0.15 85); --color-yellow-light: oklch(0.68 0.15 85); --color-yellow-dark-1: oklch(0.54 0.15 85); --color-yellow-dark-2: oklch(0.5 0.15 85); --color-olive: oklch(0.55 0.15 130); --color-olive-light: oklch(0.63 0.15 130); --color-olive-dark-1: oklch(0.49 0.15 130); --color-olive-dark-2: oklch(0.45 0.15 130); --color-green: oklch(0.5 0.15 145); --color-green-light: oklch(0.58 0.15 145); --color-green-dark-1: oklch(0.44 0.15 145); --color-green-dark-2: oklch(0.4 0.15 145); --color-teal: oklch(0.55 0.12 185); --color-teal-light: oklch(0.63 0.12 185); --color-teal-dark-1: oklch(0.49 0.12 185); --color-teal-dark-2: oklch(0.45 0.12 185); --color-blue: oklch(0.52 0.15 250); --color-blue-light: oklch(0.6 0.15 250); --color-blue-dark-1: oklch(0.46 0.15 250); --color-blue-dark-2: oklch(0.42 0.15 250); --color-violet: oklch(0.48 0.18 290); --color-violet-light: oklch(0.56 0.18 290); --color-violet-dark-1: oklch(0.42 0.18 290); --color-violet-dark-2: oklch(0.38 0.18 290); --color-purple: oklch(0.5 0.18 305); --color-purple-light: oklch(0.58 0.18 305); --color-purple-dark-1: oklch(0.44 0.18 305); --color-purple-dark-2: oklch(0.4 0.18 305); --color-pink: oklch(0.52 0.18 350); --color-pink-light: oklch(0.6 0.18 350); --color-pink-dark-1: oklch(0.46 0.18 350); --color-pink-dark-2: oklch(0.42 0.18 350); --color-brown: oklch(0.5 0.08 60); --color-brown-light: oklch(0.58 0.08 60); --color-brown-dark-1: oklch(0.44 0.08 60); --color-brown-dark-2: oklch(0.4 0.08 60); --color-black: oklch(0.1 0 0); --color-black-light: oklch(0.18 0 0); --color-black-dark-1: oklch(0.04 0 0); --color-black-dark-2: oklch(0 0 0); /* ────────────────────────────────────────────────────────────────── */ /* Special colors */ /* ────────────────────────────────────────────────────────────────── */ --color-pure-black: oklch(0 0 0); /* ────────────────────────────────────────────────────────────────── */ /* Diff colors */ /* ────────────────────────────────────────────────────────────────── */ --color-diff-removed-word-bg: oklch(0.35 0.1 27); --color-diff-added-word-bg: oklch(0.35 0.1 145); --color-diff-removed-row-bg: oklch(0.18 0.04 27); --color-diff-moved-row-bg: oklch(0.2 0.06 85); --color-diff-added-row-bg: oklch(0.18 0.04 145); --color-diff-removed-row-border: oklch(0.35 0.1 27); --color-diff-moved-row-border: oklch(0.4 0.12 85); --color-diff-added-row-border: oklch(0.35 0.1 145); --color-diff-inactive: var(--steel-650); /* ────────────────────────────────────────────────────────────────── */ /* Status / alert colors */ /* ────────────────────────────────────────────────────────────────── */ --color-error-border: oklch(0.4 0.12 27); --color-error-bg: oklch(0.2 0.06 27); --color-error-bg-active: oklch(0.3 0.08 27); --color-error-bg-hover: oklch(0.25 0.07 27); --color-error-text: oklch(0.9 0.05 27); --color-success-border: oklch(0.4 0.1 145); --color-success-bg: oklch(0.2 0.05 145); --color-success-text: oklch(0.85 0.08 145); --color-warning-border: oklch(0.5 0.12 85); --color-warning-bg: oklch(0.25 0.05 85); --color-warning-text: oklch(0.9 0.1 85); --color-info-border: oklch(0.4 0.1 250); --color-info-bg: oklch(0.2 0.05 250); --color-info-text: oklch(0.85 0.05 250); /* ────────────────────────────────────────────────────────────────── */ /* Badge colors */ /* ────────────────────────────────────────────────────────────────── */ --color-red-badge: oklch(0.55 0.18 27); --color-red-badge-bg: oklch(0.55 0.18 27 / 0.13); --color-red-badge-hover-bg: oklch(0.55 0.18 27 / 0.27); --color-green-badge: oklch(0.6 0.14 145); --color-green-badge-bg: oklch(0.6 0.14 145 / 0.13); --color-green-badge-hover-bg: oklch(0.6 0.14 145 / 0.27); --color-yellow-badge: oklch(0.65 0.15 85); --color-yellow-badge-bg: oklch(0.65 0.15 85 / 0.13); --color-yellow-badge-hover-bg: oklch(0.65 0.15 85 / 0.27); --color-orange-badge: oklch(0.58 0.16 50); --color-orange-badge-bg: oklch(0.58 0.16 50 / 0.13); --color-orange-badge-hover-bg: oklch(0.58 0.16 50 / 0.27); /* ────────────────────────────────────────────────────────────────── */ /* Thin element / danger vars */ /* ────────────────────────────────────────────────────────────────── */ --thin-lightness: 0.68; --thin-lightness-highlight: 0.75; --color-thin-red-highlight: oklch(var(--thin-lightness-highlight) var(--regular-chroma) 27); --bg-lightness: 0.26; --bg-chroma: 0.05; --color-danger-bg: oklch(var(--bg-lightness) var(--bg-chroma) 27); /* ────────────────────────────────────────────────────────────────── */ /* UI surface colors */ /* ────────────────────────────────────────────────────────────────── */ --color-body: var(--steel-800); /* bg-subtle */ --color-box-header: var(--steel-700); /* bg-element */ --color-box-body: var(--steel-750); /* between */ --color-box-body-highlight: var(--steel-650); /* bg-hover */ --color-text-dark: oklch(1 0 0); --color-text: var(--steel-100); /* ≈ text */ --color-text-light: var(--steel-150); --color-text-light-1: var(--steel-150); --color-text-light-2: var(--steel-200); --color-text-light-3: var(--steel-200); --color-footer: var(--steel-900); --color-timeline: var(--steel-550); --color-input-text: var(--steel-100); --color-input-background: var(--steel-650); --color-input-toggle-background: var(--steel-650); --color-input-border: var(--steel-550); --color-input-border-hover: var(--steel-450); --color-header-wrapper: var(--steel-850); --color-header-wrapper-transparent: oklch(0.02 0 0 / 0); --color-light: oklch(0 0 0 / 0.16); --color-light-mimic-enabled: rgba(0, 0, 0, calc(40 / 255 * 222 / 255 / var(--opacity-disabled))); --color-light-border: oklch(1 0 0 / 0.24); --color-hover: var(--steel-650); --color-active: var(--steel-600); --color-menu: var(--steel-700); --color-card: var(--steel-700); --fancy-card-bg: var(--steel-650); --fancy-card-border: var(--steel-600); --color-markup-code-block: var(--steel-750); --color-markup-code-inline: var(--steel-700); --color-button: var(--steel-650); --color-code-bg: var(--steel-750); --color-secondary-bg: var(--steel-700); --color-expand-button: oklch(0.25 0 0); --color-editor-line-highlight: var(--steel-700); --color-shadow: oklch(1 0 0 / 0.12); --color-project-board-bg: var(--color-secondary-light-3); --color-reaction-bg: oklch(1 0 0 / 0.07); --color-reaction-hover-bg: var(--color-primary-alpha-40); --color-nav-bg: var(--steel-900); --color-nav-hover-bg: var(--steel-650); --color-label-text: oklch(1 0 0); --color-label-bg: var(--steel-650); --color-label-hover-bg: var(--steel-600); --color-label-active-bg: var(--steel-500); --color-label-bg-alt: var(--steel-550); /* ────────────────────────────────────────────────────────────────── */ /* Accent / link colors */ /* ────────────────────────────────────────────────────────────────── */ --color-accent: oklch(0.65 0.15 250); --color-small-accent: oklch(0.62 0.12 250); --color-highlight-fg: oklch(0.85 0.1 250); --color-highlight-bg: oklch(0.35 0.12 250); --color-selection-bg: oklch(0.45 0.15 250); --color-selection-fg: oklch(1 0 0); --checkerboard-color-1: oklch(0.3 0 0); --checkerboard-color-2: oklch(0.2 0 0); /* ────────────────────────────────────────────────────────────────── */ /* Syntax highlighting variables (dark overrides) */ /* ────────────────────────────────────────────────────────────────── */ /* Chroma: Comment family */ --ch-comment: #777e94; --ch-comment-multiline: #777e94; --ch-comment-preproc: #8ec07c; --ch-comment-preproc-file: #649bc4; --ch-comment-special: #9075cd; /* Chroma: Keyword family */ --ch-keyword: #ff7540; --ch-keyword-type: #ff7b72; --ch-keyword-constant: #649bc4; --ch-keyword-namespace: #ffaa10; --ch-keyword-pseudo: #5f8700; /* Chroma: Name family */ --ch-name-builtin-pseudo: #fabd2f; --ch-name-builtin: #fabd2f; --ch-name-class: #ffaa10; --ch-name-decorator: #8ec07c; --ch-name-exception: #ff7540; --ch-name-function: #fabd2f; --ch-name-entity: #fabd2f; --ch-name-label: #ff7540; --ch-name-namespace: #c9d1d9; --ch-name-constant: #649bc4; --ch-name-tag: #ff7540; --ch-name-variable: #ebdbb2; --ch-name-other: #b6bac5; --ch-name-attribute: #fabd2f; --ch-name: #c9d1d9; /* Chroma: Number family */ --ch-number: #649bc4; /* Chroma: String family */ --ch-string: #b8bb26; --ch-string-affix: #ffaa10; --ch-string-char: #ffaa10; --ch-string-delimiter: #649bc4; --ch-string-escape: #ff8540; --ch-string-interpol: #ffaa10; --ch-string-regex: #9075cd; --ch-string-symbol: #ff8540; --ch-string-other: #ffaa10; /* Chroma: Operator family */ --ch-operator: #ff7540; --ch-operator-word: #5f8700; /* Chroma: Variable family */ --ch-variable: #649bee; /* Chroma: Generic family */ --ch-generic-deleted-fg: #ffffff; --ch-generic-deleted-bg: #5f3737; --ch-generic-emph: #ddee30; --ch-generic-heading: #ffaa10; --ch-generic-inserted-fg: #ffffff; --ch-generic-inserted-bg: #3a523a; --ch-generic-output: #777e94; --ch-generic-prompt: #ebdbb2; --ch-generic-error: #ff4433; --ch-generic-traceback: #ff7540; --ch-generic-strong: #ebdbb2; --ch-generic-subheading: #b8bb26; /* Chroma: Punctuation */ --ch-punctuation: #d2d4db; /* Chroma: Misc */ --ch-whitespace: #7f8699; color-scheme: dark; } } /* ────────────────────────────────────────────────────────────────────────── */ /* Section 3 — Dark mode bridge-controlled */ /* ────────────────────────────────────────────────────────────────────────── */ /* IDENTICAL content to Section 2. Activated by bridge.js setting * data-nv-scheme="dark" on :root. Specificity (0,2,0) wins over * the light :root (0,1,0). */ :root[data-nv-scheme="dark"] { --is-dark-theme: true; /* ────────────────────────────────────────────────────────────────────── */ /* Primary (white accent) */ /* ────────────────────────────────────────────────────────────────────── */ --color-primary: oklch(1 0 0); --color-primary-contrast: oklch(0 0 0); --color-primary-dark-1: oklch(0.92 0 0); --color-primary-dark-2: oklch(0.85 0 0); --color-primary-dark-3: oklch(0.78 0 0); --color-primary-dark-4: oklch(0.72 0 0); --color-primary-dark-5: oklch(0.65 0 0); --color-primary-dark-6: oklch(0.58 0 0); --color-primary-dark-7: oklch(0.5 0 0); --color-primary-light-1: oklch(1 0 0); --color-primary-light-2: oklch(1 0 0); --color-primary-light-3: oklch(1 0 0); --color-primary-light-4: oklch(1 0 0); --color-primary-light-5: oklch(0.985 0 0); --color-primary-light-6: oklch(0.965 0 0); --color-primary-light-7: oklch(0.94 0 0); --color-primary-alpha-10: oklch(1 0 0 / 0.1); --color-primary-alpha-20: oklch(1 0 0 / 0.2); --color-primary-alpha-30: oklch(1 0 0 / 0.3); --color-primary-alpha-40: oklch(1 0 0 / 0.4); --color-primary-alpha-50: oklch(1 0 0 / 0.5); --color-primary-alpha-60: oklch(1 0 0 / 0.6); --color-primary-alpha-70: oklch(1 0 0 / 0.7); --color-primary-alpha-80: oklch(1 0 0 / 0.8); --color-primary-alpha-90: oklch(1 0 0 / 0.9); --color-primary-hover: oklch(0.88 0 0); --color-primary-active: oklch(0.78 0 0); /* ────────────────────────────────────────────────────────────────────── */ /* Secondary */ /* ────────────────────────────────────────────────────────────────────── */ --color-secondary: var(--steel-700); --color-secondary-dark-1: var(--steel-550); --color-secondary-dark-2: var(--steel-500); --color-secondary-dark-3: var(--steel-450); --color-secondary-dark-4: var(--steel-400); --color-secondary-dark-5: var(--steel-350); --color-secondary-dark-6: var(--steel-300); --color-secondary-dark-7: var(--steel-250); --color-secondary-dark-8: var(--steel-200); --color-secondary-dark-9: var(--steel-150); --color-secondary-dark-10: var(--steel-100); --color-secondary-dark-11: var(--steel-100); --color-secondary-dark-12: var(--steel-100); --color-secondary-dark-13: var(--steel-100); --color-secondary-light-1: var(--steel-650); --color-secondary-light-2: var(--steel-700); --color-secondary-light-3: var(--steel-750); --color-secondary-light-4: var(--steel-800); --color-secondary-alpha-10: oklch(0.095 0 0 / 0.1); --color-secondary-alpha-20: oklch(0.095 0 0 / 0.2); --color-secondary-alpha-30: oklch(0.095 0 0 / 0.3); --color-secondary-alpha-40: oklch(0.095 0 0 / 0.4); --color-secondary-alpha-50: oklch(0.095 0 0 / 0.5); --color-secondary-alpha-60: oklch(0.095 0 0 / 0.6); --color-secondary-alpha-70: oklch(0.095 0 0 / 0.7); --color-secondary-alpha-80: oklch(0.095 0 0 / 0.8); --color-secondary-alpha-90: oklch(0.095 0 0 / 0.9); --color-secondary-hover: var(--color-secondary-light-1); --color-secondary-active: var(--color-secondary-light-2); /* ────────────────────────────────────────────────────────────────────── */ /* Named colors */ /* ────────────────────────────────────────────────────────────────────── */ --color-red: oklch(0.5 0.18 27); --color-red-light: oklch(0.58 0.18 27); --color-red-dark-1: oklch(0.44 0.18 27); --color-red-dark-2: oklch(0.4 0.18 27); --color-orange: oklch(0.55 0.16 50); --color-orange-light: oklch(0.63 0.16 50); --color-orange-dark-1: oklch(0.49 0.16 50); --color-orange-dark-2: oklch(0.45 0.16 50); --color-yellow: oklch(0.6 0.15 85); --color-yellow-light: oklch(0.68 0.15 85); --color-yellow-dark-1: oklch(0.54 0.15 85); --color-yellow-dark-2: oklch(0.5 0.15 85); --color-olive: oklch(0.55 0.15 130); --color-olive-light: oklch(0.63 0.15 130); --color-olive-dark-1: oklch(0.49 0.15 130); --color-olive-dark-2: oklch(0.45 0.15 130); --color-green: oklch(0.5 0.15 145); --color-green-light: oklch(0.58 0.15 145); --color-green-dark-1: oklch(0.44 0.15 145); --color-green-dark-2: oklch(0.4 0.15 145); --color-teal: oklch(0.55 0.12 185); --color-teal-light: oklch(0.63 0.12 185); --color-teal-dark-1: oklch(0.49 0.12 185); --color-teal-dark-2: oklch(0.45 0.12 185); --color-blue: oklch(0.52 0.15 250); --color-blue-light: oklch(0.6 0.15 250); --color-blue-dark-1: oklch(0.46 0.15 250); --color-blue-dark-2: oklch(0.42 0.15 250); --color-violet: oklch(0.48 0.18 290); --color-violet-light: oklch(0.56 0.18 290); --color-violet-dark-1: oklch(0.42 0.18 290); --color-violet-dark-2: oklch(0.38 0.18 290); --color-purple: oklch(0.5 0.18 305); --color-purple-light: oklch(0.58 0.18 305); --color-purple-dark-1: oklch(0.44 0.18 305); --color-purple-dark-2: oklch(0.4 0.18 305); --color-pink: oklch(0.52 0.18 350); --color-pink-light: oklch(0.6 0.18 350); --color-pink-dark-1: oklch(0.46 0.18 350); --color-pink-dark-2: oklch(0.42 0.18 350); --color-brown: oklch(0.5 0.08 60); --color-brown-light: oklch(0.58 0.08 60); --color-brown-dark-1: oklch(0.44 0.08 60); --color-brown-dark-2: oklch(0.4 0.08 60); --color-black: oklch(0.1 0 0); --color-black-light: oklch(0.18 0 0); --color-black-dark-1: oklch(0.04 0 0); --color-black-dark-2: oklch(0 0 0); /* ────────────────────────────────────────────────────────────────────── */ /* Special colors */ /* ────────────────────────────────────────────────────────────────────── */ --color-pure-black: oklch(0 0 0); /* ────────────────────────────────────────────────────────────────────── */ /* Diff colors */ /* ────────────────────────────────────────────────────────────────────── */ --color-diff-removed-word-bg: oklch(0.35 0.1 27); --color-diff-added-word-bg: oklch(0.35 0.1 145); --color-diff-removed-row-bg: oklch(0.18 0.04 27); --color-diff-moved-row-bg: oklch(0.2 0.06 85); --color-diff-added-row-bg: oklch(0.18 0.04 145); --color-diff-removed-row-border: oklch(0.35 0.1 27); --color-diff-moved-row-border: oklch(0.4 0.12 85); --color-diff-added-row-border: oklch(0.35 0.1 145); --color-diff-inactive: var(--steel-650); /* ────────────────────────────────────────────────────────────────────── */ /* Status / alert colors */ /* ────────────────────────────────────────────────────────────────────── */ --color-error-border: oklch(0.4 0.12 27); --color-error-bg: oklch(0.2 0.06 27); --color-error-bg-active: oklch(0.3 0.08 27); --color-error-bg-hover: oklch(0.25 0.07 27); --color-error-text: oklch(0.9 0.05 27); --color-success-border: oklch(0.4 0.1 145); --color-success-bg: oklch(0.2 0.05 145); --color-success-text: oklch(0.85 0.08 145); --color-warning-border: oklch(0.5 0.12 85); --color-warning-bg: oklch(0.25 0.05 85); --color-warning-text: oklch(0.9 0.1 85); --color-info-border: oklch(0.4 0.1 250); --color-info-bg: oklch(0.2 0.05 250); --color-info-text: oklch(0.85 0.05 250); /* ────────────────────────────────────────────────────────────────────── */ /* Badge colors */ /* ────────────────────────────────────────────────────────────────────── */ --color-red-badge: oklch(0.55 0.18 27); --color-red-badge-bg: oklch(0.55 0.18 27 / 0.13); --color-red-badge-hover-bg: oklch(0.55 0.18 27 / 0.27); --color-green-badge: oklch(0.6 0.14 145); --color-green-badge-bg: oklch(0.6 0.14 145 / 0.13); --color-green-badge-hover-bg: oklch(0.6 0.14 145 / 0.27); --color-yellow-badge: oklch(0.65 0.15 85); --color-yellow-badge-bg: oklch(0.65 0.15 85 / 0.13); --color-yellow-badge-hover-bg: oklch(0.65 0.15 85 / 0.27); --color-orange-badge: oklch(0.58 0.16 50); --color-orange-badge-bg: oklch(0.58 0.16 50 / 0.13); --color-orange-badge-hover-bg: oklch(0.58 0.16 50 / 0.27); /* ────────────────────────────────────────────────────────────────────── */ /* Thin element / danger vars */ /* ────────────────────────────────────────────────────────────────────── */ --thin-lightness: 0.68; --thin-lightness-highlight: 0.75; --color-thin-red-highlight: oklch(var(--thin-lightness-highlight) var(--regular-chroma) 27); --bg-lightness: 0.26; --bg-chroma: 0.05; --color-danger-bg: oklch(var(--bg-lightness) var(--bg-chroma) 27); /* ────────────────────────────────────────────────────────────────────── */ /* UI surface colors */ /* ────────────────────────────────────────────────────────────────────── */ --color-body: var(--steel-800); /* bg-subtle */ --color-box-header: var(--steel-700); /* bg-element */ --color-box-body: var(--steel-750); /* between */ --color-box-body-highlight: var(--steel-650); /* bg-hover */ --color-text-dark: oklch(1 0 0); --color-text: var(--steel-100); /* ≈ text */ --color-text-light: var(--steel-150); --color-text-light-1: var(--steel-150); --color-text-light-2: var(--steel-200); --color-text-light-3: var(--steel-200); --color-footer: var(--steel-900); --color-timeline: var(--steel-550); --color-input-text: var(--steel-100); --color-input-background: var(--steel-650); --color-input-toggle-background: var(--steel-650); --color-input-border: var(--steel-550); --color-input-border-hover: var(--steel-450); --color-header-wrapper: var(--steel-850); --color-header-wrapper-transparent: oklch(0.02 0 0 / 0); --color-light: oklch(0 0 0 / 0.16); --color-light-mimic-enabled: rgba(0, 0, 0, calc(40 / 255 * 222 / 255 / var(--opacity-disabled))); --color-light-border: oklch(1 0 0 / 0.24); --color-hover: var(--steel-650); --color-active: var(--steel-600); --color-menu: var(--steel-700); --color-card: var(--steel-700); --fancy-card-bg: var(--steel-650); --fancy-card-border: var(--steel-600); --color-markup-code-block: var(--steel-750); --color-markup-code-inline: var(--steel-700); --color-button: var(--steel-650); --color-code-bg: var(--steel-750); --color-secondary-bg: var(--steel-700); --color-expand-button: oklch(0.25 0 0); --color-editor-line-highlight: var(--steel-700); --color-shadow: oklch(1 0 0 / 0.12); --color-project-board-bg: var(--color-secondary-light-3); --color-reaction-bg: oklch(1 0 0 / 0.07); --color-reaction-hover-bg: var(--color-primary-alpha-40); --color-nav-bg: var(--steel-900); --color-nav-hover-bg: var(--steel-650); --color-label-text: oklch(1 0 0); --color-label-bg: var(--steel-650); --color-label-hover-bg: var(--steel-600); --color-label-active-bg: var(--steel-500); --color-label-bg-alt: var(--steel-550); /* ────────────────────────────────────────────────────────────────────── */ /* Accent / link colors */ /* ────────────────────────────────────────────────────────────────────── */ --color-accent: oklch(0.65 0.15 250); --color-small-accent: oklch(0.62 0.12 250); --color-highlight-fg: oklch(0.85 0.1 250); --color-highlight-bg: oklch(0.35 0.12 250); --color-selection-bg: oklch(0.45 0.15 250); --color-selection-fg: oklch(1 0 0); --checkerboard-color-1: oklch(0.3 0 0); --checkerboard-color-2: oklch(0.2 0 0); /* ────────────────────────────────────────────────────────────────────── */ /* Syntax highlighting variables (dark overrides) */ /* ────────────────────────────────────────────────────────────────────── */ /* Chroma: Comment family */ --ch-comment: #777e94; --ch-comment-multiline: #777e94; --ch-comment-preproc: #8ec07c; --ch-comment-preproc-file: #649bc4; --ch-comment-special: #9075cd; /* Chroma: Keyword family */ --ch-keyword: #ff7540; --ch-keyword-type: #ff7b72; --ch-keyword-constant: #649bc4; --ch-keyword-namespace: #ffaa10; --ch-keyword-pseudo: #5f8700; /* Chroma: Name family */ --ch-name-builtin-pseudo: #fabd2f; --ch-name-builtin: #fabd2f; --ch-name-class: #ffaa10; --ch-name-decorator: #8ec07c; --ch-name-exception: #ff7540; --ch-name-function: #fabd2f; --ch-name-entity: #fabd2f; --ch-name-label: #ff7540; --ch-name-namespace: #c9d1d9; --ch-name-constant: #649bc4; --ch-name-tag: #ff7540; --ch-name-variable: #ebdbb2; --ch-name-other: #b6bac5; --ch-name-attribute: #fabd2f; --ch-name: #c9d1d9; /* Chroma: Number family */ --ch-number: #649bc4; /* Chroma: String family */ --ch-string: #b8bb26; --ch-string-affix: #ffaa10; --ch-string-char: #ffaa10; --ch-string-delimiter: #649bc4; --ch-string-escape: #ff8540; --ch-string-interpol: #ffaa10; --ch-string-regex: #9075cd; --ch-string-symbol: #ff8540; --ch-string-other: #ffaa10; /* Chroma: Operator family */ --ch-operator: #ff7540; --ch-operator-word: #5f8700; /* Chroma: Variable family */ --ch-variable: #649bee; /* Chroma: Generic family */ --ch-generic-deleted-fg: #ffffff; --ch-generic-deleted-bg: #5f3737; --ch-generic-emph: #ddee30; --ch-generic-heading: #ffaa10; --ch-generic-inserted-fg: #ffffff; --ch-generic-inserted-bg: #3a523a; --ch-generic-output: #777e94; --ch-generic-prompt: #ebdbb2; --ch-generic-error: #ff4433; --ch-generic-traceback: #ff7540; --ch-generic-strong: #ebdbb2; --ch-generic-subheading: #b8bb26; /* Chroma: Punctuation */ --ch-punctuation: #d2d4db; /* Chroma: Misc */ --ch-whitespace: #7f8699; color-scheme: dark; } /* ────────────────────────────────────────────────────────────────────────── */ /* Section 4 — Chromatic light mode */ /* ────────────────────────────────────────────────────────────────────────── */ /* Activated by bridge.js when the navigator has chromatic mode * enabled. Replaces the achromatic zinc scale with hue-tinted * values at adjusted lightness levels. The CFs follow the * Nuttyverse ramp pattern. */ :root[data-nv-mode="chromatic"] { /* Zinc scale — chromatic light lightness with per-step CFs. */ --zinc-50: oklch(0.99 calc(var(--nv-chroma) * 0.08) var(--nv-hue)); /* bg CF=0.08 */ --zinc-100: oklch(0.96 calc(var(--nv-chroma) * 0.1) var(--nv-hue)); /* bg-subtle CF=0.10 */ --zinc-150: oklch(0.945 calc(var(--nv-chroma) * 0.11) var(--nv-hue)); /* between */ --zinc-200: oklch(0.93 calc(var(--nv-chroma) * 0.12) var(--nv-hue)); /* bg-element CF=0.12 */ --zinc-250: oklch(0.905 calc(var(--nv-chroma) * 0.13) var(--nv-hue)); /* between */ --zinc-300: oklch(0.88 calc(var(--nv-chroma) * 0.14) var(--nv-hue)); /* bg-hover CF=0.14 */ --zinc-350: oklch(0.83 calc(var(--nv-chroma) * 0.16) var(--nv-hue)); /* bg-active CF=0.16 */ --zinc-400: oklch(0.85 calc(var(--nv-chroma) * 0.1) var(--nv-hue)); /* border-sub CF=0.10 */ --zinc-450: oklch(0.78 calc(var(--nv-chroma) * 0.18) var(--nv-hue)); /* between */ --zinc-500: oklch(0.72 calc(var(--nv-chroma) * 0.25) var(--nv-hue)); /* border CF=0.25 */ --zinc-550: oklch(0.6 calc(var(--nv-chroma) * 0.3) var(--nv-hue)); /* between */ --zinc-600: oklch(0.55 calc(var(--nv-chroma) * 0.25) var(--nv-hue)); /* tertiary CF=0.25 */ --zinc-650: oklch(0.5 calc(var(--nv-chroma) * 0.4) var(--nv-hue)); /* border-str CF=0.40 */ --zinc-700: oklch(0.35 calc(var(--nv-chroma) * 0.15) var(--nv-hue)); /* secondary CF=0.15 */ --zinc-750: oklch(0.25 calc(var(--nv-chroma) * 0.12) var(--nv-hue)); /* between */ --zinc-800: oklch(0.2 calc(var(--nv-chroma) * 0.1) var(--nv-hue)); /* between */ --zinc-850: oklch(0.175 calc(var(--nv-chroma) * 0.1) var(--nv-hue)); /* between */ --zinc-900: oklch(0.15 calc(var(--nv-chroma) * 0.1) var(--nv-hue)); /* text CF=0.10 */ /* Body background with chromatic tint. */ --color-body: oklch(0.99 calc(var(--nv-chroma) * 0.08) var(--nv-hue)); /* Primary: cusp-derived solid surface. */ --color-primary: oklch(var(--nv-solid-l) var(--nv-solid-c) var(--nv-hue)); --color-primary-contrast: oklch(var(--nv-text-l) 0 0); --color-primary-hover: oklch(var(--nv-solid-l-hover) var(--nv-solid-c-hover) var(--nv-hue)); --color-primary-alpha-10: oklch(var(--nv-solid-l) var(--nv-solid-c) var(--nv-hue) / 0.1); --color-primary-alpha-20: oklch(var(--nv-solid-l) var(--nv-solid-c) var(--nv-hue) / 0.2); --color-primary-alpha-30: oklch(var(--nv-solid-l) var(--nv-solid-c) var(--nv-hue) / 0.3); --color-primary-alpha-40: oklch(var(--nv-solid-l) var(--nv-solid-c) var(--nv-hue) / 0.4); --color-primary-alpha-50: oklch(var(--nv-solid-l) var(--nv-solid-c) var(--nv-hue) / 0.5); --color-primary-alpha-60: oklch(var(--nv-solid-l) var(--nv-solid-c) var(--nv-hue) / 0.6); --color-primary-alpha-70: oklch(var(--nv-solid-l) var(--nv-solid-c) var(--nv-hue) / 0.7); --color-primary-alpha-80: oklch(var(--nv-solid-l) var(--nv-solid-c) var(--nv-hue) / 0.8); --color-primary-alpha-90: oklch(var(--nv-solid-l) var(--nv-solid-c) var(--nv-hue) / 0.9); /* Accent: shifts to the navigator's hue. */ --color-accent: oklch(0.45 calc(var(--nv-chroma) * 0.8) var(--nv-hue)); --color-small-accent: oklch(0.5 calc(var(--nv-chroma) * 0.6) var(--nv-hue)); --color-highlight-fg: oklch(0.35 calc(var(--nv-chroma) * 0.7) var(--nv-hue)); --color-highlight-bg: oklch(0.92 calc(var(--nv-chroma) * 0.25) var(--nv-hue)); /* Selection uses the primary solid surface. */ --color-selection-bg: oklch(var(--nv-solid-l) var(--nv-solid-c) var(--nv-hue)); --color-selection-fg: oklch(var(--nv-text-l) 0 0); } /* ────────────────────────────────────────────────────────────────────────── */ /* Section 5 — Chromatic dark mode */ /* ────────────────────────────────────────────────────────────────────────── */ /* Activated by bridge.js when both dark scheme and chromatic mode * are enabled. Replaces the steel scale with hue-tinted values at * DIFFERENT lightness levels — chromatic mode lifts the entire dark * ramp because OKLCH chroma is imperceptible at very low lightness. * * Specificity (0,3,0) wins over light chromatic (0,2,0). * * CRITICAL: The chromatic steel scale uses DIFFERENT lightness * values from the mono scale. This is not a bug — see * doc/COLOR_SYSTEM.md "Mono mode lightness" for the rationale. * * Effective chroma at each step = var(--nv-chroma) * CF. The CF * ramp follows the Nuttyverse pattern: low for backgrounds * (0.08–0.18), rising through borders (0.25–0.40) where the * Bezold spreading effect demands compensation, then falling for * text (0.10–0.15). */ :root[data-nv-scheme="dark"][data-nv-mode="chromatic"] { /* Steel scale — chromatic dark lightness with per-step CFs. * * Compare mono dark: L range 0.000-0.920, C=0 * Chromatic dark: L range 0.050-0.900, C=chroma*CF * * The lifted lightness ensures that even the darkest surfaces * display perceptible hue tinting. The CF ramp matches the * Nuttyverse token table from doc/COLOR_SYSTEM.md. */ --steel-900: oklch(0.05 calc(var(--nv-chroma) * 0.08) var(--nv-hue)); /* below bg CF=0.08 */ --steel-850: oklch(0.08 calc(var(--nv-chroma) * 0.09) var(--nv-hue)); /* between */ --steel-800: oklch(0.11 calc(var(--nv-chroma) * 0.1) var(--nv-hue)); /* bg CF=0.10 */ --steel-750: oklch(0.125 calc(var(--nv-chroma) * 0.11) var(--nv-hue)); /* between */ --steel-700: oklch(0.14 calc(var(--nv-chroma) * 0.12) var(--nv-hue)); /* bg-subtle CF=0.12 */ --steel-650: oklch(0.19 calc(var(--nv-chroma) * 0.14) var(--nv-hue)); /* bg-element CF=0.14 */ --steel-600: oklch(0.23 calc(var(--nv-chroma) * 0.16) var(--nv-hue)); /* bg-hover CF=0.16 */ --steel-550: oklch(0.27 calc(var(--nv-chroma) * 0.18) var(--nv-hue)); /* bg-active CF=0.18 */ --steel-500: oklch(0.32 calc(var(--nv-chroma) * 0.25) var(--nv-hue)); /* ≈ border CF=0.25 */ --steel-450: oklch(0.4 calc(var(--nv-chroma) * 0.3) var(--nv-hue)); /* border CF=0.30 */ --steel-400: oklch(0.5 calc(var(--nv-chroma) * 0.4) var(--nv-hue)); /* tertiary CF=0.40 */ --steel-350: oklch(0.58 calc(var(--nv-chroma) * 0.25) var(--nv-hue)); /* between */ --steel-300: oklch(0.65 calc(var(--nv-chroma) * 0.2) var(--nv-hue)); /* between */ --steel-250: oklch(0.7 calc(var(--nv-chroma) * 0.15) var(--nv-hue)); /* secondary CF=0.15 */ --steel-200: oklch(0.78 calc(var(--nv-chroma) * 0.12) var(--nv-hue)); /* between */ --steel-150: oklch(0.85 calc(var(--nv-chroma) * 0.1) var(--nv-hue)); /* between */ --steel-100: oklch(0.9 calc(var(--nv-chroma) * 0.1) var(--nv-hue)); /* text CF=0.10 */ /* Primary: cusp-derived solid surface. */ --color-primary: oklch(var(--nv-solid-l) var(--nv-solid-c) var(--nv-hue)); --color-primary-contrast: oklch(var(--nv-text-l) 0 0); --color-primary-hover: oklch(var(--nv-solid-l-hover) var(--nv-solid-c-hover) var(--nv-hue)); /* Primary alpha variants — solid surface color at varying opacity. */ --color-primary-alpha-10: oklch(var(--nv-solid-l) var(--nv-solid-c) var(--nv-hue) / 0.1); --color-primary-alpha-20: oklch(var(--nv-solid-l) var(--nv-solid-c) var(--nv-hue) / 0.2); --color-primary-alpha-30: oklch(var(--nv-solid-l) var(--nv-solid-c) var(--nv-hue) / 0.3); --color-primary-alpha-40: oklch(var(--nv-solid-l) var(--nv-solid-c) var(--nv-hue) / 0.4); --color-primary-alpha-50: oklch(var(--nv-solid-l) var(--nv-solid-c) var(--nv-hue) / 0.5); --color-primary-alpha-60: oklch(var(--nv-solid-l) var(--nv-solid-c) var(--nv-hue) / 0.6); --color-primary-alpha-70: oklch(var(--nv-solid-l) var(--nv-solid-c) var(--nv-hue) / 0.7); --color-primary-alpha-80: oklch(var(--nv-solid-l) var(--nv-solid-c) var(--nv-hue) / 0.8); --color-primary-alpha-90: oklch(var(--nv-solid-l) var(--nv-solid-c) var(--nv-hue) / 0.9); /* Accent: shifts from fixed blue (mono) to the navigator's hue. */ --color-accent: oklch(0.65 calc(var(--nv-chroma) * 0.8) var(--nv-hue)); --color-small-accent: oklch(0.62 calc(var(--nv-chroma) * 0.6) var(--nv-hue)); --color-highlight-fg: oklch(0.85 calc(var(--nv-chroma) * 0.7) var(--nv-hue)); --color-highlight-bg: oklch(0.35 calc(var(--nv-chroma) * 0.3) var(--nv-hue)); /* Selection uses the solid surface color. */ --color-selection-bg: oklch(var(--nv-solid-l) var(--nv-solid-c) var(--nv-hue)); --color-selection-fg: oklch(var(--nv-text-l) 0 0); /* Cascade fix: the light chromatic block's :root[data-nv-mode] * (0,2,0) would otherwise contaminate --color-body in dark * mode because it has higher specificity than dark's plain * :root. We re-declare here at (0,3,0) to win the cascade. */ --color-body: var(--steel-800); } /* ────────────────────────────────────────────────────────────────────────── */ /* Section 6 — Syntax highlighting (Chroma) */ /* ────────────────────────────────────────────────────────────────────────── */ /* From Forgejo v11.0.10 web_src/css/chroma/. Each class references * a --ch-* variable defined in :root (light defaults) and * overridden in the dark blocks. Rules are defined ONCE. */ /* Comment family */ .chroma .c { color: var(--ch-comment); } /* Comment */ .chroma .c1 { color: var(--ch-comment); } /* CommentSingle */ .chroma .ch { color: var(--ch-comment); } /* CommentHashbang */ .chroma .cm { color: var(--ch-comment-multiline); } /* CommentMultiline */ .chroma .cp { color: var(--ch-comment-preproc); } /* CommentPreproc */ .chroma .cpf { color: var(--ch-comment-preproc-file); } /* CommentPreprocFile */ .chroma .cs { color: var(--ch-comment-special); } /* CommentSpecial */ /* Keyword family */ .chroma .k { color: var(--ch-keyword); } /* Keyword */ .chroma .kc { color: var(--ch-keyword-constant); } /* KeywordConstant */ .chroma .kd { color: var(--ch-keyword); } /* KeywordDeclaration */ .chroma .kn { color: var(--ch-keyword-namespace); } /* KeywordNamespace */ .chroma .kp { color: var(--ch-keyword-pseudo); } /* KeywordPseudo */ .chroma .kr { color: var(--ch-keyword); } /* KeywordReserved */ .chroma .kt { color: var(--ch-keyword-type); } /* KeywordType */ /* Name family */ .chroma .bp { color: var(--ch-name-builtin-pseudo); } /* NameBuiltinPseudo */ .chroma .n { color: var(--ch-name); } /* Name */ .chroma .na { color: var(--ch-name-attribute); } /* NameAttribute */ .chroma .nb { color: var(--ch-name-builtin); } /* NameBuiltin */ .chroma .nc { color: var(--ch-name-class); } /* NameClass */ .chroma .nd { color: var(--ch-name-decorator); } /* NameDecorator */ .chroma .ne { color: var(--ch-name-exception); } /* NameException */ .chroma .nf { color: var(--ch-name-function); } /* NameFunction */ .chroma .ni { color: var(--ch-name-entity); } /* NameEntity */ .chroma .nl { color: var(--ch-name-label); } /* NameLabel */ .chroma .nn { color: var(--ch-name-namespace); } /* NameNamespace */ .chroma .no { color: var(--ch-name-constant); } /* NameConstant */ .chroma .nt { color: var(--ch-name-tag); } /* NameTag */ .chroma .nv { color: var(--ch-name-variable); } /* NameVariable */ .chroma .nx { color: var(--ch-name-other); } /* NameOther */ /* Number family */ .chroma .m { color: var(--ch-number); } /* Number */ .chroma .mb { color: var(--ch-number); } /* NumberBin */ .chroma .mf { color: var(--ch-number); } /* NumberFloat */ .chroma .mh { color: var(--ch-number); } /* NumberHex */ .chroma .mi { color: var(--ch-number); } /* NumberInteger */ .chroma .mo { color: var(--ch-number); } /* NumberOct */ .chroma .il { color: var(--ch-number); } /* NumberIntegerLong */ /* String family */ .chroma .s { color: var(--ch-string); } /* String */ .chroma .s1 { color: var(--ch-string); } /* StringSingle */ .chroma .s2 { color: var(--ch-string); } /* StringDouble */ .chroma .sa { color: var(--ch-string-affix); } /* StringAffix */ .chroma .sb { color: var(--ch-string); } /* StringBacktick */ .chroma .sc { color: var(--ch-string-char); } /* StringChar */ .chroma .sd { color: var(--ch-string); } /* StringDoc */ .chroma .se { color: var(--ch-string-escape); } /* StringEscape */ .chroma .sh { color: var(--ch-string); } /* StringHeredoc */ .chroma .si { color: var(--ch-string-interpol); } /* StringInterpol */ .chroma .sr { color: var(--ch-string-regex); } /* StringRegex */ .chroma .ss { color: var(--ch-string-symbol); } /* StringSymbol */ .chroma .sx { color: var(--ch-string-other); } /* StringOther */ .chroma .dl { color: var(--ch-string-delimiter); } /* StringDelimiter */ /* Operator family */ .chroma .o { color: var(--ch-operator); } /* Operator */ .chroma .ow { color: var(--ch-operator-word); } /* OperatorWord */ /* Punctuation */ .chroma .p { color: var(--ch-punctuation); } /* Punctuation */ /* Variable family */ .chroma .vc { color: var(--ch-variable); } /* VariableClass */ .chroma .vg { color: var(--ch-variable); } /* VariableGlobal */ .chroma .vi { color: var(--ch-variable); } /* VariableInstance */ /* Generic family */ /* GenericDeleted */ .chroma .gd { color: var(--ch-generic-deleted-fg); background-color: var(--ch-generic-deleted-bg); } .chroma .ge { color: var(--ch-generic-emph); } /* GenericEmph */ .chroma .gh { color: var(--ch-generic-heading); } /* GenericHeading */ /* GenericInserted */ .chroma .gi { color: var(--ch-generic-inserted-fg); background-color: var(--ch-generic-inserted-bg); } .chroma .go { color: var(--ch-generic-output); } /* GenericOutput */ .chroma .gp { color: var(--ch-generic-prompt); } /* GenericPrompt */ .chroma .gr { color: var(--ch-generic-error); } /* GenericError */ .chroma .gs { color: var(--ch-generic-strong); } /* GenericStrong */ .chroma .gt { color: var(--ch-generic-traceback); } /* GenericTraceback */ .chroma .gu { color: var(--ch-generic-subheading); } /* GenericSubheading */ /* Misc */ .chroma .w { color: var(--ch-whitespace); } /* TextWhitespace */ /* ────────────────────────────────────────────────────────────────────────── */ /* Section 7 — CodeMirror editor highlighting */ /* ────────────────────────────────────────────────────────────────────────── */ /* From Forgejo v11.0.10 web_src/css/codemirror/. Light mode uses * CM built-in defaults; the variables provide dark overrides. * Rules defined ONCE using --cm-* variables. */ .CodeMirror.cm-s-default .cm-property, .CodeMirror.cm-s-paper .cm-property { color: var(--cm-property); } .CodeMirror.cm-s-default .cm-header, .CodeMirror.cm-s-paper .cm-header { color: var(--cm-header); } .CodeMirror.cm-s-default .cm-quote, .CodeMirror.cm-s-paper .cm-quote { color: var(--cm-quote); } .CodeMirror.cm-s-default .cm-keyword, .CodeMirror.cm-s-paper .cm-keyword { color: var(--cm-keyword); } .CodeMirror.cm-s-default .cm-atom, .CodeMirror.cm-s-paper .cm-atom { color: var(--cm-atom); } .CodeMirror.cm-s-default .cm-number, .CodeMirror.cm-s-paper .cm-number { color: var(--cm-number); } .CodeMirror.cm-s-default .cm-def, .CodeMirror.cm-s-paper .cm-def { color: var(--cm-def); } .CodeMirror.cm-s-default .cm-variable-2, .CodeMirror.cm-s-paper .cm-variable-2 { color: var(--cm-variable-2); } .CodeMirror.cm-s-default .cm-variable-3, .CodeMirror.cm-s-paper .cm-variable-3 { color: var(--cm-variable-3); } .CodeMirror.cm-s-default .cm-comment, .CodeMirror.cm-s-paper .cm-comment { color: var(--cm-comment); } .CodeMirror.cm-s-default .cm-string, .CodeMirror.cm-s-paper .cm-string { color: var(--cm-string); } .CodeMirror.cm-s-default .cm-string-2, .CodeMirror.cm-s-paper .cm-string-2 { color: var(--cm-string-2); } .CodeMirror.cm-s-default .cm-meta, .CodeMirror.cm-s-paper .cm-meta, .CodeMirror.cm-s-default .cm-qualifier, .CodeMirror.cm-s-paper .cm-qualifier { color: var(--cm-meta); } .CodeMirror.cm-s-default .cm-builtin, .CodeMirror.cm-s-paper .cm-builtin { color: var(--cm-builtin); } .CodeMirror.cm-s-default .cm-bracket, .CodeMirror.cm-s-paper .cm-bracket { color: var(--cm-bracket); } .CodeMirror.cm-s-default .cm-tag, .CodeMirror.cm-s-paper .cm-tag { color: var(--cm-tag); } .CodeMirror.cm-s-default .cm-attribute, .CodeMirror.cm-s-paper .cm-attribute { color: var(--cm-attribute); } .CodeMirror.cm-s-default .cm-hr, .CodeMirror.cm-s-paper .cm-hr { color: var(--cm-hr); } .CodeMirror.cm-s-default .cm-url, .CodeMirror.cm-s-paper .cm-url { color: var(--cm-url); } .CodeMirror.cm-s-default .cm-link, .CodeMirror.cm-s-paper .cm-link { color: var(--cm-link); } .CodeMirror.cm-s-default .cm-error, .CodeMirror.cm-s-paper .cm-error { color: var(--cm-error); } /* ────────────────────────────────────────────────────────────────────────── */ /* Section 8 — Markup mode toggles */ /* ────────────────────────────────────────────────────────────────────────── */ /* From Forgejo v11.0.10 web_src/css/markup/. Light default hides * dark-mode-only images. Dark overrides use two selectors: the * no-JS media query fallback and the bridge-controlled attribute. */ /* Light default: hide dark-mode-only images. */ .markup [src$="#gh-dark-mode-only"], .markup [src$="#dark-mode-only"], .markup [href$="#gh-dark-mode-only"], .markup [href$="#dark-mode-only"] { display: none; } /* Dark mode (no-JS fallback): hide light-mode-only, show dark-mode-only. */ @media (prefers-color-scheme: dark) { :root:not([data-nv-scheme]) .markup [src$="#gh-light-mode-only"], :root:not([data-nv-scheme]) .markup [src$="#light-mode-only"], :root:not([data-nv-scheme]) .markup [href$="#gh-light-mode-only"], :root:not([data-nv-scheme]) .markup [href$="#light-mode-only"] { display: none; } :root:not([data-nv-scheme]) .markup [src$="#gh-dark-mode-only"], :root:not([data-nv-scheme]) .markup [src$="#dark-mode-only"], :root:not([data-nv-scheme]) .markup [href$="#gh-dark-mode-only"], :root:not([data-nv-scheme]) .markup [href$="#dark-mode-only"] { display: unset; } } /* Dark mode (bridge-controlled): hide light-mode-only, show dark-mode-only. */ :root[data-nv-scheme="dark"] .markup [src$="#gh-light-mode-only"], :root[data-nv-scheme="dark"] .markup [src$="#light-mode-only"], :root[data-nv-scheme="dark"] .markup [href$="#gh-light-mode-only"], :root[data-nv-scheme="dark"] .markup [href$="#light-mode-only"] { display: none; } :root[data-nv-scheme="dark"] .markup [src$="#gh-dark-mode-only"], :root[data-nv-scheme="dark"] .markup [src$="#dark-mode-only"], :root[data-nv-scheme="dark"] .markup [href$="#gh-dark-mode-only"], :root[data-nv-scheme="dark"] .markup [href$="#dark-mode-only"] { display: unset; } /* ────────────────────────────────────────────────────────────────────────── */ /* Section 9 — Text selection */ /* ────────────────────────────────────────────────────────────────────────── */ ::selection { background-color: var(--color-selection-bg); color: var(--color-selection-fg); }