feat(theme): refine overall styles

[kiaking]

close #1049

Organize and refine entire styles toward a stable release. I'm hoping this would be the last big breaking change on CSS variables.

I've tested with Vite site and it worked without modifying Vite's themes, so I think this is fairly safe, but users who do heavy customization might encounter coloring issues.

CSS Variable adjustment

I wanted to pay extra attention to reducing CSS variables so that it's easier for users to tweak the stylings.

I've almost entirely eliminated the need for .dark scoping. 99% (maybe 90%...) of stuff should work only by adjusting branding colors and no .dark override should be needed.

Adjusted the tone

I needed to adjust the tone of the design a bit to make single color work on both light and dark modes. I went to several docs sites like Laravel and others and adjusted the overall theme to be a bit darker, cooler (add a little bit of blue), and slightly higher contrast.

Nav adjustment

• Restructured VPNav so that it fills the entire page width for easier Nav styling.
• Removed blued background effect, and instead added fader same as we have at bottom of the aside section for docs.
  • With this change, now Home Hero background gradient will not be cut off via nav.
• Set same height on both mobile and desktop for simplicity.

---

@brc-dd Could you go through several random pages to see if I didn't break anything? I've tested with Vite sites, and everything seems to be working including sponsors and team sections.

---

[brc-dd]

Looks great to me!

[brc-dd]

Hey, might wanna update this component too: https://github.com/vuejs/vitepress/blob/main/docs/components/ModalDemo.vue