Dark mode support#3877
Open
thatbudakguy wants to merge 2 commits into
Open
Conversation
Member
|
can we just do this: @media (prefers-color-scheme: dark) {
:root {
--bs-body-color: white;
--bs-body-bg: darkgray;
/* etc. etc. */
}
}
}And not have a switcher? |
Member
Author
|
That's what the "auto" mode in the switcher does – we could also make that the default instead of light? In general I think the approach of just detecting the user's browser/OS preference is fine, but I've heard that it doesn't work for everyone – some people want to be able to control that preference on a per-app basis, because the main content of the app affects how they read (is it a long page of text? are there lots of fiddly UI elements? etc). Enabling it without a switcher could also lead to confusion if someone gets the dark theme but doesn't know why and can't opt back into the light theme. |
This adds a new component to the main navbar for switching between themes, based on Bootstrap's docs and provided example for how to implement a dark mode toggle. Also adds related JavaScript for detecting and saving the user's preference in localStorage, and updating the switcher to indicate which theme is active.
This tweaks the existing styles to handle cases where colors were not set up to handle dark mode. Also replaces the logo image with two SVG versions; one light and one dark.
This file contains hidden or 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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Add dark mode theme switcher
This adds a new component to the main navbar for switching between
themes, based on Bootstrap's docs and provided example for how
to implement a dark mode toggle.
Also adds related JavaScript for detecting and saving the user's
preference in localStorage, and updating the switcher to indicate
which theme is active.
Update styles for dark mode compatibility
This tweaks the existing styles to handle cases where colors
were not set up to handle dark mode.
Also replaces the logo image with two SVG versions; one light
and one dark.