Dark/Light Mode Button

[octonawish-akcodes]

Reason/Context

Please try answering few of those questions

• Why we need this improvement?

When I was scrolling the Asyncapi website I found that bright colors especially the background white colors sometimes don't suit to the users or developers who prefer to read in dark mode. So I was thinking we should add a dark/light mode for the website at the top of the page in the navigation bar.

• How will this change help?

This change will allow people to change the background color of the page according to their compatibility of reading because some prefer to read in light mode and some in dark.

• What is the motivation?

Motivation is just to give a smooth and great experience to users who come and visit the Asyncapi website.

Description

Please try answering a few of those questions

• What changes have to be introduced?

We just have to create a button for this.

• Will this be a breaking change?

I don't know but it will definitely help in a good user experience :)

• How could it be implemented/designed?

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

[fmvilas]

I am ALL for it 😄 Looking forward to someone taking the initiative here. That would be super cool IMHO.

[ItsRoy69]

I can work on this issue if someone assigns me

[prajjwalkapoor]

I personally feel comfortable browsing in dark mode as well and I am sure many developers feel the same way. It would be great if we have a dark/light mode switcher. I can also help in getting this done.

[derberg]

Yay to the dark mode!

[Maniktherana]

I'm open to working on this! Do we have a color palette for dark mode?

[Savio629]

@Maniktherana Here's the brand guide line of the repository
https://github.com/asyncapi/brand/blob/master/brand-guidelines/README.md
As the feature is brought up now the brand guidelines doesn't contain color palettes for dark mode.

So as @fmvilas mentioned there needs someone to take the initiative (that would be me too)
Points to be considered while designing the dark mode :

• Create a Figma design to visualize the dark mode and its impact on the website's UI.
• Choose a color palette that complements the website's design and enhances the user experience in dark mode.
• Optimize the dark mode using tools like Lighthouse to improve SEO and performance.
• Divide the website into sections and design each section's dark mode elements to ensure consistency and coherence.

More thoughts are welcome! ^_^

[Savio629]

Based on my understanding of the meeting video, I have summarized the following points for other contributors who come across this issue:

• There is no urgent need to design the Dark Mode for the website.
• Initially, we can present the color scheme for the Dark Mode and based on the feedback, we can proceed with its implementation.
• We can start by implementing the Dark Mode in the Docs section of the website and include an event connected to the dark mode toggle to determine if users are using it frequently. This will help us decide whether to implement it in other sections of the website.
• To avoid conflicts and for better understanding, we can create separate pull requests for each page when implementing the Dark Mode feature
• Also as the website uses Tailwind CSS it would be easier to implement the dark mode feature.

[vinyashegde]

I also tried giving a dark mode myself for docs page here the figma link to view -

https://www.figma.com/file/lM4QISxqAVaLSqYd1OzddT/aysnc-api-dark-mode-test-1.0?type=design&t=HXTpxLIBk9pRh3HH-1

Take a peek here -

[akshatnema]

@Savio629 Design looks good to me 🚀

[derberg]

love it!

[akkshitgupta]

would love to know the progress on it and to take charge, if no one is working on it. LMK, how can I help on this.

[sagarkori143]

@akkshitgupta I'm currently working on it and I have asked for more clarification/suggestions in another raised issue. Waiting for the response from maintainers. Thanks!

[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 ❤️

[sambhavgupta0705]

@sagarkori143 what's the status of this issue?

[sagarkori143]

Hi @sambhavgupta0705
I have a keen interest in working on this feature. I want to know the status of PR #2650 to get a direction to think about the remaining implementation.

[TenzDelek]

@sambhavgupta0705 is this issue open to take or any other contributor is working on this?

[sagarkori143]

Hey @TenzDelek
You can start working on this.

[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 ❤️

[Shriya-Chauhan]

Hey, I would like to work on this issue. Can you please assign me this?