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
dark
theme from@primer/react
for 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
colorMode
as 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
useColorPreference
in 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
useColorPrefrence
using 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
vsDark
for dark/night mode since that seems like the default for Prism.Screenshots
Color demo

Code theme demo:

Persistence:

Mobile:

References
Closes #839