Light mode for Bevy website -- draft PR #1603
Draft
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Background: Light mode as an accessibility necessity.
Hi! I'm an enthusiastic new user to this Bevy, but I've hit a small roadblock: The docs are light-on-dark! (I.e. dark mode).
I have astigmatism, which is making it difficult to read and use the docs (e.g. https://bevyengine.org/learn/quick-start/introduction/ ) because of its dark theme. Here's a relevant StackOverflow post regarding the merits of dark vs light theme.
Readers don't have good options to mitigate this. Readers can use this client-side with a "Reader" tool, but not all browsers have this. Readers can also use a theming extension, but these are a security concern for requiring permissions on all websites, and not all browsers have an extension system.
Referenced in issue 974 and duplicates, I hope adding light mode can bring more birds into the Bevy :)
New work: Light mode theme
So, I modified the Bevy website theme (rather extensively), with two primary changes:
@media (prefers-color-scheme: ...)
such that the theme will respond to system light/dark mode settings, and@media (prefers-color-scheme
.filter
and backgrounds creatively, with the intention of not requiring maintainers to double their work (e.g. when creating header images.)One outstanding piece of work for lightmode is rewriting the syntax-highlighting. I didn't touch this, instead opting to keep all the code as dark-on-light. This might be worth another PR down the line.
I'm hosting my fork of the themes on my site, at bevydocs.lynndotpy.dev/. Turn your system to light mode and visit the site to see the new theme!
Outstanding task: Theme toggler
There is one change I have not made yet, but was requested before merging: Putting light mode behind a toggle. This makes an outstanding task, which will have two parts:
Regarding implementation, this will be a bit difficult because, as it turns out, JavaScript can't toggle
prefers-color-scheme
on the webpage. (Woops! Would save time if I thought ahead to check this.)The intention is for the toggler to mostly follow the behavior of the docs.rs theme toggler, with the exception of defaulting to dark-mode. (Docs.rs defaults to system preference.)
For branding / consistency, the Bevy instead would like dark mode to be the default. In order to allow the Bevy to enjoy full functionality even without Javascript, that means an implementation detail: The true default will still be "follow system preferences", but that will be overwritten by Javascript on load, which will set it to dark mode (unless the user has already set a preference).
Functionally, most users in the Bevy will see this as dark-mode-by-default.
So, the toggle will need these specifications:
localStorage
.This sounds obvious, but it is possible to make a mistake with this in implementation.
I've done no work on the toggler yet, so, there will be a lot of that before this PR.
Screenshots and preview:
I host a preview of this lightmode at
bevydocs.lynndotpy.dev
! Please check it out, please critique vociferously :)