[FEATURE] Implement Dark Mode Theme Support.

[prashantrai-30]

Why do we need this improvement?

• Current Limitations ⚠️

  • Only light mode available
  • Difficult to use in low-light environments
  • Limited accessibility options

• User Feedback 👥

  • Frequent requests for dark mode
  • Reports of eye strain during night usage
  • Accessibility concerns from users

• Market Analysis 📊

  • Standard feature in competitor APIs
  • Present in major development tools
  • Growing user expectation

How will this change help?

How will this change help?

• Solution Impact 🎯

  • System-level theme detection
  • Seamless mode switching
  • Persistent user preferences

• Direct Benefits ⚡

  • Reduced eye strain in low light
  • Better readability at night
  • Lower battery consumption on OLED displays

• Implementation Value 🔨

  • Standardized color variables
  • Consistent UI components
  • Future-proof theming system

• Business Metrics 📈

  • Increased user satisfaction
  • Better platform accessibility
  • Improved market competitiveness

Screenshots

No response

How could it be implemented/designed?

• Create theme context/provider
• Define CSS variables for theming
• Add theme toggle component
• Implement system theme detection
• Add local storage persistence
• Update existing components to use theme variables

🚧 Breaking changes

Yes

👀 Have you checked for similar open issues?

• I checked and didn't find a similar issue

🏢 Have you read the Contributing Guidelines?

• I have read the Contributing Guidelines

Are you willing to work on this issue?

Yes I am willing to submit a PR!

[github-actions]

Welcome to AsyncAPI. Thanks a lot for reporting your first issue. Please check out our contributors guide and the instructions about a basic recommended setup useful for opening a pull request.
Keep in mind there are also other channels you can use to interact with AsyncAPI community. For more details check out this issue.

[prashantrai-30]

Hey @jonaslagoni,
Can I work on on this :)

[jonaslagoni]

Go for it 😄

[devilkiller-ag]

Hi @prashantrai-30, Any update on this? Feel free to ask if you got stuck somewhere. 🔥

[prashantrai-30]

Hi @devilkiller-ag ,
I started working on it but have paused for now as my exams are currently ongoing.

[devilkiller-ag]

Hi @devilkiller-ag ,
I started working on it but have paused for now as my exams are currently ongoing.

Oh that's great! All the best for your exam🤞

[kartik-212004]

@devilkiller-ag I'm interested in working on this issue and would appreciate being assigned to it.

[NirvedMishra]

@devilkiller-ag Can I work on this or I need to be assigned for it

[prashantrai-30]

@kartik-212004 @NirvedMishra I am already working on it :)

[prashantrai-30]

Hey @devilkiller-ag ,
I am getting 404 Not Found in the Docs tab on my system, what should I do so that I can find the docs?

[devilkiller-ag]

Hey @devilkiller-ag , I am getting 404 Not Found in the Docs tab on my system, what should I do so that I can find the docs?

Hi @prashantrai-30, did you build modelina (npm run build:modelina) first before running npm i for the website? If not so, first build the modelina. Refer to the readme for the modelina website.

[prashantrai-30]

Hey @devilkiller-ag , I am getting 404 Not Found in the Docs tab on my system, what should I do so that I can find the docs?

Hi @prashantrai-30, did you build modelina (npm run build:modelina) first before running npm i for the website? If not so, first build the modelina. Refer to the readme for the modelina website.

still facing the same issue