diff --git a/package-lock.json b/package-lock.json
index 4f2a50a441..30b32046b8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,7 +11,7 @@
         "@primer/css": "^19.4.0",
         "@primer/octicons": "17.0.0",
         "@primer/octicons-react": "17.0.0",
-        "@primer/react": "^34.6.0",
+        "@primer/react": "^34.7.1",
         "@react-aria/ssr": "^3.1.0",
         "accept-language-parser": "^1.5.0",
         "ajv": "^8.9.0",
@@ -3603,9 +3603,9 @@
       "integrity": "sha512-+Gwo89YK1OFi6oubTlah/zPxxzMNaMLy+inECAYI646KIFdzzhAsKWb3z5tSOu5Ff7no4isRV64rWfMSKLZclw=="
     },
     "node_modules/@primer/react": {
-      "version": "34.6.0",
-      "resolved": "https://registry.npmjs.org/@primer/react/-/react-34.6.0.tgz",
-      "integrity": "sha512-a0Mh6YmpEyQF6ad0mnfOJoC+y1heDM4uuvBcQQKJQ28DVeif5mn+slCD2C9ZQvnhkl4qnh3iqXOTxmKN5fCHNQ==",
+      "version": "34.7.1",
+      "resolved": "https://registry.npmjs.org/@primer/react/-/react-34.7.1.tgz",
+      "integrity": "sha512-9OLRo3N1/B/jqb7aJPY7xmtyKM8afZlmWLnEOmT8LOCmuwPiRXI+4GsJjaV9RPx3h8rUXBQwpaYZGDDj9+/OjA==",
       "dependencies": {
         "@primer/behaviors": "1.1.0",
         "@primer/octicons-react": "16.1.1",
@@ -4772,6 +4772,17 @@
         "string-width": "^4.1.0"
       }
     },
+    "node_modules/ansi-colors": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.1.tgz",
+      "integrity": "sha512-JoX0apGbHaUJBNl6yF+p6JAFYZ666/hhCGKN5t9QFjbJQKUU/g8MNbFDbvfrgKXvI1QpZplPOnwIo99lX/AAmA==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/ansi-escapes": {
       "version": "4.3.2",
       "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.2.tgz",
@@ -8214,6 +8225,20 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/enquirer": {
+      "version": "2.3.6",
+      "resolved": "https://registry.npmjs.org/enquirer/-/enquirer-2.3.6.tgz",
+      "integrity": "sha512-yjNnPr315/FjS4zIsUxYguYUPP2e1NK4d7E7ZOLiyYCcbFBiTMyID+2wvm2w6+pZ/odMA7cRkjhsPbltwBOrLg==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "ansi-colors": "^4.1.1"
+      },
+      "engines": {
+        "node": ">=8.6"
+      }
+    },
     "node_modules/ensure-posix-path": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/ensure-posix-path/-/ensure-posix-path-1.1.1.tgz",
@@ -25157,9 +25182,9 @@
       "integrity": "sha512-+Gwo89YK1OFi6oubTlah/zPxxzMNaMLy+inECAYI646KIFdzzhAsKWb3z5tSOu5Ff7no4isRV64rWfMSKLZclw=="
     },
     "@primer/react": {
-      "version": "34.6.0",
-      "resolved": "https://registry.npmjs.org/@primer/react/-/react-34.6.0.tgz",
-      "integrity": "sha512-a0Mh6YmpEyQF6ad0mnfOJoC+y1heDM4uuvBcQQKJQ28DVeif5mn+slCD2C9ZQvnhkl4qnh3iqXOTxmKN5fCHNQ==",
+      "version": "34.7.1",
+      "resolved": "https://registry.npmjs.org/@primer/react/-/react-34.7.1.tgz",
+      "integrity": "sha512-9OLRo3N1/B/jqb7aJPY7xmtyKM8afZlmWLnEOmT8LOCmuwPiRXI+4GsJjaV9RPx3h8rUXBQwpaYZGDDj9+/OjA==",
       "requires": {
         "@primer/behaviors": "1.1.0",
         "@primer/octicons-react": "16.1.1",
@@ -26158,6 +26183,14 @@
         "string-width": "^4.1.0"
       }
     },
+    "ansi-colors": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.1.tgz",
+      "integrity": "sha512-JoX0apGbHaUJBNl6yF+p6JAFYZ666/hhCGKN5t9QFjbJQKUU/g8MNbFDbvfrgKXvI1QpZplPOnwIo99lX/AAmA==",
+      "dev": true,
+      "optional": true,
+      "peer": true
+    },
     "ansi-escapes": {
       "version": "4.3.2",
       "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.2.tgz",
@@ -28960,6 +28993,17 @@
         "tapable": "^2.2.0"
       }
     },
+    "enquirer": {
+      "version": "2.3.6",
+      "resolved": "https://registry.npmjs.org/enquirer/-/enquirer-2.3.6.tgz",
+      "integrity": "sha512-yjNnPr315/FjS4zIsUxYguYUPP2e1NK4d7E7ZOLiyYCcbFBiTMyID+2wvm2w6+pZ/odMA7cRkjhsPbltwBOrLg==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "requires": {
+        "ansi-colors": "^4.1.1"
+      }
+    },
     "ensure-posix-path": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/ensure-posix-path/-/ensure-posix-path-1.1.1.tgz",
diff --git a/package.json b/package.json
index a9fcbfbcb6..8a2cc8f526 100644
--- a/package.json
+++ b/package.json
@@ -11,9 +11,9 @@
   "dependencies": {
     "@github/failbot": "0.8.0",
     "@primer/css": "^19.4.0",
+    "@primer/react": "^34.7.1",
     "@primer/octicons": "17.0.0",
     "@primer/octicons-react": "17.0.0",
-    "@primer/react": "^34.6.0",
     "@react-aria/ssr": "^3.1.0",
     "accept-language-parser": "^1.5.0",
     "ajv": "^8.9.0",
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 2c5e47499a..5b5fd697b8 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -2,7 +2,7 @@ import React, { useEffect } from 'react'
 import App from 'next/app'
 import type { AppProps, AppContext } from 'next/app'
 import Head from 'next/head'
-import { useTheme, ThemeProvider } from '@primer/react'
+import { ThemeProvider, ThemeProviderProps } from '@primer/react'
 import { SSRProvider } from '@react-aria/ssr'
 import { defaultComponentThemeProps, getThemeProps } from 'components/lib/getThemeProps'
 
@@ -14,7 +14,7 @@ import { LanguagesContext, LanguagesContextT } from 'components/context/Language
 
 type MyAppProps = AppProps & {
   csrfToken: string
-  themeProps: typeof defaultComponentThemeProps
+  themeProps: typeof defaultComponentThemeProps & Pick<ThemeProviderProps, 'colorMode'>
   languagesContext: LanguagesContextT
 }
 const MyApp = ({ Component, pageProps, csrfToken, themeProps, languagesContext }: MyAppProps) => {
@@ -51,9 +51,13 @@ const MyApp = ({ Component, pageProps, csrfToken, themeProps, languagesContext }
         <meta name="csrf-token" content={csrfToken} />
       </Head>
       <SSRProvider>
-        <ThemeProvider dayScheme={themeProps.dayTheme} nightScheme={themeProps.nightTheme}>
+        <ThemeProvider
+          colorMode={themeProps.colorMode}
+          dayScheme={themeProps.dayTheme}
+          nightScheme={themeProps.nightTheme}
+          preventSSRMismatch
+        >
           <LanguagesContext.Provider value={languagesContext}>
-            <SetTheme themeProps={themeProps} />
             <Component {...pageProps} />
           </LanguagesContext.Provider>
         </ThemeProvider>
@@ -76,15 +80,4 @@ MyApp.getInitialProps = async (appContext: AppContext) => {
   }
 }
 
-const SetTheme = ({ themeProps }: { themeProps: typeof defaultComponentThemeProps }) => {
-  // Cause primer/components to re-evaluate the 'auto' color mode on client side render
-  const { setColorMode } = useTheme()
-  useEffect(() => {
-    setTimeout(() => {
-      setColorMode(themeProps.colorMode as any)
-    })
-  }, [])
-  return null
-}
-
 export default MyApp