fix(ui): global dark-mode — app bg, legacy-var bridge, core-ui component gaps

[shah-harshit]

Describe your changes:

Refs open-metadata/openmetadata-collate#6548 (theme tokens/global CSS), open-metadata/openmetadata-collate#6549 (UI core components)
Gate contract: open-metadata/openmetadata-collate#6564

Global/core dark-mode fixes, split out of the DQ PR (#33586). All light values unchanged (frozen).

Global (app-side)

• App background: dark now --om-color-bg-primary (#0c0e12) to match the design recording; light keeps the frozen gray-blue-50 (#f8f9fc). The gray-blue scale's dark step (#0d0f1c) was too blue.
• Legacy-var bridge (variables.less + app.less): each legacy @palette var resolves through an --om-* custom property — light = exact original hex (via var(--om-x, #hex) fallback, no drift), dark = semantic/utility token under .dark-mode. Themes every legacy-var consumer app-wide (including the DQ .less surfaces) with no per-file edits. Categorical ramps excluded.

Core-ui components (audited all 53; these were the only real gaps)

• page-header: drop dark:bg-primary so the gradient header falls back to the Card's bg-surface in dark instead of melting into the page.
• autocomplete / select: caret-alpha-black/90 → caret-primary (visible caret on dark input).
• avatar-add-button: disabled gray-200 → border-disabled/text-fg-disabled.
• tree: guide line gains a dark override (gray-blue-800).

Everything else in core-ui already uses semantic tokens or is intentional fixed-color (brand/social logos, tooltip/toast solid surfaces).

Type of change:

• Improvement

Checklist:

• References tickets + Gate Zero contract.
• Light mode frozen; dark-only changes.
• Prettier + token-audit clean (bridge uses the sanctioned var(--om-*, #hex) form).

Confidence Score: 5/5

The PR appears safe to merge; the previous review findings are resolved and no new actionable issue remains.

Summary

This PR expands global dark-mode coverage while preserving existing light-mode styling.

• Bridges selected legacy LESS palette variables to semantic dark-mode tokens.
• Uses the semantic page-background token in dark mode.
• Corrects dark-mode caret, disabled-avatar, tree-guide, and gradient-header styling.
• The changes since the previous review address all three prior findings.

_{Reviews (2) · Last reviewed commit: "fix(ui-core): address review on global d..."}

[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]

Hi there 👋 Thanks for your contribution!

The OpenMetadata team will review the PR shortly! Once it has been labeled as safe to test, the CI workflows
will start executing and we'll be able to make sure everything is working as expected.

Let us know if you need any help!

[github-actions]

✅ Playwright Results — workflow succeeded

Validated commit fae576c1eeb67be09ff07bbca37294dcdaccb7cb in Playwright run 35370913098, attempt 1.

✅ 4489 passed · ❌ 0 failed · 🟡 7 flaky · ⏭️ 1 skipped · 🧰 0 lifecycle flaky

Performance

Blocking targets: ✅ met · Optimization targets: 🟡 in progress

Shard-job maxima below are not the full workflow wall time; the linked run includes build, fixture, planning, and reporting.

🕒 Full workflow signal wall (to summary) 1h 6m 57s

⏱️ Max setup 4m 46s · max shard execution 19m 52s · max shard-job elapsed before upload 23m 13s · reporting 17s

🌐 221.47 requests/attempt · 2.23 app boots/UI scenario · 35.40% common-shard skew

Optimization targets still in progress:

• Common shard skew was 35.4% (convergence target: at most 15%).
• Browser traffic was 221.47 requests per attempt (convergence target: fewer than 200).
• Application boot ratio was 2.23 per UI scenario (10673 boots / 4781 scenarios; convergence target: at most 1).

Shard	Passed	Failed	Flaky	Skipped	Lifecycle failed	Lifecycle flaky
✅ Shard advanced-search-01	68	0	0	0	0	0
✅ Shard advanced-search-02	62	0	0	0	0	0
✅ Shard chromium-01	126	0	0	1	0	0
✅ Shard chromium-02	128	0	0	0	0	0
✅ Shard chromium-03	172	0	0	0	0	0
🟡 Shard chromium-04	156	0	2	0	0	0
✅ Shard chromium-05	154	0	0	0	0	0
✅ Shard chromium-06	126	0	0	0	0	0
✅ Shard chromium-07	166	0	0	0	0	0
🟡 Shard chromium-08	196	0	1	0	0	0
✅ Shard chromium-09	145	0	0	0	0	0
🟡 Shard chromium-10	182	0	1	0	0	0
✅ Shard chromium-11	165	0	0	0	0	0
✅ Shard chromium-12	177	0	0	0	0	0
✅ Shard chromium-13	151	0	0	0	0	0
✅ Shard chromium-14	152	0	0	0	0	0
✅ Shard chromium-15	180	0	0	0	0	0
✅ Shard chromium-16	174	0	0	0	0	0
🟡 Shard chromium-17	167	0	1	0	0	0
✅ Shard chromium-18	177	0	0	0	0	0
🟡 Shard chromium-19	135	0	1	0	0	0
✅ Shard chromium-20	160	0	0	0	0	0
✅ Shard chromium-21	147	0	0	0	0	0
🟡 Shard chromium-22	179	0	1	0	0	0
✅ Shard chromium-23	146	0	0	0	0	0
✅ Shard chromium-24	137	0	0	0	0	0
✅ Shard chromium-25	129	0	0	0	0	0
✅ Shard data-asset-rules-01	65	0	0	0	0	0
✅ Shard domain-isolation-01	16	0	0	0	0	0
✅ Shard global-state-01	34	0	0	0	0	0
✅ Shard import-export-01	29	0	0	0	0	0
✅ Shard import-export-02	94	0	0	0	0	0
✅ Shard import-export-03	27	0	0	0	0	0
✅ Shard ingestion-01	39	0	0	0	0	0
✅ Shard ingestion-02	59	0	0	0	0	0
✅ Shard reindex-01	28	0	0	0	0	0
✅ Shard search-01	12	0	0	0	0	0
✅ Shard search-rbac-01	29	0	0	0	0	0

🟡 7 flaky test(s) (passed on retry)

• Features/UserProfileOnlineStatus.spec.ts › Should show online status badge on user profile for active users (shard chromium-04, 1 retry)
• Features/UserProfileOnlineStatus.spec.ts › Should show "Active recently" for users active within last hour (shard chromium-04, 1 retry)
• Features/Pagination.spec.ts › should test Table columns complete flow with search (shard chromium-08, 1 retry)
• Pages/UserDetails.spec.ts › Admin user can edit teams from the user profile (shard chromium-10, 1 retry)
• Pages/Entity.spec.ts › Tier Add, Update and Remove (shard chromium-17, 1 retry)
• Features/Dashboards.spec.ts › should be able to toggle between deleted and non-deleted charts (shard chromium-19, 1 retry)
• Pages/ExplorePageRightPanel_KnowledgeCenter.spec.ts › Should remove user owner for knowledgeCenter (shard chromium-22, 1 retry)

📦 Download artifacts

How to debug locally

# Download playwright-test-results-<shard> artifact and unzip
npx playwright show-trace path/to/trace.zip    # view trace

[shah-harshit]

Addressed the review (fae576c):

• caret-primary invalid → invisible caret (P1, both bots): correct — caret-* resolves from the --color-* namespace and there's no bare --color-primary, so it emitted nothing; on combobox's text-transparent overlay that meant caret-color:auto = invisible. Switched to caret-text-primary (valid, inverts in dark) in combobox, autocomplete, and multi-select.
• avatar-add-button light disabled drift (P1): restored disabled:border-gray-200/disabled:text-gray-200 for light and moved the semantic disabled tokens to dark:disabled:*, keeping the light-mode freeze.
• page-header stale comment (P2): updated to say dark falls back to the Card's bg-surface.

Prettier clean; --color-text-primary confirmed present so caret-text-primary resolves.

[github-actions]

Hi there 👋 Thanks for your contribution!

The OpenMetadata team will review the PR shortly! Once it has been labeled as safe to test, the CI workflows
will start executing and we'll be able to make sure everything is working as expected.

Let us know if you need any help!

[gitar-bot]

Code Review ✅ Approved 1 closed / 1 findings

🟡 Medium risk

Extends dark-mode coverage across the application and core component library by bridging legacy Less colors to semantic tokens, updating the global page background, and correcting component styling. All changes are approved with no open issues.

✅ 1 closed

✅ Bug: caret-primary is not a valid Tailwind token; caret fix no-ops

📄 openmetadata-ui-core-components/src/main/resources/ui/src/components/base/select/combobox.tsx:166 📄 openmetadata-ui-core-components/src/main/resources/ui/src/components/base/autocomplete/autocomplete.tsx:284 📄 openmetadata-ui-core-components/src/main/resources/ui/src/components/base/select/multi-select.tsx:202
caret-primary is not a resolvable Tailwind v4 utility here. The caret-* utility draws color names from the --color-* theme namespace (that is why caret-alpha-black and caret-transparent work), but there is no --color-primary token in globals.css — text-primary/bg-primary resolve through the separate --text-color-*/--background-color-* namespaces, which do not feed caret-*. As a result caret-primary emits no CSS and the intended "visible caret on dark input" fix does not apply. In autocomplete.tsx and multi-select.tsx the input also has text-primary, so the caret falls back to currentColor and stays visible by accident. But in combobox.tsx the overlay input is tw:text-transparent, so removing the old explicit caret-alpha-black/90 leaves caret-color: auto = transparent, making the text cursor invisible in the Select search input in BOTH light and dark — a regression. Use a token that exists in the --color-* namespace, e.g. caret-text-primary (or caret-fg-primary), which is defined and inverts under .dark-mode.

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}