ThemeProvider: Fix theme sync with system settings (#2048)

* disable theme decorator for themeprovider story

* remove incorrect effect

* Create wicked-boats-allow.md

Co-authored-by: Mike Perrotti <[email protected]>

Author: siddharthkp

.changeset/wicked-boats-allow.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+ThemeProvider: Bug fix, in `colorMode=auto`, the theme now syncs with system changes.

.storybook/preview.js

@@ -71,6 +71,9 @@ export const globalTypes = {
 
 // context.globals.X references items in globalTypes
 const withThemeProvider = (Story, context) => {
+  // used for testing ThemeProvider.stories.tsx
+  if (context.parameters.disableThemeDecorator) return <Story {...context} />
+
   if (context.globals.colorMode === 'all') {
     return (
       <Wrapper>

src/ThemeProvider.tsx

@@ -101,10 +101,6 @@ export const ThemeProvider: React.FC<ThemeProviderProps> = ({children, ...props}
     setColorMode(props.colorMode ?? fallbackColorMode ?? defaultColorMode)
   }, [props.colorMode, fallbackColorMode])
 
-  React.useEffect(() => {
-    setColorMode(resolvedColorMode)
-  }, [resolvedColorMode])
-
   React.useEffect(() => {
     setDayScheme(props.dayScheme ?? fallbackDayScheme ?? defaultDayScheme)
   }, [props.dayScheme, fallbackDayScheme])

src/stories/ThemeProvider.stories.tsx

@@ -8,6 +8,7 @@ import {createGlobalStyle} from 'styled-components'
 export default {
   title: 'Generic behaviors/ThemeProvider',
   component: ThemeProvider,
+  parameters: {disableThemeDecorator: true},
   argTypes: {
     theme: {
       table: {
@@ -97,8 +98,23 @@ export const Nested: Story<ThemeProviderProps> = args => {
   )
 }
 
-Nested.args = {
-  colorMode: 'day',
-  dayScheme: 'light',
-  nightScheme: 'dark_dimmed'
+const AutoContents = () => {
+  const {colorMode, resolvedColorMode} = useTheme()
+
+  return (
+    <Box sx={{padding: 10, backgroundColor: 'canvas.inset', color: 'fg.default'}}>
+      colorMode: {colorMode} <br />
+      resolvedColorMode: {resolvedColorMode} <br />
+    </Box>
+  )
+}
+
+export const Auto = () => {
+  return (
+    <ThemeProvider colorMode="auto">
+      <BaseStyles>
+        <AutoContents />
+      </BaseStyles>
+    </ThemeProvider>
+  )
 }