feat: add dark mode for website #2650
Conversation
vishvamsinh28
requested review from
derberg,
akshatnema,
magicmatatjahu,
anshgoyalevil,
Mayaleeeee and
asyncapi-bot-eve
as code owners
✅ Deploy Preview for asyncapi-website ready!Built without sensitive environment variables
To edit notification comments on pull requests, go to your Netlify site configuration. |
|
Thanks for this @vishvamsinh28 but we aren't considering the PRs related to the issue #1269 since it is now a part of the GSoC'24 Idea https://github.com/postman-open-technologies/gsoc-2024/issues/8 |
|
@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 🤔 |
|
@derberg 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. |
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 |
|
⚡️ Lighthouse report for the changes in this PR:
Lighthouse ran on https://deploy-preview-2650--asyncapi-website.netlify.app/ |
|
@akshatnema @anshgoyalevil @derberg build fixed please review the pr |
derberg
changed the title
|
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 |
There was a problem hiding this comment.
Thanks. The changes look neat. There are some areas that need improvements like the tools/cli.
You can create incremental PRs.
For example,
- You can comment out the Dark Mode toggle so that we (as the reviewers) can un-comment it locally and test the changes. This would ensure that dark mode is not accessible to end users as of now. This would also ensure we don't push a large code change to production.
- After that, you can create PRs for each page, or some pages like all tools pages, or the homepage, etc. This would help us in reviewing as at that time we would know which page to look for.
DOCS bugs with current dark mode1) 🟪 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.
|
|
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 ? |
|
@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 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 |
|
I'm just commenting to give this visibility again, I was curious to see where we landed 😺 |
|
@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. 😁 |
|
woot woot and best of luck 🍀 |
|
@vishvamsinh28 what's the status? |
|
@sambhavgupta0705 I'm currently busy with my gsoc project so most likely i will start working on it after gsoc if someone is not working on it @sagarkori143 you start working on it if your interested since I'm busy with gsoc you can refer this PR because I have completed more then 50% of work with this PR I only need to fix some bugs you can have a look at reviews done by maintainers above also as Ansh suggested make incremental changes |
|
OK @sagarkori143 you can start working on this |
|
Closing this as unplanned |
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