Light mode in selected sections

[doup]

This PR builds on top of #1603 and hence on the huge effort spearheaded by @lynnpepin.

There are some changes though:

• Synced with latest main commit.
• Changed how CSS variables are used to a more semantic approach. We have variables ("tokens") for different BEM components, and depending on light/dark theme we change the colors assigned to these. We don't alter the color anymore. So no more color redefinition: --color-white: #000;.
• Introduces a couple of color palettes: neutral and blue. I'm not very happy with either one (specially the blue one), but it's good enough for now.
• And the most important change, light theme is only enabled on selected templates of the web page. Cart raised his concerns in Discord about the quality difference between the light and dark themes so we opted for this more gradual approach. For now it's only applied to docs.html which means that the quickstart, book, contributing guide and migration guides will show the light theme IF the user prefers light themes.
  • To enable light mode in a template we only need to add the following line in any Tera template that extends layouts/base.html. This will add the light-mode class to the <html/> element.

  {% block theme %}light-mode{% endblock theme %}

bevy-maybe-light-mode.mp4

[alice-i-cecile]

Marked as controversial, not because I think anyone has any objection, but because I know @cart will have opinions on the palette etc. I think it looks really nice :)

He's heads-down in BSN work right now though, so it may be a while until you get a review.

[lynnpepin]

I really like this!! Definitely a big improvement haha :)

I've rebuilt the docs from the latest commit and I'm hosting the latest version here, for anyone who would like to demo it: https://bevydocs.lynndotpy.dev/

[lynnpepin]

And the most important change, light theme is only enabled on selected templates of the web page. Cart raised his concerns in Discord about the quality difference between the light and dark themes so we opted for this more gradual approach. For now it's only applied to docs.html which means that the quickstart, book, contributing guide and migration guides will show the light theme IF the user prefers light themes.

I'd like to suggest that the code examples (everything under examples/) also gets in line for an optional light-theme. I think these are just as important as the rest of the documentation, but are effectively unusable on the Bevy site.

(Lower priority, since the "View on GitHub" button takes you to the source, and GitHub has good chops around light/dark preferences.)

Thank you again for taking on this effort :)