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

Feature: Dark mode #1480

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
Open

Conversation

laine-hallot
Copy link
Contributor

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
npm-doc-dark-mode-demo-desktop

Code theme demo:
npm-doc-dark-mode-code-demo

Persistence:
npm-doc-dark-mode-persistance-demo

Mobile:
npm-doc-dark-mode-demo-mobile

References

Closes #839

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.

feat: add dark mode support
1 participant