feat(theme): final re-brand

[kiaking]

• close No contrast of code on table row in light theme #2610

The final re-branding before going RC. The VitePress brand is now aligns with Vite.

I have tweak mostly the CSS vars but tiny other parts that I wonted adjust a bit. Now we have 2 separate colors for Light/Dark mode. We should be eliminate a11y problems we have or would have in the future.

• Add social preview images

---

[brc-dd]

updated some stuff to improve perf 🚀

[kiaking]

Thanks for the tweak! I don't know why but I converted png to webp and it got even smaller (33kb) so I've replaced it with that 🤔 And fixed some border color issue on CSS var.

[zonemeen]

Great great great job! Look so cool !👀

[brc-dd]

I don't know why but I converted png to webp and it got even smaller (33kb)

Yeah, I too expected it to be smaller. But pixelmator generated that 50 kB or something.

I think we can merge this. Looks nice to me! ✨

[Lehoczky]

Shall we adjust the text color for the danger containers (--vp-custom-block-danger-text) to meet the AA contrast ratio?

I found the following suggestions using chrome devtools, that are very close to the current color:

• for dark theme: #ff4666 instead of #f43f5e
• for light theme: #cd354f instead of #f43f5e

Right now we use the same color for both light and dark themes, but unfortunately there is no shade of red which meets the AA contrast requirement for both themes:

First picture is for dark, second is for light theme.

[brc-dd]

@kiaking close #2119 as well if the container colors are adjusted 🙌

PS: we can also pick base colors from https://www.radix-ui.com/colors, their grouping seem to yield 5-10 contrast ratio (use 9/10/11 for text, 1/2 for bg, toggle dark/light - they are overidden)

[userquin]

@brc-dd do we have some codeblock inside ::: <tip|info|warning|error> in the playground? We should check color constrast, something like this https://vite-pwa-org.netlify.app/guide/auto-update.html#automatic-reload.

[brc-dd]

do we have some codeblock inside ::: <tip|info|warning|error> in the playground?

By playground, do you mean e2e tests? There aren't a11y checks there right now. We can add those, but currently they will fail. They shouldn't be necessary IMO, we won't later be changing the colors much.

[userquin]

I mean, with a simple visual test via dev tools, there is no need to add a11y tests

[brc-dd]

What's the playground? The deploy preview https://deploy-preview-2727--vitepress-docs.netlify.app/guide/markdown#custom-containers ?

[kiaking]

Added social preview image 👍