-
Notifications
You must be signed in to change notification settings - Fork 333
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Light mode for Bevy website -- draft PR #1603
Draft
lynnpepin
wants to merge
19
commits into
bevyengine:main
Choose a base branch
from
lynnpepin:main
base: main
Could not load branches
Branch not found: {{ refName }}
Loading
Could not load tags
Nothing to show
Loading
Are you sure you want to change the base?
Some commits from the old base branch may be removed from the timeline,
and old review comments may become outdated.
Draft
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
TrialDragon
added
C-Feature
A new feature, making something new possible
C-Accessibility
A-Meta
C-Webdev
C-Usability
labels
Aug 19, 2024
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Labels
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 :)