Open
Conversation
949255b to
f1e714e
Compare
Contributor
|
This is quite a helpful PR (at least for my eyes). May we follow through with it? 🙏 |
Contributor
Author
|
@leobalter sorry to ping you, this PR has just been open for a few months and I wasn't sure if anyone even saw it at this point. |
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.
Info
This PR adds a way to change the site's color mode between light and dark. The features been requested a couple times before and it just seemed like a nice thing to have.
Dev Notes
I just had it use the default
darktheme from@primer/reactfor dark/night mode since it seemed like the project more or less uses the default light theme save for a red accent color. I did try using that accent color in dark mode but I felt like the contrast just wasn't good enough so I left it as the default blue accent color.This PR also adds a couple hooks deal with switching the color mode.
useColorPreference()This hook handles changing the theme context's
colorModeas well as setting the selected value in localStorage.Since the value in localStorage and the theme context are separate and there's no guarantee that every call of the hook is happening in the same theme context the hook accepts a parameter to change the prefix for key in local storage which at least gives you a way to call
useColorPreferencein multiple theme context without them overwriting each other's localStorage values.You can still overwrite one context's localStorage value with another's if you call
useColorPrefrenceusing same prefix value.usePrismTheme()This one just checks what the effective color mode is for the current theme context and returns a Prism theme. I set it to use
vsDarkfor dark/night mode since that seems like the default for Prism.Screenshots
Color demo

Code theme demo:

Persistence:

Mobile:

References
Closes #839