feat(ui): Enable global dark mode support across UI components#6063
feat(ui): Enable global dark mode support across UI components#6063SahilGupta2810 wants to merge 2 commits intoakuity:mainfrom
Conversation
Signed-off-by: Sahil Gupta <sahilg9810@gmail.com>
Signed-off-by: Sahil Gupta <sahilg9810@gmail.com>
✅ Deploy Preview for docs-kargo-io ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
Has it been discussed? #5622 |
|
@Marvin9 it has not. Discussion should have occurred prior to a change as big as this. |
|
@SahilGupta2810 we have a very strong preference that large changes (and this is large in terms of impact, if not diffs) aren't PR'ed without some discussion with maintainers first to determine that the change is welcome and that the intended approach is something we'd be comfortable with. It's a measure intended to prevent effort from being wasted on things we, in fact, might never merge. (We'll actually be formalizing the issue-first contribution model and automating its enforcement very soon.) This was just recently brought up in #6061, but it's still marked with a big red "proposal" label, which means a PR is premature at this point in time. I think we assumed you were aware of #6061 before opening this, but perhaps it's coincidence that #6061 and this were opened just hours apart. 🤷♂️ At any rate, there's every chance in the world we're going to merge this eventually, but we want to help contributors develop the habit of discussing proposed changes before spending time on them. I'm going to mark this as a draft and let's move further conversation to #6061 and if/when everyone's on the same page, we'll drop the "proposal" label and work can proceed. If the agreed approach matches what you've already done here, that will be great! Edited: Originally cited incorrect issue number. Fixed. |
|
On top of what @krancour stated, I would also suggest to look for small or good first issue. It will have quick turn around times in discussions and getting merged. Find out small or Good first issues which are unassigned and put comments there. |
Description
This PR introduces the foundational architecture for Dark Mode toggling across the Kargo UI, ensuring all elements automatically conform to the user's theme constraints without manual class overrides.
Key Changes:
ThemeProvidercontext to persist and track theme preferences, directly linking it to Ant Design's<ConfigProvider>dark algorithms.vite.config.mtsto dynamically convert static LESS variables (@colorBgContainer) into native CSS variables (var(--ant-color-*)), enabling instantaneous layout repainting.ReactFlowpipeline graphs and theMonacoYAML editors—to properly ingestresolvedThemecontexts and invert to dark backgrounds.Testing / Validation
make hack-lint-uiequivalent (eslint --fix&typecheck). All local rules pass cleanly.