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;. All BEM components and pages use token for colors 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.

[doup]

@cart dark-mode now should look the same as main.

Light-mode will be enabled only for: Getting Started, Migration Guides, Contributing Guide and Errors. News light-mode was started, but must be finished & activated in another PR.

[krunchington]

is this no longer used?

[doup]

I couldn't find any instance of this being used, I think it's a feature no one knows about.

[krunchington]

Left a few comments but overall the restructuring totally makes sense. The stepwise approach with the intersection of class and media queries is also great.

[cart]

Yup the palette looks good to me now! You've made inline code blocks "squarer". I prefer the "rounder" style / I think it fits our vibes more. Can you revert that?

Additionally, the text in the headerbar is still pure white. Can you switch back to the slightly off-white color?

[doup]

I fixed the reported issues and found a couple of extra more. I think now it's done… 🤞🤞🤞

[krunchington]

Changes look good to me

[krunchington]

Leaving my approval, the css changes look well scoped to not cause issues with the current experience, and allow the gradual rollout of the media query based preference. I'd still defer to actual maintainers for approval of the color/style values.

[cart]

Haha ok one more change and then we're good to merge: the cards on the Donate page no longer use the standard card background color. Can you switch that back?

[doup]

🙈🙈🙈🙈🙈🙈

I just pushed final-light-mode.v4.definitive-NOW-FOR-REAL.pr… maybe it's ready, maybe not. Schrodinger PR.

---

A new bg-color rule slipped for the donate cards, now removed. I've also fixed a couple of issues with the link colors in light-mode.

[cart]

We're good to go now. Thanks for bearing with me!

[lynnpepin]

Yay!! This might technically be cosmetic but this is my most highly anticipated Bevy feature :D Thank you so much for all this hard work, I'm excited to see this on the Bevy website

[doup]

No problem @cart, the PR had out of scope changes.