Repository navigation
Fixes open-metadata/openmetadata-collate#7317: dark-mode surfaces and borders render light - #35271
Conversation
tokens.css (imported after app.less) declares light values for the legacy --om-* aliases on :root, which ties the .dark-mode bridge on <html> and wins on order, so every bridged var stayed light in dark. Scope the bridge to :root.dark-mode. - point #dde3ea borders at the core secondary border token - column panel: drop max-width 95% that always clipped the title; align Key Profile Metrics padding/divider with sibling sections - dark accents follow the devrel palette: brand-400 for text/icons/links, brand-600 for the selected explore card and nav pill (20%) Fixes open-metadata/openmetadata-collate#7317
shah-harshit
added
UI
Antd is being removed and classic mode won't support dark, so keep the fix to non-antd surfaces.
![gitar-bot[bot]](https://avatars.githubusercontent.com/in/827041?s=60&v=4){kind=small}
Classic mode gets no dark theme and antd-only surfaces are not themed for dark; add the decision record and point the styling rule at it.
Code Review ✅ Approved 1 closed / 1 findings🟡 Medium risk · Changing the global dark-mode token bridge and brand palette affects surfaces, borders, and accents across the UI, potentially producing unreadable or inconsistent styling. Fixes dark-mode surfaces and borders that rendered light by making the dark bridge selector ✅ 1 closed✅ Quality: Unrecorded rule: classic mode and antd surfaces get no dark mode
VerificationRules No rules evaluated Functional validation Not enabledAuto-approval Not enabledOptionsDisplay: compact → Counting what did not apply, without listing it. Comment with these commands to change the behavior for this request:
Was this helpful? React with 👍 / 👎 | Powered by Gitar — free for open source |
Jest test CoverageUI tests summary
|
|
2 participants
Describe your changes:
Fixes open-metadata/openmetadata-collate#7317
Dark mode showed light surfaces and white borders across pages: tab count badges, the Activity Feed comments box, the conversation/task drawer, the create-task page, the column detail drawer, bulk-edit operation badges, and most dividers.
Root cause: #34936 added light values for the legacy
--om-*aliases on:rootintokens.css.tokens.cssis imported afterapp.less, and:roothas the same specificity as the.dark-modebridge on<html>, so the light values won. Every legacy var bridged inapp.less, such as@grey-15(the app-wide border),@grey-1/2/5/6/9/26,@blue-29/30and the status tints, stayed light in dark mode.Changes:
:root.dark-mode, so it wins regardless of import order. Light values are unchanged.#dde3eaon non-antd surfaces (feed editor toolbar, test-connection cards, explore/retention core dialogs) now use the core--tw-border-color-secondary/tw:border-secondary. Antd-only surfaces and classic mode are out of scope: antd is being removed and classic mode won't support dark.amount→amo…). The legacymax-width: 95%sat inside the shrink-to-fit tooltip trigger added in Fixes open-metadata/openmetadata-collate#6890: Migrate antd Tooltip to core and freeze antd imports with ESLint #35193. Key Profile Metrics now uses the same 14px inset, section gap and divider as the sibling sections.--color-text-link,fg-brand-*) move from brand-300#84caffto brand-400#53b1fd. Fills and borders use#1570ef: the selected explore card has a 1px#1570efborder, the AI sidebar selected pill uses#1570efat 20%, and sidebar hover uses white at 6%. The sidebar previously readvar(--color-brand-300), which is never emitted, so it silently fell back. It now reads--tw-color-brand-*.Type of change:
High-level design:
N/A: CSS cascade fix plus token swaps. No component APIs changed.
Tests:
Use cases covered
#1570ef) and link/accent colour (#53b1fd)Unit tests
jest src/components/Database/ColumnDetailPanel src/components/common/EntityImport: 10 suites, 109 tests passedChecks
yarn ui-checkstyle:changed(OSS + core) cleanyarn token-audit: no new errors (88 pre-existing on main, unchanged)UI screenshots (dark, main → this branch)
Light, column detail panel (this branch):
Not in this PR (Collate-only code): the tag details popover header's
tw:border-2 tw:border-white(TagDetailsPopup.tsx), and the Auto Classification config card in the Add Tag modal.