From ecfcc38db0686d90ef60cde88e0c704925121bc8 Mon Sep 17 00:00:00 2001
From: Siddharth Kshetrapal <siddharthkp@github.com>
Date: Wed, 16 Feb 2022 18:18:45 +0100
Subject: [PATCH 1/6] wip commit

---
 src/ThemeProvider.tsx | 53 ++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 50 insertions(+), 3 deletions(-)

diff --git a/src/ThemeProvider.tsx b/src/ThemeProvider.tsx
index 1c314ff4052..fe74774b128 100644
--- a/src/ThemeProvider.tsx
+++ b/src/ThemeProvider.tsx
@@ -47,21 +47,65 @@ export const ThemeProvider: React.FC<ThemeProviderProps> = ({children, ...props}
 
   // Initialize state
   const theme = props.theme ?? fallbackTheme ?? defaultTheme
+
+  const resolvedColorModePassthrough = React.useRef(
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore of course this doesn't exist on window it's a custom variable
+    typeof window !== 'undefined' ? window.__PRIMER_RESOLVED_SERVER_COLOR_MODE : undefined
+  )
+
   const [colorMode, setColorMode] = React.useState(props.colorMode ?? fallbackColorMode ?? defaultColorMode)
   const [dayScheme, setDayScheme] = React.useState(props.dayScheme ?? fallbackDayScheme ?? defaultDayScheme)
   const [nightScheme, setNightScheme] = React.useState(props.nightScheme ?? fallbackNightScheme ?? defaultNightScheme)
   const systemColorMode = useSystemColorMode()
-  const resolvedColorMode = resolveColorMode(colorMode, systemColorMode)
+  const resolvedColorMode = resolvedColorModePassthrough.current || resolveColorMode(colorMode, systemColorMode)
   const colorScheme = chooseColorScheme(resolvedColorMode, dayScheme, nightScheme)
   const {resolvedTheme, resolvedColorScheme} = React.useMemo(
     () => applyColorScheme(theme, colorScheme),
     [theme, colorScheme]
   )
 
+  // eslint-disable-next-line no-console
+  console.log({
+    colorMode,
+    resolvedColorMode: resolveColorMode(colorMode, systemColorMode),
+    resolvedColorModePassthrough: resolvedColorModePassthrough.current
+  })
+
+  // this effect will only run on client
+  React.useEffect(
+    function updateColorModeAfterServerPassthorugh() {
+      const resolvedColorModeOnClient = resolveColorMode(colorMode, systemColorMode)
+
+      if (resolvedColorModePassthrough.current) {
+        // eslint-disable-next-line no-console
+        console.log('effect running', {
+          resolvedColorModeOnClient,
+          resolvedColorModePassthrough: resolvedColorModePassthrough.current
+        })
+
+        // if the resolved color mode passed on from the server is not the resolved color mode on client, change it!
+        if (resolvedColorModePassthrough.current !== resolvedColorModeOnClient) {
+          window.setTimeout(() => {
+            // eslint-disable-next-line no-console
+            console.log('fixing color mode')
+            // override colorMode to whatever is resolved on the client to get a re-render
+            setColorMode(resolvedColorModeOnClient)
+            // immediately after that, set the colorMode to what the user passed to respond to system color mode changes
+            setColorMode(colorMode)
+          })
+        }
+
+        resolvedColorModePassthrough.current = null
+      }
+    },
+    [colorMode, systemColorMode]
+  ) // Update state if props change
+
   // Update state if props change
   React.useEffect(() => {
     setColorMode(props.colorMode ?? fallbackColorMode ?? defaultColorMode)
-  }, [props.colorMode, fallbackColorMode])
+  }, [props.colorMode, resolvedColorMode, fallbackColorMode])
 
   React.useEffect(() => {
     setDayScheme(props.dayScheme ?? fallbackDayScheme ?? defaultDayScheme)
@@ -86,7 +130,10 @@ export const ThemeProvider: React.FC<ThemeProviderProps> = ({children, ...props}
         setNightScheme
       }}
     >
-      <SCThemeProvider theme={resolvedTheme}>{children}</SCThemeProvider>
+      <SCThemeProvider theme={resolvedTheme}>
+        {children}
+        <script dangerouslySetInnerHTML={{__html: `__PRIMER_RESOLVED_SERVER_COLOR_MODE='${resolvedColorMode}'`}} />
+      </SCThemeProvider>
     </ThemeContext.Provider>
   )
 }

From 17d658aa9b77075ac4b148c0098a31d7dc7e64a1 Mon Sep 17 00:00:00 2001
From: Siddharth Kshetrapal <siddharthkp@github.com>
Date: Thu, 17 Feb 2022 11:30:03 +0100
Subject: [PATCH 2/6] remove demo logs

---
 src/ThemeProvider.tsx | 19 ++-----------------
 1 file changed, 2 insertions(+), 17 deletions(-)

diff --git a/src/ThemeProvider.tsx b/src/ThemeProvider.tsx
index fe74774b128..d8101bb3e14 100644
--- a/src/ThemeProvider.tsx
+++ b/src/ThemeProvider.tsx
@@ -50,7 +50,7 @@ export const ThemeProvider: React.FC<ThemeProviderProps> = ({children, ...props}
 
   const resolvedColorModePassthrough = React.useRef(
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore of course this doesn't exist on window it's a custom variable
+    // @ts-ignore This custom variable does not exist on window because we set it outselves
     typeof window !== 'undefined' ? window.__PRIMER_RESOLVED_SERVER_COLOR_MODE : undefined
   )
 
@@ -65,30 +65,15 @@ export const ThemeProvider: React.FC<ThemeProviderProps> = ({children, ...props}
     [theme, colorScheme]
   )
 
-  // eslint-disable-next-line no-console
-  console.log({
-    colorMode,
-    resolvedColorMode: resolveColorMode(colorMode, systemColorMode),
-    resolvedColorModePassthrough: resolvedColorModePassthrough.current
-  })
-
   // this effect will only run on client
   React.useEffect(
     function updateColorModeAfterServerPassthorugh() {
       const resolvedColorModeOnClient = resolveColorMode(colorMode, systemColorMode)
 
       if (resolvedColorModePassthrough.current) {
-        // eslint-disable-next-line no-console
-        console.log('effect running', {
-          resolvedColorModeOnClient,
-          resolvedColorModePassthrough: resolvedColorModePassthrough.current
-        })
-
         // if the resolved color mode passed on from the server is not the resolved color mode on client, change it!
         if (resolvedColorModePassthrough.current !== resolvedColorModeOnClient) {
           window.setTimeout(() => {
-            // eslint-disable-next-line no-console
-            console.log('fixing color mode')
             // override colorMode to whatever is resolved on the client to get a re-render
             setColorMode(resolvedColorModeOnClient)
             // immediately after that, set the colorMode to what the user passed to respond to system color mode changes
@@ -100,7 +85,7 @@ export const ThemeProvider: React.FC<ThemeProviderProps> = ({children, ...props}
       }
     },
     [colorMode, systemColorMode]
-  ) // Update state if props change
+  )
 
   // Update state if props change
   React.useEffect(() => {

From 4affc1f40c76bdeca1508d4909d0ce23e67cba77 Mon Sep 17 00:00:00 2001
From: Siddharth Kshetrapal <siddharthkp@github.com>
Date: Thu, 17 Feb 2022 12:03:59 +0100
Subject: [PATCH 3/6] Add changelog

---
 .changeset/themeprovider-ssr-auto.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/themeprovider-ssr-auto.md

diff --git a/.changeset/themeprovider-ssr-auto.md b/.changeset/themeprovider-ssr-auto.md
new file mode 100644
index 00000000000..a3c2e2eb7ea
--- /dev/null
+++ b/.changeset/themeprovider-ssr-auto.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Fixes a bug for theming with server side rendering where the output of the server and client mismatch [#1773](https://github.com/primer/react/issues/1773)

From fb41bac4149d865c3708c9b7187721a76fa653db Mon Sep 17 00:00:00 2001
From: Siddharth Kshetrapal <siddharthkp@github.com>
Date: Thu, 17 Feb 2022 12:13:25 +0100
Subject: [PATCH 4/6] Make this feature opt-in

---
 src/ThemeProvider.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/ThemeProvider.tsx b/src/ThemeProvider.tsx
index d8101bb3e14..32f1e9ae270 100644
--- a/src/ThemeProvider.tsx
+++ b/src/ThemeProvider.tsx
@@ -17,6 +17,7 @@ export type ThemeProviderProps = {
   colorMode?: ColorModeWithAuto
   dayScheme?: string
   nightScheme?: string
+  preventServerClientMismatch?: boolean
 }
 
 const ThemeContext = React.createContext<{
@@ -117,7 +118,9 @@ export const ThemeProvider: React.FC<ThemeProviderProps> = ({children, ...props}
     >
       <SCThemeProvider theme={resolvedTheme}>
         {children}
-        <script dangerouslySetInnerHTML={{__html: `__PRIMER_RESOLVED_SERVER_COLOR_MODE='${resolvedColorMode}'`}} />
+        {props.preventServerClientMismatch ? (
+          <script dangerouslySetInnerHTML={{__html: `__PRIMER_RESOLVED_SERVER_COLOR_MODE='${resolvedColorMode}'`}} />
+        ) : null}
       </SCThemeProvider>
     </ThemeContext.Provider>
   )

From b381898bf1dc8522a1e30337d5867ff7b8b3fdbb Mon Sep 17 00:00:00 2001
From: Siddharth Kshetrapal <siddharthkp@github.com>
Date: Mon, 21 Feb 2022 15:52:57 +0100
Subject: [PATCH 5/6] rename + add docs for preventSSRMismatch

---
 docs/content/theming.md | 10 ++++++++++
 src/ThemeProvider.tsx   |  4 ++--
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/docs/content/theming.md b/docs/content/theming.md
index 7fc0840b3bc..f9219f21cb5 100644
--- a/docs/content/theming.md
+++ b/docs/content/theming.md
@@ -176,6 +176,16 @@ function Example() {
 }
 ```
 
+#### `preventSSRMismatch` prop
+
+For usage with server side rendering, it is recommended to pass `preventSSRMismatch` to ensure the rendered output from the server and browser match even when they resolve "auto" color mode differently.
+
+```jsx
+<ThemeProvider colorMode="auto" preventSSRMismatch>
+  ...
+</ThemeProvider>
+```
+
 ### Setting color schemes
 
 To choose which color schemes will be displayed in `day` and `night` mode, use the `dayScheme` and `nightScheme` props on `ThemeProvider` or the `setDayScheme` and `setNightScheme` functions from the `useTheme` hook:
diff --git a/src/ThemeProvider.tsx b/src/ThemeProvider.tsx
index 32f1e9ae270..b1bd76846e7 100644
--- a/src/ThemeProvider.tsx
+++ b/src/ThemeProvider.tsx
@@ -17,7 +17,7 @@ export type ThemeProviderProps = {
   colorMode?: ColorModeWithAuto
   dayScheme?: string
   nightScheme?: string
-  preventServerClientMismatch?: boolean
+  preventSSRMismatch?: boolean
 }
 
 const ThemeContext = React.createContext<{
@@ -118,7 +118,7 @@ export const ThemeProvider: React.FC<ThemeProviderProps> = ({children, ...props}
     >
       <SCThemeProvider theme={resolvedTheme}>
         {children}
-        {props.preventServerClientMismatch ? (
+        {props.preventSSRMismatch ? (
           <script dangerouslySetInnerHTML={{__html: `__PRIMER_RESOLVED_SERVER_COLOR_MODE='${resolvedColorMode}'`}} />
         ) : null}
       </SCThemeProvider>

From 54b3590385afc6d3056dc9428fa308e8bb7961c9 Mon Sep 17 00:00:00 2001
From: Siddharth Kshetrapal <siddharthkp@github.com>
Date: Wed, 23 Feb 2022 12:46:14 +0100
Subject: [PATCH 6/6] copy change for docs

Co-authored-by: Cole Bemis <colebemis@github.com>
---
 docs/content/theming.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/content/theming.md b/docs/content/theming.md
index f9219f21cb5..79faf1cfe8e 100644
--- a/docs/content/theming.md
+++ b/docs/content/theming.md
@@ -178,7 +178,7 @@ function Example() {
 
 #### `preventSSRMismatch` prop
 
-For usage with server side rendering, it is recommended to pass `preventSSRMismatch` to ensure the rendered output from the server and browser match even when they resolve "auto" color mode differently.
+If you are doing server-side rendering, pass the `preventSSRMismatch` prop to ensure the rendered output from the server and browser match even when they resolve "auto" color mode differently.
 
 ```jsx
 <ThemeProvider colorMode="auto" preventSSRMismatch>