From 510da405c800376034658cede4dd1118dcb5f14a Mon Sep 17 00:00:00 2001
From: Siddharth Kshetrapal <siddharthkp@github.com>
Date: Tue, 26 Apr 2022 16:17:49 +0200
Subject: [PATCH 1/3] disable theme decorator for themeprovider story

---
 .storybook/preview.js                 |  3 +++
 src/stories/ThemeProvider.stories.tsx | 24 ++++++++++++++++++++----
 2 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/.storybook/preview.js b/.storybook/preview.js
index 7a45a2396fc..2e6b81c7da9 100644
--- a/.storybook/preview.js
+++ b/.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>
diff --git a/src/stories/ThemeProvider.stories.tsx b/src/stories/ThemeProvider.stories.tsx
index 1e927de7534..350fee131f3 100644
--- a/src/stories/ThemeProvider.stories.tsx
+++ b/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>
+  )
 }

From 135808b314c9dbb0185b8742463ce4f59c2b8e40 Mon Sep 17 00:00:00 2001
From: Siddharth Kshetrapal <siddharthkp@github.com>
Date: Tue, 26 Apr 2022 16:17:57 +0200
Subject: [PATCH 2/3] remove incorrect effect

---
 src/ThemeProvider.tsx | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/ThemeProvider.tsx b/src/ThemeProvider.tsx
index 1162d939f7e..de34daecbd6 100644
--- a/src/ThemeProvider.tsx
+++ b/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])

From 4e65198748827a4505a653a89d682dec99586c08 Mon Sep 17 00:00:00 2001
From: Siddharth Kshetrapal <siddharthkp@github.com>
Date: Tue, 26 Apr 2022 16:30:12 +0200
Subject: [PATCH 3/3] Create wicked-boats-allow.md

---
 .changeset/wicked-boats-allow.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/wicked-boats-allow.md

diff --git a/.changeset/wicked-boats-allow.md b/.changeset/wicked-boats-allow.md
new file mode 100644
index 00000000000..0a3c118c716
--- /dev/null
+++ b/.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.