/* ============================================ Gyro — DevExpress Fluent theme override ============================================ The --rame-* tokens only reach our own components. The navigation, header, grids, buttons, pagers and page background are painted by the DevExpress Fluent theme, which is where most of the screen lives. This file is the bridge. MUST load AFTER the DevExpress theme stylesheet — in _Host.cshtml it is the last design-system link. Two levers, and they are not the same kind of thing: 1. ACCENT — `--dxbl-accent-color-` is a hook DevExpress publishes on purpose: every `--DS-primary-` is declared as `var(--dxbl-accent-color-, )`. Defining these 17 variables re-accents the whole app regardless of which accent (Blue, Purple…) is selected in appsettings. Supported, safe. 2. NEUTRALS — `--DS-neutral-` has no such hook, so we redefine it directly, and only in dark mode. This is what turns the flat #282828 grey shell into the brand's Night. Light mode keeps DevExpress's own neutrals: white is white. Both ramps were produced by taking DevExpress's own lightness steps and rotating only the hue (212° for Gyro Blue, 222° for Night). Keeping their lightness means the contrast ratios they engineered still hold — a ramp invented from scratch is how a themed app ends up with unreadable disabled text. ============================================ */ :root { /* ======================================== ACCENT — Gyro Blue (H 212°) Step 70 is the published brand hue (#4E9BF5). Step 90 is the filled-button surface, and carries white text, so it is pinned to the AA-safe ink (5.0:1) rather than the brand hue (2.9:1). ======================================== */ --dxbl-accent-color-170: #050D17; --dxbl-accent-color-160: #081728; --dxbl-accent-color-150: #0A213B; --dxbl-accent-color-140: #0B2A4F; --dxbl-accent-color-130: #0A3566; --dxbl-accent-color-120: #093F7E; --dxbl-accent-color-110: #0A4C99; --dxbl-accent-color-100: #0B58B1; --dxbl-accent-color-90: #2B6FC4; --dxbl-accent-color-80: #3584E1; --dxbl-accent-color-70: #4E9BF5; --dxbl-accent-color-60: #71ADF4; --dxbl-accent-color-50: #90BEF4; --dxbl-accent-color-40: #ABCDF5; --dxbl-accent-color-30: #C4DBF5; --dxbl-accent-color-20: #DAE7F6; --dxbl-accent-color-10: #EBF2F9; } /* ============================================ DARK MODE — Night neutrals (H 222°) ============================================ Verified against the theme source: `modes/dark.min.css` declares 536 of its 538 `--DS-color-*` variables as `var(--DS--)` and never redefines the neutral scale itself. So every surface, border and text colour in the app resolves through the ramp below — including `--DS-color-surface-neutral-default-rest`, which is `--DS-neutral-230` (#252525) and is the flat grey shell we are replacing. Three selectors, not one. The theme declares its variables on `.dxbl-theme-fluent-mode-dark, :root`. Specificity alone is not enough: if DevExpress puts that class on an element *closer* to the icon than , its inherited value wins no matter how specific our rule on is. So we also claim the class itself. ============================================ */ html[data-rame-theme="dark"], html:has(body.dxbl-theme-fluent-mode-dark) { --DS-neutral-250: #080B14; --DS-neutral-240: #0A0E1A; --DS-neutral-230: #0E1424; --DS-neutral-220: #131B30; --DS-neutral-210: #182140; --DS-neutral-200: #1C2749; --DS-neutral-190: #223054; --DS-neutral-180: #2A395F; --DS-neutral-170: #33436B; --DS-neutral-160: #3D4E77; --DS-neutral-150: #475983; --DS-neutral-140: #52658F; --DS-neutral-130: #5E719B; --DS-neutral-120: #6C7EA6; --DS-neutral-110: #7A8BAA; --DS-neutral-100: #8B9AB6; --DS-neutral-90: #99A6C0; --DS-neutral-80: #A7B2C9; --DS-neutral-70: #B6BFD2; --DS-neutral-60: #C3CADB; --DS-neutral-50: #D0D5E3; --DS-neutral-40: #DCE0EB; --DS-neutral-30: #E7EAF2; --DS-neutral-20: #F0F2F8; --DS-neutral-10: #F0F4FF; /* ======================================== THE SAME RAMP AGAIN, UNDER --dxds-* ======================================== The Fluent theme keeps TWO parallel variable sets: an internal `--DS-*` and a public `--dxds-*`. They are not aliases of each other — measured in the browser, `--DS-neutral-230` read #0E1424 (ours) while `--dxds-neutral-230` still read #252525 (theirs). `global.min.css` paints the page with the public one: body { background: var(--dxds-color-surface-neutral-default-rest) } So overriding only `--DS-*` leaves the page background grey while every panel above it turns Night — which is exactly the "mezclado" the user reported. Both sets must be declared, and kept in step. ======================================== */ --dxds-neutral-250: #080B14; --dxds-neutral-240: #0A0E1A; --dxds-neutral-230: #0E1424; --dxds-neutral-220: #131B30; --dxds-neutral-210: #182140; --dxds-neutral-200: #1C2749; --dxds-neutral-190: #223054; --dxds-neutral-180: #2A395F; --dxds-neutral-170: #33436B; --dxds-neutral-160: #3D4E77; --dxds-neutral-150: #475983; --dxds-neutral-140: #52658F; --dxds-neutral-130: #5E719B; --dxds-neutral-120: #6C7EA6; --dxds-neutral-110: #7A8BAA; --dxds-neutral-100: #8B9AB6; --dxds-neutral-90: #99A6C0; --dxds-neutral-80: #A7B2C9; --dxds-neutral-70: #B6BFD2; --dxds-neutral-60: #C3CADB; --dxds-neutral-50: #D0D5E3; --dxds-neutral-40: #DCE0EB; --dxds-neutral-30: #E7EAF2; --dxds-neutral-20: #F0F2F8; --dxds-neutral-10: #F0F4FF; --dxds-success-90: #2CE0B4; --dxds-success-80: #6BEBCC; --dxds-info-90: #4E9BF5; --dxds-info-80: #8FBEF9; --dxds-warning-90: #F5A623; --dxds-danger-90: #F2637B; /* The body background is read by themeDetector.js to decide the theme. Pinning it keeps the detector's answer stable across theme swaps. */ --dxbl-body-bg: #0A0E1A; } /* Success and info accents in dark, so DevExpress badges and validation states speak the same palette as our own components. */ html[data-rame-theme="dark"], html:has(body.dxbl-theme-fluent-mode-dark) { --DS-success-90: #2CE0B4; --DS-success-80: #6BEBCC; --DS-info-90: #4E9BF5; --DS-info-80: #8FBEF9; --DS-warning-90: #F5A623; --DS-danger-90: #F2637B; } /* ============================================ TYPOGRAPHY — one variable reaches the whole suite ============================================ Measured in the running app: the body resolved to "segoe ui", because the theme sets fonts through its own chain and never sees --rame-font-family. The chain is: --dxbl--font-family (124 of them) -> --dxds-font-family-sans-serif (94 of the 124) -> --dxds-font-family-segoe-ui ("segoe ui") -> --dxds-font-family-system-sans-serif (the fallbacks) So redefining the LEAF is enough, and is better than redefining the whole stack: DM Sans takes the first slot and DevExpress's own system fallbacks stay behind it untouched. ============================================ */ /* ============================================ ICON PALETTE ============================================ gyroIconPalette.js rewrites every DevExpress icon colour into one of these variables rather than into a fixed hex. That is what makes a theme switch free: the SVG is inline in our document, so flipping these values repaints every icon at once, with no re-fetch, no rewrite and no flicker. Three tones per role because many icons are two-tone — collapsing them to a single value would flatten the artwork into a silhouette. Measured against DevExpress's shipped set: 102 distinct hexes across the icon assemblies. A lookup table would always have holes (that is how the "Nuevo" plus stayed orange — #DE590B was not in it), so the script classifies by HUE instead and lands every one of them, present and future. ============================================ */ :root { /* structural greys */ --gyro-icon-grey-deep: #3F4C63; --gyro-icon-grey: #5A6B8A; --gyro-icon-grey-soft: #A9B8CE; /* primary / action — DevExpress's action orange maps here too */ --gyro-icon-blue-deep: #1A4A88; --gyro-icon-blue: #2B6FC4; --gyro-icon-blue-soft: #6BA5E8; --gyro-icon-green-deep: #065846; --gyro-icon-green: #0A8368; --gyro-icon-green-soft: #4FBFA3; --gyro-icon-amber-deep: #7A4E05; --gyro-icon-amber: #9A6206; --gyro-icon-amber-soft: #D99A2B; --gyro-icon-red-deep: #96233A; --gyro-icon-red: #C0304A; --gyro-icon-red-soft: #E0798C; /* DevExpress's own published tokens, pointed at the same values */ --dxds-icon-color-black: var(--gyro-icon-grey); --dxds-icon-color-blue: var(--gyro-icon-blue); --dxds-icon-color-green: var(--gyro-icon-green); --dxds-icon-color-yellow: var(--gyro-icon-amber); --dxds-icon-color-red: var(--gyro-icon-red); } html[data-rame-theme="dark"], html:has(body.dxbl-theme-fluent-mode-dark) { --gyro-icon-grey-deep: #5E719B; --gyro-icon-grey: #8B9AB6; --gyro-icon-grey-soft: #B6C2D8; --gyro-icon-blue-deep: #2E6CB8; --gyro-icon-blue: #4E9BF5; --gyro-icon-blue-soft: #8FBEF9; --gyro-icon-green-deep: #1B9C7D; --gyro-icon-green: #2CE0B4; --gyro-icon-green-soft: #7FEDD3; --gyro-icon-amber-deep: #C07E10; --gyro-icon-amber: #F5A623; --gyro-icon-amber-soft: #F8C46B; --gyro-icon-red-deep: #C24157; --gyro-icon-red: #F2637B; --gyro-icon-red-soft: #F79BA9; } :root { --dxds-font-family-segoe-ui: 'DM Sans'; --dxds-font-family-mono: var(--gyro-font-mono, 'JetBrains Mono', ui-monospace, monospace); --DS-font-family-sans-serif: var(--gyro-font-body, 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif); --DS-font-family-mono: var(--gyro-font-mono, 'JetBrains Mono', ui-monospace, monospace); } /* ============================================ HEADER STRIP ============================================ The XAF top bar is `div.header.navbar-dark` — Bootstrap classes, not Fluent ones, so it never consulted the ramps above and stayed at #252525 with a #767676 rule under it. Measured in the browser, not guessed. ============================================ */ html[data-rame-theme="dark"] .header, html:has(body.dxbl-theme-fluent-mode-dark) .header { background-color: var(--gyro-night, #0A0E1A) !important; border-bottom-color: var(--gyro-border-strong, rgba(122, 139, 170, .32)) !important; } html[data-rame-theme="dark"] .header .navbar-brand, html[data-rame-theme="dark"] .header h1, html:has(body.dxbl-theme-fluent-mode-dark) .header h1 { color: var(--gyro-off, #F0F4FF); }