Change from nightMode to theme #1532
Merged
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
Instead of a boolean theme (dark or not), change to a generic 'theme' setting. This keeps backwards-compatibility from older settings. The new themes are 'dark' and 'light' and 'system'. 'system' will allow for the user's OS to apply darkMode automatically depending on their system settings. Null and 'system' are treated as the same. 'dark' and 'light' will ignore OS settings. This also introduces reactivity from the OS's changing `prefers-color-scheme`, for example if your system is set to go into dark mode at sunrise, then the browser will switch to `prefers-color-scheme: dark`. Before this commit, the theme would not react to this change until page reload. Now, it will watch for media changes and apply the dark theme if appropriate.
dbernheisel
commented
Mar 9, 2022
Comment on lines
-4
to
-7
| .night-mode-toggle .icon-theme::before { | ||
| content: "\e901"; | ||
| } | ||
|
|
There was a problem hiding this comment.
this seems to be unused.
dbernheisel
force-pushed
the
support-multiple-themes
branch
from
6a3c6a6 to
e32086e
Compare
dbernheisel
force-pushed
the
support-multiple-themes
branch
from
948c605 to
e8d956c
Compare
|
💚 💙 💜 💛 ❤️ |
|
Hi @dbernheisel! I have one improvement to suggest. The |
|
@josevalim I agree and that sounds good. I'll see if I can make that happen |
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.
Currently, if you have set nightMode to true, there's not a way to go back and use the OS system default. Turning nightMode off will set it to false (not null). There's a hidden third setting of null that a user can't back to without clearing their localStorage.
Instead of a boolean nightMode (dark or not), change it to a 'theme' setting. The new themes are 'dark' and 'light' and 'system'. 'system' will allow for the user's OS to apply nightMode automatically depending on their system settings. Null and 'system' are treated as the same. 'dark' and 'light' will ignore OS settings. This keeps backwards-compatibility from older settings. The themes themselves are unchanged, however I did change verbiage from "night mode" to "dark mode"; there's technically a difference-- night mode is typically associated with removing blue light to help folks prepare to sleep, whereas dark mode is associated with not making eyes bleed with bright whites.
This also introduces reactivity from the OS changing
prefers-color-scheme, for example if your system is set to go into night mode at sunset, then the browser will switch toprefers-color-scheme: dark. Before this commit, the theme would not react to this change until page reload. Now, it will watch for media changes and apply the dark theme if appropriate.Plus, this allows for implementing additional themes in the future, like a Windows 95 theme or perhaps a way to dynamically set it based on whether it's an erlang module or a gleam module.
This is inspired by Tailwind's guide to dark mode: https://tailwindcss.com/docs/dark-mode
Demo
theme-demo-exdocs-720.mov