Skip to content

feat(ui): Enable global dark mode support across UI components#6063

Draft
SahilGupta2810 wants to merge 2 commits intoakuity:mainfrom
SahilGupta2810:dark-theme-foundation
Draft

feat(ui): Enable global dark mode support across UI components#6063
SahilGupta2810 wants to merge 2 commits intoakuity:mainfrom
SahilGupta2810:dark-theme-foundation

Conversation

@SahilGupta2810
Copy link
Copy Markdown

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:

  • Provider Injection: Added an app-wide ThemeProvider context to persist and track theme preferences, directly linking it to Ant Design's <ConfigProvider> dark algorithms.
  • Variable Mapping: Upgraded the vite.config.mts to dynamically convert static LESS variables (@colorBgContainer) into native CSS variables (var(--ant-color-*)), enabling instantaneous layout repainting.
  • Component Resolvers: Specifically configured stubborn third-party components—like the ReactFlow pipeline graphs and the Monaco YAML editors—to properly ingest resolvedTheme contexts and invert to dark backgrounds.

Testing / Validation

  • Ran the make hack-lint-ui equivalent (eslint --fix & typecheck). All local rules pass cleanly.
  • Simulated Light / Dark toggling across Projects, Pipelines, Settings, and CLI pages with zero visual regressions.

Signed-off-by: Sahil Gupta <sahilg9810@gmail.com>
Signed-off-by: Sahil Gupta <sahilg9810@gmail.com>
@SahilGupta2810 SahilGupta2810 requested a review from a team as a code owner April 11, 2026 11:36
@netlify
Copy link
Copy Markdown

netlify Bot commented Apr 11, 2026

Deploy Preview for docs-kargo-io ready!

Name Link
🔨 Latest commit f040f10
🔍 Latest deploy log https://app.netlify.com/projects/docs-kargo-io/deploys/69da3240a05647000992a3b1
😎 Deploy Preview https://deploy-preview-6063.docs.kargo.io
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@SahilGupta2810 SahilGupta2810 changed the title Dark theme foundation UI: Enable global dark mode support across UI components Apr 11, 2026
@SahilGupta2810 SahilGupta2810 changed the title UI: Enable global dark mode support across UI components feat(ui): Enable global dark mode support across UI components Apr 11, 2026
@Marvin9
Copy link
Copy Markdown
Contributor

Marvin9 commented Apr 13, 2026

Has it been discussed? #5622

@krancour
Copy link
Copy Markdown
Member

@Marvin9 it has not. Discussion should have occurred prior to a change as big as this.

@SahilGupta2810
Copy link
Copy Markdown
Author

SahilGupta2810 commented Apr 13, 2026

I am a new contributor. Can you help me navigate how can I start the discussion on this ?

@Marvin9 @krancour

@krancour
Copy link
Copy Markdown
Member

krancour commented Apr 13, 2026

@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.

@krancour krancour marked this pull request as draft April 13, 2026 17:43
@Marvin9
Copy link
Copy Markdown
Contributor

Marvin9 commented Apr 14, 2026

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants