-
Notifications
You must be signed in to change notification settings - Fork 90
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
feat(theming): add ColorSchemeProvider
#1991
Open
jzempel
wants to merge
9
commits into
main
Choose a base branch
from
jzempel/color-scheme
base: main
Could not load branches
Branch not found: {{ refName }}
Loading
Could not load tags
Nothing to show
Loading
Are you sure you want to change the base?
Some commits from the old base branch may be removed from the timeline,
and old review comments may become outdated.
Open
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
…re a color scheme provider
jzempel
changed the title
feat(theming): add
feat(theming): add Dec 20, 2024
initialColorScheme
to ThemeProvider
to configure a color scheme providerColorSchemeProvider
jzempel
commented
Dec 20, 2024
|
||
<Canvas> | ||
<Story name="ThemeProvider" args={{ theme: DEFAULT_THEME }}> | ||
{args => <ThemeProvider {...args} />} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I realize this is currently empty – the Story
was needed to get generated API docs. We can fill it with something meaningful in the future if/when 💡 strikes
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.
Description
The following PR adds a
ColorSchemeProvider
anduseColorScheme
hook. The provider can be used to 1) determine the user's current theme and 2) persistently update (tolocalStorage
) any color scheme changes made by the user (which overrideinitialColorScheme
). The hook is available to child components of<ColorSchemeProvider>
:Any attempt to invoke the hook outside of this context will result in an error. The
localStorage
key defaults to'color-scheme'
but can be customized with thecolorSchemeKey
prop. Consumers are expected to take the value ofcolorScheme
and modify the root theme accordingly:Detail
I took a few swings at the API and feel like it ended up in a good place – balancing leverage with flexibility. But please view with a critical eye and provide feedback 🙏
Checklist
design updates will be Garden Designer approved (add the designer as a reviewer)npm start
)renders as expected with reversed (RTL) direction?bedrock
)tested for WCAG 2.1 AA accessibility compliance