fix(ui): dark-mode AI sidebar and CodeMirror editors

[shah-harshit]

Describe your changes:

Refs open-metadata/openmetadata-collate#6573 (sidebar/nav), open-metadata/openmetadata-collate#6580 (editors), open-metadata/openmetadata-collate#6577 (empty-state assets)
Gate contract: open-metadata/openmetadata-collate#6564

Combines three small, non-overlapping dark-mode fixes.

1. AI sidebar selected/active state (sidebar.less) — verified against the design recording (source of truth):

• Active/pressed pill was a solid neutral gray-blue-900, one step from the gray-blue-950 panel → effectively invisible. Now the brand-tinted --om-color-interactive-selected (brand-500 @16%). Covers all 8 active/pressed surfaces.
• Selected label/icon resolved to brand-200 (one step too pale); now brand-300 (#84caff), the recording's glyph-core color.
• Rest nav/list icons dimmed to gray-600 (#61656c) to match the recording; quaternary (gray-400) read a step too bright.
• All flip only in dark via --ask-* custom properties; light is frozen.

2. CodeMirror editors (code-mirror.less) — CodeMirror 5 ships a light theme, so editor surface, gutter, line numbers, cursor, selection, active-line, and syntax tokens stayed light in dark. Dark-scoped block maps chrome to semantic --om-* tokens and remaps the default syntax hues (keyword #708, string #a11, …) — which fail contrast on the dark surface — to light palette hues, nested under .dark-mode .CodeMirror so they outrank CM's defaults.

3. Empty-state / placeholder illustrations (28 SVGs) — no-data/empty/not-found illustrations shipped light-theme fills (grays, white "paper", dark indigo) that stayed light in dark mode. Neutral fills routed through currentColor or semantic --om text/border tokens (light values ≈ originals, so light unchanged); white paper → --om-color-bg-surface; brand-blue accents left intact. Geometry untouched; connector/company logos deliberately not changed (fixed-color brand exception).

Type of change:

• Improvement

Checklist:

• I have read the CONTRIBUTING document.
• PR references the implementation tickets and Gate Zero contract.
• No raw theme-sensitive colors added in component CSS (semantic tokens; light frozen).
• No editor/nav API or interaction change; SVG geometry unchanged.

Confidence Score: 5/5

The current pull request appears safe to merge, with no outstanding reportable findings.

Summary

This pull request improves dark-mode presentation for the AI sidebar and CodeMirror 5 editors.

• Gives selected sidebar items a visible brand-tinted surface and updates active and rest-state foreground colors.
• Applies dark surfaces, gutters, selection, cursor, active-line, and syntax-token colors to CodeMirror editors.
• Keeps the changes scoped to dark mode while preserving existing light-mode behavior.

_{Reviews (10) · Last reviewed commit: "Merge branch 'main' into 6573-nav-select..."}

[github-actions]

❌ PR checklist incomplete

This PR cannot be merged until the following are addressed on its linked issue:

• No GitHub issue is linked. Link an issue in the Development section of the PR (or add Fixes #12345 to the description). For a same-org cross-repo issue, add Fixes open-metadata/<repo>#123 to the description.

The fields live on the linked issue in the Shipping project (open the issue → right sidebar → Projects). After you set them, re-run this check (or push a commit) — issue/project changes do not re-trigger it automatically.

Maintainers can bypass this check by adding the skip-pr-checks label.

[github-actions]

Jest test Coverage

UI tests summary

Lines	Statements	Branches	Functions
	72.9% (102378/140434)	57.88% (62343/107698)	58.92% (20367/34565)

[shah-harshit]

Corrected the dark selected-pill against the design recording (source of truth).

Earlier this PR used a neutral gray-blue-900 pill in dark. Verified against the recording that this is wrong on two counts:

1. gray-blue-900 (#101323) sits one step from the gray-blue-950 panel (#0d0f1c) → the pill is effectively invisible.
2. The recording's dark selected pill is brand-tinted — sampled #162436 ≈ brand-500 @16% over the panel.

Fix: @ask-bg-active now routes through --ask-selected-surface, which .dark-mode flips to --om-color-interactive-selected (= --alpha(theme(--color-brand-500)/16%) in dark). Light leaves it unset → gray-blue-100 fallback, so light is unchanged (recording light pill sampled #e7e8f3 ≈ gray-blue-100). Covers all 8 active/pressed surfaces.

Note: the dark brand tint resolves at build time (theme(--color-brand-500)), so it does not track runtime custom branding — matching the recording was prioritized per the source-of-truth call. Label/icon stay on the branding-aware utility-brand-800 scale (dark brand-200 vs recording brand-300 — a minor shade, left as-is to keep light frozen).

Commit: f187de6

[gitar-bot]

Code Review ✅ Approved

🟢 Low risk

Adds dark-mode styles for the AI sidebar selected state, CodeMirror editors, and empty-state illustrations. All changes route through semantic tokens to preserve light mode and ensure proper contrast in dark mode—no issues found.

Review coverage

Rules No rules evaluated

Functional validation Not enabled · Set up

Auto-approval Not enabled · Set up

Options

Display: compact → Counting what did not apply, without listing it.

Comment with these commands to change the behavior for this request:

Compact

gitar display:verbose

_{Was this helpful? React with 👍 / 👎 | Powered by Gitar — free for open source}

[sonarqubecloud]

Quality Gate passed for 'open-metadata-ui'

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud