feat: add dark mode for website

[vishvamsinh28]

This PR adds Dark Mode functionality, enhancing user experience with an alternative color scheme for better readability in low-light environments. It includes a toggle button for seamless theme switching.

resolves #1269

[netlify[bot]]

✅ Deploy Preview for asyncapi-website ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	586547205e72e532119e452dbd4f831684a9a4f8
🔍 Latest deploy log	https://app.netlify.com/sites/asyncapi-website/deploys/65cc0aa50bc88b0008befde1
😎 Deploy Preview	https://deploy-preview-2650--asyncapi-website.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

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

[anshgoyalevil]

Thanks for this @vishvamsinh28 but we aren't considering the PRs related to the issue https://github.com/asyncapi/website/issues/1269 since it is now a part of the GSoC'24 Idea https://github.com/postman-open-technologies/gsoc-2024/issues/8

[derberg]

@anshgoyalevil this was not mentioned in the issue. We should always make sure that plans are transparent with others so people do not waste time. GSoC is like in 4 months, does this PR really have to wait? if work is that advanced. I don't see this PR helping solve the messy situation we have in the project 🤔

[anshgoyalevil]

@derberg Yes, I agree with you. I too previously didn't know it was a part of https://github.com/postman-open-technologies/gsoc-2024/issues/8 GSoC idea when I asked @vishvamsinh28 to work on https://github.com/asyncapi/website/issues/1269

Later I was told that "the project idea https://github.com/postman-open-technologies/gsoc-2024/issues/8 is somewhat small according to the timeline, and can accommodate the Dark mode issue too"

Though I agree with you about explicitly mentioning this upstream issue in the GSoC idea description. //@AceTheCreator @akshatnema

[akshatnema]

@anshgoyalevil this was not mentioned in the issue. We should always make sure that plans are transparent with others so people do not waste time.

Yeah, I asked @AceTheCreator to update the issue with more context and information. I'm not sure if he has done it or not.

Regarding this PR, I'm not sure if it is helpful or not because PR itself is failing at build. @vishvamsinh28 will have to fix the bugs if we continues with this PR.

[vishvamsinh28]

@anshgoyalevil this was not mentioned in the issue. We should always make sure that plans are transparent with others so people do not waste time.

Yeah, I asked @AceTheCreator to update the issue with more context and information. I'm not sure if he has done it or not.

Regarding this PR, I'm not sure if it is helpful or not because PR itself is failing at build. @vishvamsinh28 will have to fix the bugs if we continues with this PR.

@akshatnema I'll fix it

[asyncapi-bot]

⚡️ Lighthouse report for the changes in this PR:

Category	Score
🔴 Performance	33
🟢 Accessibility	98
🟢 Best practices	92
🟢 SEO	100
🔴 PWA	33

Lighthouse ran on https://deploy-preview-2650--asyncapi-website.netlify.app/

[vishvamsinh28]

@akshatnema @anshgoyalevil @derberg build fixed please review the pr

[derberg]

If we have it already open I don't see the point of waiting for GSoC. If not this, other things can be added to whatever topic you have there - but this should be done in a transparent way, as comment in the issue that is picked for GSoC, not somewhere inside postman GH org

[quetzalliwrites]

DOCS bugs with current dark mode

1) 🟪 On the docs homepage, the text in the content bucket cards is too dark to read.

2) 🟩 The MIGRATION favicon in the left-hand navigation is too dark to be seen.

3) Throughout the docs, several text sections are now either too dark 🟩 or too light 🟦 , making a subpar reading experience.

4) 🟪 When unselected, the homepage favicon in the left-hand navigation is too dark and cannot be seen.

5) 🟩 When selected, the remaining favicons are too light and cannot be seen clearly against the pastel background colors.

6) 🟩 Adding a grey background box to the docs Table of Contents (TOC) is too heavy-handed and distracting. I would remove it altogether.

7) 🟩 Unfortunately, all mermaid diagrams are affected by the current dark mode; you cannot see any of the arrows.

[vishvamsinh28]

Since there are still bugs to fix in this PR and it has over 60+ files changed, it's hard for even maintainers to review this many files.

So, as Ansh suggested, I'm thinking of making incremental changes. I'll comment out the dark mode toggle button until the final PR, so maintainers can uncomment it and test the changes locally before the final PR.

I'm waiting for Maya's review on this PR; she can provide a good color combination for the areas where the background color and content aren't in good sync.

Wdyt ?

@derberg @akshatnema @anshgoyalevil @Mayaleeeee

[derberg]

@vishvamsinh28 I love the suggestion from @anshgoyalevil

small incremental changes + no need for feature branch ❤️

to make it easier for others to review and provide feedback, you can even add a feature flag that enables dark mode by default. So if I add ?darkmode=true or ?darkmode anywhere to the URL, like https://www.asyncapi.com/docs/tools/generator?darkmode, then I get dark mode enabled.

if you decide to do it this way, you can see how easy it is to parse URL query params as we do it already in tools section -> https://www.asyncapi.com/tools?owned=true&langs=TypeScript

[quetzalliwrites]

I'm just commenting to give this visibility again, I was curious to see where we landed 😺

[vishvamsinh28]

@alequetzalli We are migrating the website from JavaScript to TypeScript, so I'm busy working on its PRs. I'm planning to work on this after the migration is completed, but I'll definitely complete the Dark Mode PR. 😁

[quetzalliwrites]

woot woot and best of luck 🍀