Studio settings should be in dark mode for UI consistency

[Harsh16gupta]

Reason/Context

Please try answering few of those questions

• Why we need this improvement?
  The rest of AsyncAPI Studio uses a dark theme, but the Studio Settings modal remains in light mode, which feels visually inconsistent.
• How will this change help?
  Adding dark mode support to the settings section will ensure a consistent and cohesive UI experience across the entire Studio.

Description

Currently, the Studio Settings modal uses a light theme even when the rest of the application is in dark mode.

Current behavior:

can be like this

The settings modal should follow the same dark theme as the rest of the Studio to maintain visual consistency throughout the application.

[shuklatul1021]

@Harsh16gupta
this is a really good observation
the inconsistency between the dark-themed Studio and the light-themed Settings modal definitely breaks the overall UI experience.
adding dark mode support to the settings will improve visual consistency and make the interface feel more polished and cohesive.

I’d be happy to work on this enhancement if it’s not already assigned. Please let me know if I can take this up and if there are any specific guidelines I should follow.

[shuklatul1021]

I’ve updated the background to match the dark theme, and this is how it looks now.

I’m still refining a few details to make it look even better and more consistent with the rest of the studio.
feedback is welcome!

[Harsh16gupta]

@shuklatul1021
In AsyncAPI, we need to wait for a maintainer's approval before working on issues. While I created this issue, I'm not a maintainer who can officially assign it.

Let's wait for one of the maintainers to review and approve this enhancement. Once they give the green light, you're welcome to proceed with the implementation. Your preview looks promising!

[shuklatul1021]

@Harsh16gupta
thank you very much for your clarification. I completely understand the process and will wait for a maintainer’s approval before proceeding further.

[princerajpoot20]

@Harsh16gupta Hmm, sounds like a good-to-have. Can you come up with the design for all the screens that will be impacted by this? Also, keep the existing design in mind. it should blend well with it. Once that’s done, we can get feedback from others for a design review

[shuklatul1021]

@princerajpoot20
can I also suggest some design ideas that align with the existing design and share?

[Harsh16gupta]

@princerajpoot20
I think @shuklatul1021 has already started working on this and even shared some initial designs, while I haven’t begun anything yet. So it would make more sense for him to take this forward, if you’re okay with that.

I’ll be happy to help anytime if needed.

[shuklatul1021]

@Harsh16gupta
I really appreciate it. I’ll take this forward and keep everyone updated.

[shuklatul1021]

@Harsh16gupta @princerajpoot20

I’ve updated the background and text styling of the card. This is how it looks now.
I’d love to know how it looks to you and if there are any improvements or changes you’d suggest.

[shuklatul1021]

@princerajpoot20
I’ve made the requested UI updates and shared the latest preview above.
Could you please confirm if this looks good to proceed, or if there are any final changes needed before I raise the PR?