fix: darkMode enhanced

[iamayushdas]

Signed-off by: Ayush Das (ayush24das@gmail.com)

Fixes: #291

Changes:

Dark mode fixed and enhanced

Screenshots of the change:

Website change 1

[iamayushdas]

@juzhiyuan @nic-chen have a look

[juzhiyuan]

really dark 😂 how about others?

[iamayushdas]

really dark 😂 how about others?

Is this a positive feedback ?

[Yiyiyimu]

Post my comments here

@iamayushdas Nice! For me, I have some other suggestions. Just take it or leave it with your preferences 😁

1. It might be a good idea to propose a PR, so we could have a more instinctive view of the actual website rather than screenshots
2. For the description part, IMO, we could have a darker background with lighter(whitish) text to be compatible with other parts of the whole website. And still, the background of this part better different from other ones.
3. Grayish title is absolutely great, it's the main part of the dark mode. But the problem is it seems too dark right now so the contract between text and background is not clear enough. A example from DuckDuckGo
   

[Yiyiyimu]

Also it seems you also change some color in the light mode, like the github button, which seems not as good as before.

[juzhiyuan]

@iamayushdas no 😂 I mean we need more contributors review.

[iamayushdas]

@iamayushdas no 😂 I mean we need more contributors review.

Oh okay😅

[iamayushdas]

Also it seems you also change some color in the light mode, like the github button, which seems not as good as before.

Let me acquire what you said😊

[iamayushdas]

@gxthrj @nic-chen need a review on this!

[iamayushdas]

@Yiyiyimu @juzhiyuan @nic-chen @gxthrj
How is it now?
Website change 2

[1502shivam-singh]

@Yiyiyimu @juzhiyuan @nic-chen @gxthrj
How is it now?

Some points -

• Avoid using pure black, like you have used in description section. Hurts eyes when using dark mode, when its actually needed i.e. in dark. Try material design based colors
• Don't grey out the CTA's, like the "View on GitHub" button
• Watch out for the other greyed out buttons like the "subscribe" button. The button and button text contrast is quite low.
• Contrast issues elsewhere in the site

• Something not related to your doing, but some company logos in "Who is using this" section don't have an alpha property, so it looks odd that some have a white background while other don't and they don't mix properly.

Fact is, that the images on the home-page are not yet optimized to fit in a dark mode. Like the design image in description section doesn't look like it belongs to this website in dark mode, because of color differences and all. It even looks as if its cropped out uneven, without any space tbh 😕.

[iamayushdas]

@Yiyiyimu @juzhiyuan @nic-chen @gxthrj

How is it now?

Website change 2

Some points -

• Avoid using pure black, like you have used in description section. Hurts eyes when using dark mode, when its actually needed i.e. in dark. Try material design based colors

• Don't grey out the CTA's, like the "View on GitHub" button

• Watch out for the other greyed out buttons like the "subscribe" button. The button and button text contrast is quite low.

• Contrast issues elsewhere in the site

• Something not related to your doing, but some company logos in "Who is using this" section don't have an alpha property, so it looks odd that some have a white background while other don't and they don't mix properly.

Fact is, that the images on the home-page are not yet optimized to fit in a dark mode. Like the design image in description section doesn't look like it belongs to this website in dark mode, because of color differences and all. It even looks as if its cropped out uneven, without any space tbh 😕.

Okay then will keep your suggestions in mind in next commit

[iamayushdas]

@juzhiyuan @Yiyiyimu @1502shivam-singh
After collectively going through all your reviews above

Website change 3

*Note - tried but unable to figure out how to use styled-components for dark mode via customTheme.css (docusaurus way)

[iamayushdas]

I am recreating that apisix architecture photo with transparent background. For the better of Dark mode legacy

[iamayushdas]

@juzhiyuan @Yiyiyimu @1502shivam-singh after PR attached to issue no - #301 will be merged
we will get true dark mode compatible image that i have promised to create see 😀
Website change 4

[1502shivam-singh]

@juzhiyuan @Yiyiyimu @1502shivam-singh
After collectively going through all your reviews above

*Note - tried but unable to figure out how to use styled-components for dark mode via customTheme.css (docusaurus way)

Nice 👍,
Just one last thing, can you fix the text contrast in the download section and the help section.

[iamayushdas]

@juzhiyuan @Yiyiyimu @1502shivam-singh

After collectively going through all your reviews above

*Note - tried but unable to figure out how to use styled-components for dark mode via customTheme.css (docusaurus way)

Nice 👍,

Just one last thing, can you fix the text contrast in the download section and the help section.

Right now i am figuring out how to deal with that download page styled-components because its not handling in docusaurus way

[1502shivam-singh]

I have got a way to solve your issue, do ask if you are facing any problem.

If I am correct you are facing problem doing this right ? (GIF below, description changing color from black to white)

[iamayushdas]

I have got a way to solve your issue, do ask if you are facing any problem.

If I am correct you are facing problem doing this right ? (GIF below, description changing color from black to white)

Yup, i need your help buddy

[1502shivam-singh]

I have got a way to solve your issue, do ask if you are facing any problem.
If I am correct you are facing problem doing this right ? (GIF below, description changing color from black to white)

Yup, i need your help buddy

The most basic way to do this, that comes to my mind right now is to give the styled components some class and then slide that class property in the customTheme.css with CSS required.

[iamayushdas]

I have got a way to solve your issue, do ask if you are facing any problem.
If I am correct you are facing problem doing this right ? (GIF below, description changing color from black to white)

Yup, i need your help buddy

The most basic way to do this, that comes to my mind right now is to give the styled components some class and then slide that class property in the customTheme.css with CSS required.

i have given it a try, but didn't worked. lemme do it again thanks bud

[1502shivam-singh]

I have got a way to solve your issue, do ask if you are facing any problem.
If I am correct you are facing problem doing this right ? (GIF below, description changing color from black to white)

Yup, i need your help buddy

The most basic way to do this, that comes to my mind right now is to give the styled components some class and then slide that class property in the customTheme.css with CSS required.

i have given it a try, but didn't worked. lemme do it again thanks bud

That's how I did it 😂, how's it not working, check again 🙂

[iamayushdas]

I have got a way to solve your issue, do ask if you are facing any problem.

If I am correct you are facing problem doing this right ? (GIF below, description changing color from black to white)

Yup, i need your help buddy

The most basic way to do this, that comes to my mind right now is to give the styled components some class and then slide that class property in the customTheme.css with CSS required.

i have given it a try, but didn't worked. lemme do it again thanks bud

That's how I did it 😂, how's it not working, check again 🙂

Yep yep😃

[netlify]

Deploy preview for apisix ready!

Built with commit 9d45847

https://deploy-preview-297--apisix.netlify.app

[iamayushdas]

@juzhiyuan @Yiyiyimu @nic-chen @liuxiran
Completed darkmode for apisix-website 😌
here are the changes: (screeshots)

Help page
Team page
Downloads page
Doc page

Waiting eagerly to gift Dark mode to users and devs

[Yiyiyimu]

Looks amazing! Thanks for the contribution!!

[Yiyiyimu]

Something not related to your doing, but some company logos in "Who is using this" section don't have an alpha property, so it looks odd that some have a white background while other don't and they don't mix properly.

Would fix in #303 cc @1502shivam-singh

[iamayushdas]

Something not related to your doing, but some company logos in "Who is using this" section don't have an alpha property, so it looks odd that some have a white background while other don't and they don't mix properly.

Would fix in #303 cc @1502shivam-singh

I was just doing that😞 btw Thanks @Yiyiyimu for this🙂