Dark mode toggle

[anubhav1206]

Reason/Context

The current implementation does not have a dark mode toggle.

Description

We can include a simple dark mode toggle that dynamically changes the color of the text to maintain the contrast of the webpage, kind of whats shown in the image.

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

[akshayamadhuri]

@anubhav1206 are you working on this issue

[anubhav1206]

@anubhav1206 are you working on this issue

not so far but I can work on it if assigned.

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity 😴

It will be closed in 120 days if no further activity occurs. To unstale this issue, add a comment with a detailed explanation.

There can be many reasons why some specific issue has no activity. The most probable cause is lack of time, not lack of interest. AsyncAPI Initiative is a Linux Foundation project not owned by a single for-profit company. It is a community-driven initiative ruled under open governance model.

Let us figure out together how to push this issue forward. Connect with us through one of many communication channels we established here.

Thank you for your patience ❤️

[Gmin2]

Hey @akshatnema the toggle button should be in the navbar right?

[devilkiller-ag]

Hi @akshatnema,Can I work on this?

[sagarkori143]

Hi @akshatnema sir! I am working on this issue and wanted to know a few things:

1. Where should I place the DarkModeToggle button (design can be changed later ).
2. To implement dark mode for each and every component/page I need to change a lot of files (classNames specifically). Is it okay to do so?

[sambhavgupta0705]

@Mayaleeeee PTAL,we need your suggestions here

[sagarkori143]

@Mayaleeeee friendly reminder. Thanks.

[sagarkori143]

@derberg @jonaslagoni @Mayaleeeee Give your suggestion please 🙏. Thanks!

[Mayaleeeee]

I like the idea of having a dark mode option on our website. In short, I've been working on designing something for our new homepage in both light and dark modes. You can check it out through this Figma link. @sambhavgupta0705 @sagarkori143

Instead of a regular toggle, we could use a sun icon to represent the light mode, which would then change to a moon icon when the user clicks on it to activate the dark mode. The icon can be placed after the GitHub button on the nav bar.

cc @derberg @akshatnema

[sagarkori143]

@Mayaleeeee The design looks awesome. Please let me know as soon as you finalize the design. I'll be happy to start working on it. Thanks 😊

[akshatnema]

Hi @Mayaleeeee above design looks fine to me. But the question is that we have a design system for AsyncAPI and it has been created in light mode. Can you replicate and improve that system to make it for dark theme?

[Mayaleeeee]

Hi @Mayaleeeee above design looks fine to me. But the question is that we have a design system for AsyncAPI and it has been created in light mode. Can you replicate and improve that system to make it for dark theme?

Hello @akshatnema do you mean we have another Design System apart from the one I previously shared? Regarding your question on the dark mode, I'll work on that gradually.

[sambhavgupta0705]

This is a duplicate issue #1269 so I am closing this one and we should all discussion on #1269 as a PR is linked there which would solve this issue