Skip to content
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

CSS-based dark mode #325

Merged
merged 12 commits into from
May 15, 2020
Merged

CSS-based dark mode #325

merged 12 commits into from
May 15, 2020

Conversation

davidcorry
Copy link
Contributor

This creates a new CSS-based dark mode that automatically responds to the device's preferred mode. This fixes #317, #233, and should close #70.

I came up with the color scheme myself, trying to make it an appropriate match to the light theme. I'm totally open to changes. One advantage of this method is that it's really easy to update colors.

Since there's no more need for darkmode.js, the one downside is that there's not a toggle button for folks who want to override which color scheme gets used, but it's entirely possible to set up a button again. If there's interest in that, I can figure something out!

The one thing I want to note is that there's a lot of different shadow color values - I thought about simplifying these, but ended up just leaving them in for now.

Here's some pics of what it looks like:

image

image

@theRTC204
Copy link
Collaborator

I haven't done a full review yet, but I am definitely in favor of swapping darkmode.js out for a pure CSS dark mode.

That being said, prefers-color-scheme is still a very new media query, and while widely supported in the latest versions, it only goes back about 8-9 months for some browsers.

https://caniuse.com/#search=prefers-color-scheme

Before this is merged I would like to see a few enhancements.

  • A button to toggle for personal preference and/or users on devices that don't have a system level dark mode (upon which this media query is based)
  • Maintain the user preference in Local Storage, which is the default value, that falls back to the device preference if LS has no value

@davidcorry
Copy link
Contributor Author

davidcorry commented May 4, 2020

Alright: I added a drop down menu beneath the language selector that lets users specify their theme. I also set it up in a way that it's easy to add additional themes, if we were to come up with more accessible options. (See #254)

I don't have a device / browser currently that doesn't support dark mode, but I'm fairly confident that it handles that situation properly.

image

@davidcorry
Copy link
Contributor Author

I found an old copy of Firefox on my computer, so I was able to test browsers that don't support automatic switching - all good. Just had to make a quick update since it wasn't loading the strings.

Copy link
Owner

@mikebryant mikebryant left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks good, thank you :)

@mikebryant mikebryant merged commit a07c34c into mikebryant:master May 15, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

(Minor)(UI) Margin discrepancy between light and dark mode Dark Mode
3 participants