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

feat(theming): add ColorSchemeProvider #1991

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

Conversation

jzempel
Copy link
Member

@jzempel jzempel commented Dec 13, 2024

Description

The following PR adds a ColorSchemeProvider and useColorScheme hook. The provider can be used to 1) determine the user's current theme and 2) persistently update (to localStorage) any color scheme changes made by the user (which override initialColorScheme). The hook is available to child components of <ColorSchemeProvider>:

const { colorScheme, isSystem, setColorScheme } = useColorScheme();

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 the colorSchemeKey prop. Consumers are expected to take the value of colorScheme and modify the root theme accordingly:

<ThemeProvider theme={{ ...theme, colors: { ...theme.colors, base: colorScheme } }}>

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)
  • 🌐 demo is up-to-date (npm start)
  • ⬅️ renders as expected with reversed (RTL) direction
  • ⚫ renders as expected in dark mode
  • 🤘 renders as expected with Bedrock CSS (?bedrock)
  • 💂‍♂️ includes new unit tests. Maintain existing coverage (always >= 96%)
  • tested for WCAG 2.1 AA accessibility compliance
  • 📝 tested in Chrome, Firefox, Safari, and Edge

@coveralls
Copy link

coveralls commented Dec 13, 2024

Coverage Status

coverage: 95.536% (-0.05%) from 95.584%
when pulling 41addfc on jzempel/color-scheme
into a7dc5a4 on main.

@jzempel jzempel changed the title feat(theming): add initialColorScheme to ThemeProvider to configure a color scheme provider feat(theming): add ColorSchemeProvider Dec 20, 2024

<Canvas>
<Story name="ThemeProvider" args={{ theme: DEFAULT_THEME }}>
{args => <ThemeProvider {...args} />}
Copy link
Member Author

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
Development

Successfully merging this pull request may close these issues.

2 participants