Light and dark mode switch

[TrialDragon]

It would be a useful QoL feature for our users to be able to change from the dark mode to a light mode integrated into the site.

Origin: https://github.com/bevyengine/bevy-website/issues/3#issuecomment-1630313919

[Evrey]

It would be even better if the website just automatically changed its palette to light mode via the standard CSS @media prefers-color-scheme rule. +1 to this issue. I only visit the Bevy website with custom Stylus rules to turn it light.

[lynnpepin]

@TrialDragon , I was looking into this, and I wanted your thoughts:

This can be done, and the best way to do it would be using CSS variables (which can respond dynamically to @media prefers-color-scheme), instead of SCSS variables (which are pre-processed into CSS).

To be specific, the Bevy website currently uses SCSS variables (see https://github.com/bevyengine/bevy-website/blob/main/sass/_vars.scss) which are pre-processed into CSS variables. E.g.

$subtitle-color: #999;

Because SCSS is only a pre-processor, these variables can't respond dynamically to @media prefers-color-scheme, e.g. with CSS variables, e.g.:

:root {
    @media (prefers-color-scheme: dark) {
        --subtitle-color: #999;
    }
    @media (prefers-color-scheme: light) {
        --subtitle-color: #777;
    }
}

I currently use CSS variables inside SCSS on my Zola-based blog to get auto light mode / dark mode (example: https://github.com/lynnpepin/lynndotpy_xyz/blob/main/sass/color/auto.scss). It works like a charm :D

Proposal: I was going to go through and replace the SCSS color variables with CSS variables, to respect prefers-color-scheme. I'll make a PR and link to this issue... But if anyone has a big objection to replacing SCSS variables with CSS variables, please let me know before I get too far, haha :)

[TrialDragon]

But if anyone has a big objection to replacing SCSS variables with CSS variables, please let me know before I get too far, haha :)

I, personally, don't have any issue with using CSS variables instead of SCSS variables to be honest; I'm not even entirely sure why we used SCSS variables to begin with beyond we were writing SCSS, ergo, use SCSS variables.

[lynnpepin]

Awesome, happy to hear that :) I was able to spend a good few hours on this.

Re: SCSS variables, the only place SCSS variables were used were in a few lighten and darken calls. (CSS has that functionality as of 2023, e.g. color(var(--some-color) from srgb calc(r + 10%) calc(g + 10%) calc(b + 10%)), but SCSS doesn't support CSS calc, because calc was already an SCSS keyword...).

So, I pre-calculated the lighten and darken calls instead, and assigned them to variables! They should be off by no more than one bit due to rounding.

My fork is here: https://github.com/lynnpepin/bevy-website

There are a few outstanding issues though:

• [ ] There are a few inline colors that don't respond to prefers-color-scheme yet.
• [ ] The images are made for dark-mode and will need alternatives. This can be fixed by making them <picture>s which respond to prefers-color-scheme.
  • See this StackOverflow post, and MDN for <picture>
• [x] I haven't touched every accent, such as color-pink,
• [x] Code highlighting will need some attention (it's got its own block of colors).

Also, I kept the variable naming the same, but that means we have examples like --color-white: #090909; in light mode. Here are a few pics of how it looks so far:

[lynnpepin]

I'm not so deft at manipulating SVGs. Gonna take a crack at making inverted versions of the SVGs (i.e. a bevy-logo-light.svg for the existing bevy-logo-dark.svg). If anyone wants a PR for light/dark mode ready faster, it would be a huge help :D

[Evrey]

The images are made for dark-mode and will need alternatives.

A temporary work-around if logo images take too much time is to draw a box around all bright images. Here’s how that looks with my custom CSS:

(Well, it ain’t pretty, but iunno how much man power’s available for image editing.)

Probably the best solution is to edit the SVGs into having a thick black border around all shapes. In dark mode you just don’t see the borders, in light mode it’ll look outlined like many sprite-based games do for foreground objects.

[lynnpepin]

The images are made for dark-mode and will need alternatives.

A temporary work-around if logo images take too much time is to draw a box around all bright images. Here’s how that looks with my custom CSS:

I like this! I was able to figure out two workarounds:

• I made a quick Python script to take SVGs and invert every hex code inside, and
• Some places that already use CSS filter can have the prefers-color-scheme applied.

In the interest of getting feedback, I have a WIP build of the site with the new theme here! https://bevydocs.lynndotpy.dev/

Each image needs to be addressed individually, so I'm working on that bit by bit :)

[lynnpepin]

Working on the images and whatnot right now! Don't want to run into any duplication of work. Going to try and finish them up today and get the site updated for it

[lynnpepin]

Update: I have the light theme complete! But I'll also be creating a Javascript toggle, which will be another Whole Thing (tm) of work :)

For now, please please check out the preview here, and @ me if there's anything that looks ugly or bad or otherwise improvable :) https://bevydocs.lynndotpy.dev/