Added Support for Dark Mode 🌙

[MathurAditya724]

Issue - #1006

• Added CSS Variables for managing the colors
• Changes mode based on the user's color preference
• Added spacing between the sponsor text and the content 😮‍💨

I have changed the color scheme according to my taste. Feel free to change it or let me know if any more changes are required.

[vercel]

@MathurAditya724 is attempting to deploy a commit to the Package Phobia Team on Vercel.

A member of the Team first needs to authorize it.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
packagephobia	✅ Ready (Inspect)	Visit Preview	Nov 1, 2023 11:44pm

[styfle]

This background looks too dark in light mode

• Before
• After

[styfle]

Maybe we can change it to use something like this design:

https://vercel.com/design/input#prefix-and-suffix

[MathurAditya724]

I have made all the requested changes, please have a look

[styfle]

@MathurAditya724 I'm still seeing the dark gray input instead of white.

Also the search icon is hard to see.

https://packagephobia-git-fork-mathuraditya724-main-packagephobia.vercel.app/result?p=satori

Can you ensure that the light mode colors are not changed from the original here:

https://packagephobia.com/result?p=satori

[MathurAditya724]

Some silly mistake on my end 😅, please have a look

[MathurAditya724]

All good?

[styfle]

@MathurAditya724 Light mode looks good now 👍

---

However, dark mode has the colors flipped in the bar chart.

Can we keep the darker shade of green on the bottom?

[MathurAditya724]

This commit should resolve this issue

[styfle]

Great, thanks! 🎉

[XhmikosR]

@styfle just wondering, wouldn't it make more sense if the new CSS file was inlined too?

[styfle]

I'm starting to think inlining is not the right solution since it can't be cached between page navigations.

[XhmikosR]

That makes sense too, as long as you move all CSS to an external site.

That being said, you need cache busting along with proper cache headers, and preload if you don't want to use a blocking CSS. Your call, I just noticed the inconsistency and it's easier to just inline the newly added selectors like the rest.