/* ============================================================================ * Dark Mode Theme — .bgl-dark-mode * ---------------------------------------------------------------------------- * Activated by useTheme() which toggles the `.bgl-dark-mode` class on . * * ARCHITECTURE (semantic, NOT inversion): * - We do NOT swap --bgl-black / --bgl-white. They keep their real meaning * (black = dark, white = light) so colored buttons (.pair-*) that use * `color: var(--bgl-white)` stay correct (light text on a colored fill). * - Instead we override only the SEMANTIC tokens (surfaces, text, borders) * with explicit dark values. Components that consume these tokens * (--bgl-bg, --bgl-box-bg, --bgl-text-color, …) become dark automatically. * * Single source of truth: the dark palette below (--bgl-dm-* raw values), which * the semantic tokens reference. If you ever need explicit opt-in dark classes * for components that use physical colors, build them on these same tokens. * ============================================================================ */ /* .bgl-dark-mode { filter: invert(1); } .bgl-dark-mode img, .bgl-dark-mode video, .bgl-dark-mode svg, .bgl-dark-mode iframe { filter: invert(1); } */ /* `:root.bgl-dark-mode` (the class lives on ) raises specificity to (0,2,0) so these tokens win over any project that redefines colors in its own `:root {}` (e.g. udi sets --bgl-blue: #7ad3f7). The bare .bgl-dark-mode is kept as a fallback in case the class is applied to a non-root element. */ :root.bgl-dark-mode, .bgl-dark-mode { /* ---- Dark palette (raw values) ---------------------------------------- */ --bgl-dm-bg: #121317; /* app background (deepest) */ --bgl-dm-surface: #1d2023; /* cards, panels */ --bgl-dm-surface-2: #23262b; /* slightly raised / hover */ --bgl-dm-input: #0e0f12; /* inputs — sunk BELOW the surface so they read as a recessed field whether they sit on the app background or inside a card */ --bgl-dm-text: #dbdcdc; /* primary text */ --bgl-dm-text-muted: #9a9b9d; /* secondary text */ --bgl-dm-border: rgba(255, 255, 255, 0.12); /* borders / dividers — translucent light, mirroring the light-mode #00000020 (translucent dark). Blends over any dark surface (bg, card, input) instead of being a fixed opaque gray. */ /* ---- Brand (slightly adjusted for dark backgrounds) ------------------- */ --bgl-primary: #4f7cff !important; --bgl-primary-tint: #4f7cff33; --bgl-primary-light: #1a2236; /* ---- Status / accent colors (tuned for dark backgrounds) ------------- * * The light-mode bases (e.g. blue #2e5bff, green #75c98f, red #ed6c6f, * yellow #ffbb00) are either too dark/saturated or too pastel to read well * on a dark surface. Shift them lighter and slightly desaturated so they * pop against the dark UI without glowing. Tints follow the same hue at low * opacity for soft fills/badges. */ --bgl-blue: #5b8cff; --bgl-blue-tint: rgba(91, 140, 255, 0.18); --bgl-green: #5dd49b; --bgl-green-tint: rgba(93, 212, 155, 0.18); --bgl-red: #f47174; --bgl-red-tint: rgba(244, 113, 116, 0.18); --bgl-yellow: #ffc94d; --bgl-yellow-tint: rgba(255, 201, 77, 0.18); /* ---- Surfaces / backgrounds ------------------------------------------ */ --bgl-bg: var(--bgl-dm-bg); --bgl-box-bg: var(--bgl-dm-surface); --bgl-popup-bg: var(--bgl-dm-surface); --bgl-input-bg: var(--bgl-dm-input); --bgl-selected: var(--bgl-dm-surface-2); --bgl-skeleton-bg: var(--bgl-dm-surface-2); --bgl-skeleton-pulse: var(--bgl-dm-surface); --bgl-gray-light: var(--bgl-dm-surface-2); /* --bgl-gray (#b7b7b7 in light) is used directly by color-gray / bg-gray and as a neutral mid tone. On dark, keep it a readable mid-gray so color-gray text stays legible; bg-gray fills get a dedicated darker treatment below. */ --bgl-gray: #8b8f96; /* ---- Text ------------------------------------------------------------- */ --bgl-text-color: var(--bgl-dm-text); --bgl-popup-text: var(--bgl-dm-text); --bgl-input-color: var(--bgl-dm-text); --bgl-dropdown-color: var(--bgl-dm-text); --bgl-label-color: var(--bgl-dm-text-muted); --bgl-placeholder-color: var(--bgl-dm-text-muted); /* ---- Translucent black tints ----------------------------------------- * * --bgl-black-tint / --bgl-gray-tint are semi-transparent BLACK in light * mode (e.g. #28292980). They are used both as muted text (drag handles, * secondary labels, flat pills) and as faint fills/borders. On a dark * surface translucent black is invisible, so flip them to translucent * LIGHT. One remap fixes every `var(--bgl-black-tint)` usage at once. */ --bgl-black-tint: rgba(219, 220, 220, 0.5); /* muted light text */ --bgl-gray-tint: rgba(219, 220, 220, 0.16); --bgl-gray-tint-dark: rgba(219, 220, 220, 0.32); /* ---- Borders / shadows / scrollbar ----------------------------------- */ --bgl-border-color: var(--bgl-dm-border); --bgl-shadow: rgba(0, 0, 0, 0.5); --bgl-scrollbar-thumb: #4a4d52; /* ---- Hover / active filters (lighten instead of darken) -------------- */ --bgl-hover-filter: brightness(125%); --bgl-active-filter: brightness(110%); /* ---- Tabs ------------------------------------------------------------- * * The default tab hover is rgba(255,255,255,.4) — a fine pale wash on a * light bar, but a glaring bright patch on a dark one. Dial it down to a * subtle light wash so hover reads as a gentle highlight. */ --bgl-tab-hover-bg: rgba(255, 255, 255, 0.08); /* ---- Soft color variants (*-light / *-tint) -------------------------- * * In light mode these are pale fills (e.g. #eef6ff) meant to carry dark * text. On a dark UI a pale fill is a glaring bright patch, so we remap * each one to a low-opacity wash of its OWN base color over the dark * surface. The text color for these is fixed to --bgl-black in * base-colors.css, so we also re-point the text below (see the rule after * this block) — we can do that safely because base-colors.css uses no * !important. */ --bgl-blue-light: color-mix(in oklab, var(--bgl-blue) 22%, var(--bgl-dm-surface)); --bgl-red-light: color-mix(in oklab, var(--bgl-red) 22%, var(--bgl-dm-surface)); --bgl-green-light: color-mix(in oklab, var(--bgl-green) 22%, var(--bgl-dm-surface)); --bgl-yellow-light: color-mix(in oklab, var(--bgl-yellow) 22%, var(--bgl-dm-surface)); --bgl-purple-light: color-mix(in oklab, var(--bgl-purple) 22%, var(--bgl-dm-surface)); --bgl-brown-light: color-mix(in oklab, var(--bgl-brown) 22%, var(--bgl-dm-surface)); --bgl-orange-light: color-mix(in oklab, var(--bgl-orange) 22%, var(--bgl-dm-surface)); --bgl-turquoise-light: color-mix(in oklab, var(--bgl-turquoise) 22%, var(--bgl-dm-surface)); --bgl-pink-light: color-mix(in oklab, var(--bgl-pink) 22%, var(--bgl-dm-surface)); --bgl-primary-light: color-mix(in oklab, var(--bgl-primary) 22%, var(--bgl-dm-surface)); /* --bgl-gray-light is already remapped to a dark surface above. */ /* ---- Gray tint scale (light → dark inversion) ------------------------ * * --bgl-gray-10..30 are near-white tints in light mode, used everywhere as * faint fills (hover states, cell grids, separators, recessed panels). On a * dark UI those near-white fills glow. Remap the low end of the scale to * subtle LIGHT washes over the dark surface so "low number = faint" still * holds. Fixes grid-cell-btn, bg-gray-10/20/30 utilities, etc. at once. */ --bgl-gray-10: color-mix(in oklab, white 4%, var(--bgl-dm-surface)); --bgl-gray-20: color-mix(in oklab, white 8%, var(--bgl-dm-surface)); --bgl-gray-30: color-mix(in oklab, white 13%, var(--bgl-dm-surface)); /* Mid/high end of the scale: in light mode these go DARKER as the number rises (gray-80 ≈ a strong gray used for lines/dividers). On dark they must instead get LIGHTER so "higher number = more contrast vs the surface" still holds — otherwise gray-80 lines vanish on the dark background. Fixes calendar hour-lines and any other gray-40..90 separators at once. */ --bgl-gray-40: color-mix(in oklab, white 18%, var(--bgl-dm-surface)); --bgl-gray-50: color-mix(in oklab, white 24%, var(--bgl-dm-surface)); --bgl-gray-60: color-mix(in oklab, white 32%, var(--bgl-dm-surface)); --bgl-gray-70: color-mix(in oklab, white 42%, var(--bgl-dm-surface)); --bgl-gray-80: color-mix(in oklab, white 54%, var(--bgl-dm-surface)); --bgl-gray-90: color-mix(in oklab, white 70%, var(--bgl-dm-surface)); /* ---- Colored tint scale (10/20/30) ----------------------------------- * * In light mode --bgl-{color}-10/20/30 are near-white pastel washes (e.g. * green-30 = 70% white + green) used as soft fills — chat bubbles, badges, * highlighted rows. On a dark UI those pale pastels glow and force dark text * to be unreadable. Remap each to a low-opacity wash of its OWN base color * OVER the dark surface, so the fill stays subtly colored but dark, and the * light text token reads on top. Higher number = a touch more color. * Because these sit in the high-specificity :root.bgl-dark-mode block, they * also override any project that hard-sets e.g. --bgl-blue-30 in :root. */ --bgl-blue-10: color-mix(in oklab, var(--bgl-blue) 10%, var(--bgl-dm-surface)); --bgl-blue-20: color-mix(in oklab, var(--bgl-blue) 16%, var(--bgl-dm-surface)); --bgl-blue-30: color-mix(in oklab, var(--bgl-blue) 24%, var(--bgl-dm-surface)); --bgl-green-10: color-mix(in oklab, var(--bgl-green) 10%, var(--bgl-dm-surface)); --bgl-green-20: color-mix(in oklab, var(--bgl-green) 16%, var(--bgl-dm-surface)); --bgl-green-30: color-mix(in oklab, var(--bgl-green) 24%, var(--bgl-dm-surface)); --bgl-red-10: color-mix(in oklab, var(--bgl-red) 10%, var(--bgl-dm-surface)); --bgl-red-20: color-mix(in oklab, var(--bgl-red) 16%, var(--bgl-dm-surface)); --bgl-red-30: color-mix(in oklab, var(--bgl-red) 24%, var(--bgl-dm-surface)); --bgl-yellow-10: color-mix(in oklab, var(--bgl-yellow) 10%, var(--bgl-dm-surface)); --bgl-yellow-20: color-mix(in oklab, var(--bgl-yellow) 16%, var(--bgl-dm-surface)); --bgl-yellow-30: color-mix(in oklab, var(--bgl-yellow) 24%, var(--bgl-dm-surface)); --bgl-purple-10: color-mix(in oklab, var(--bgl-purple) 10%, var(--bgl-dm-surface)); --bgl-purple-20: color-mix(in oklab, var(--bgl-purple) 16%, var(--bgl-dm-surface)); --bgl-purple-30: color-mix(in oklab, var(--bgl-purple) 24%, var(--bgl-dm-surface)); --bgl-brown-10: color-mix(in oklab, var(--bgl-brown) 10%, var(--bgl-dm-surface)); --bgl-brown-20: color-mix(in oklab, var(--bgl-brown) 16%, var(--bgl-dm-surface)); --bgl-brown-30: color-mix(in oklab, var(--bgl-brown) 24%, var(--bgl-dm-surface)); --bgl-orange-10: color-mix(in oklab, var(--bgl-orange) 10%, var(--bgl-dm-surface)); --bgl-orange-20: color-mix(in oklab, var(--bgl-orange) 16%, var(--bgl-dm-surface)); --bgl-orange-30: color-mix(in oklab, var(--bgl-orange) 24%, var(--bgl-dm-surface)); --bgl-turquoise-10: color-mix(in oklab, var(--bgl-turquoise) 10%, var(--bgl-dm-surface)); --bgl-turquoise-20: color-mix(in oklab, var(--bgl-turquoise) 16%, var(--bgl-dm-surface)); --bgl-turquoise-30: color-mix(in oklab, var(--bgl-turquoise) 24%, var(--bgl-dm-surface)); --bgl-pink-10: color-mix(in oklab, var(--bgl-pink) 10%, var(--bgl-dm-surface)); --bgl-pink-20: color-mix(in oklab, var(--bgl-pink) 16%, var(--bgl-dm-surface)); --bgl-pink-30: color-mix(in oklab, var(--bgl-pink) 24%, var(--bgl-dm-surface)); --bgl-primary-10: color-mix(in oklab, var(--bgl-primary) 10%, var(--bgl-dm-surface)); --bgl-primary-20: color-mix(in oklab, var(--bgl-primary) 16%, var(--bgl-dm-surface)); --bgl-primary-30: color-mix(in oklab, var(--bgl-primary) 24%, var(--bgl-dm-surface)); } /* Native form controls (date/time pickers) render dark glyphs that are invisible on a dark input; invert them so they show up. */ .bgl-dark-mode input::-webkit-calendar-picker-indicator { filter: invert(0.8); } /* Text selection */ .bgl-dark-mode ::selection { color: var(--bgl-dm-text); background: var(--bgl-primary-tint); } /* Soft color pairs (.pair-*-light / .pair-*-tint) hard-code dark text in base-colors.css. Once their fills become dark washes (see the variable remaps above) that text is unreadable, so flip it to the light text token. base-colors.css carries no !important, so this plain rule wins by source order. */ .bgl-dark-mode [class*="pair-"][class*="-light"], .bgl-dark-mode [class*="pair-"][class*="-tint"] { color: var(--bgl-dm-text); } /* .pair-black-tint / .pair-gray-tint are COLORLESS translucent fills. With the --bgl-black-tint remap they'd become a translucent LIGHT patch, and the rule above also makes their text light → low contrast. Give these two an explicit subtle dark fill instead (the colored *-tint pairs keep their colored wash, which still reads fine under light text). */ .bgl-dark-mode .pair-black-tint:not(.bgl_flatPill):not(.bgl_pill-border), .bgl-dark-mode .pair-gray-tint:not(.bgl_flatPill):not(.bgl_pill-border) { background-color: var(--bgl-dm-surface-2); border-color: var(--bgl-dm-border); } /* .pair-white (e.g. ) and .pair-gray are neutral/secondary fills on light UIs (literal white / a light #b7b7b7 gray). On dark they stay glaring light blocks, so for the FILLED variant turn them into a raised dark surface with light text and a hairline border (a proper secondary button). Flat pills and border pills keep their own treatment (they only tint text / outline, not the fill), so we exclude them. */ .bgl-dark-mode .pair-white:not(.bgl_flatPill):not(.bgl_pill-border), .bgl-dark-mode .pair-gray:not(.bgl_flatPill):not(.bgl_pill-border) { background-color: var(--bgl-dm-surface-2); color: var(--bgl-dm-text); border-color: var(--bgl-dm-border); } /* Hover/active on the dark secondary button: lift one step instead of the default lighten-filter which would wash the light original out. */ .bgl-dark-mode .pair-white:not(.bgl_flatPill):not(.bgl_pill-border):hover, .bgl-dark-mode .pair-gray:not(.bgl_flatPill):not(.bgl_pill-border):hover { background-color: color-mix(in oklab, white 8%, var(--bgl-dm-surface-2)); } /* ---------------------------------------------------------------------------- * Absolute color utilities (bg-white / bg-black …) * ---------------------------------------------------------------------------- * These are mostly used as a generic "surface" (e.g. cards, dropdowns) rather * than a deliberate pure-white/black. In dark mode that pale fill becomes a * glaring patch, so we remap them to the semantic dark surface. They carry * !important in colors.css, so we must out-specify AND use !important here * (`.bgl-dark-mode .bg-white` = (0,2,0) beats `.bg-white` = (0,1,0)). * * OPT-OUT: add `keep-white` / `keep-black` when you truly want the physical * color in dark mode (logos, swatches, screenshots, on-image labels …). */ .bgl-dark-mode .bg-white:not(.keep-white), .bgl-dark-mode .bg-black:not(.keep-black) { background: var(--bgl-dm-surface) !important; --alpha-color: var(--bgl-dm-surface); /* The fill is now dark, so default any inherited/UA text (e.g.