diff --git a/components/lib/get-session.ts b/components/lib/get-session.ts
index 536be5d412..11af586f10 100644
--- a/components/lib/get-session.ts
+++ b/components/lib/get-session.ts
@@ -1,5 +1,6 @@
 import { useState, useEffect } from 'react'
 import { useRouter } from 'next/router'
+import { ThemeProviderProps } from '@primer/react'
 
 const MAX_CACHE = 5000 // milliseconds
 const RETRY = 500 // milliseconds
@@ -18,8 +19,12 @@ type Session = {
   csrfToken: string
   userLanguage: string // en, es, ja, cn
   languages: Record<string, LanguageItem> // en... name nativeName code hreflang redirectPatterns dir wip
-  theme: object // colorMode, nightTheme, dayTheme
-  themeCSS: object // colorMode, nightTheme, dayTheme
+  theme: { colorMode: Pick<ThemeProviderProps, 'colorMode'>; nightTheme: string; dayTheme: string }
+  themeCss: {
+    colorMode: Pick<ThemeProviderProps, 'colorMode'>
+    nightTheme: string
+    dayTheme: string
+  }
 }
 
 let sessionCache: Session | null
diff --git a/middleware/cache-full-rendering.js b/middleware/cache-full-rendering.js
index 76ac6cad6d..ab1af2cde6 100644
--- a/middleware/cache-full-rendering.js
+++ b/middleware/cache-full-rendering.js
@@ -3,11 +3,6 @@ import zlib from 'zlib'
 import cheerio from 'cheerio'
 import QuickLRU from 'quick-lru'
 
-// This is what NextJS uses when it injects the JSON serialized
-// in the `<script id="__NEXT_DATA__">`
-import { htmlEscapeJsonString } from 'next/dist/server/htmlescape.js'
-
-import { getTheme } from '../lib/get-theme.js'
 import statsd from '../lib/statsd.js'
 
 const HEADER_NAME = 'x-middleware-cache'
@@ -127,31 +122,9 @@ function setHeaders(headers, res) {
 }
 
 function mutateCheeriobodyByRequest($, req) {
-  const cssTheme = getTheme(req, true)
-  const theme = getTheme(req, false)
-
-  // The <body> needs tags pertaining to the parsed theme
-  // Don't use `$.data()` because it doesn't actually mutate the "DOM"
-  // https://github.com/cheeriojs/cheerio/issues/950#issuecomment-274324269
-  $('body')
-    .attr('data-color-mode', cssTheme.colorMode)
-    .attr('data-dark-theme', cssTheme.nightTheme)
-    .attr('data-light-theme', cssTheme.dayTheme)
-
   // Update the __NEXT_DATA__ too with the equivalent pieces
   const nextData = $('script#__NEXT_DATA__')
   console.assert(nextData.length === 1, 'Not exactly 1')
-  // Note, once we upgrade to cheerio >= v1.0.0-rc.11
-  // we can access this with `.text()`.
-  // See https://github.com/cheeriojs/cheerio/releases/tag/v1.0.0-rc.11
-  // and https://github.com/cheeriojs/cheerio/pull/2509
-  const parsedNextData = JSON.parse(nextData.get()[0].children[0].data)
-  parsedNextData.props.themeProps = {
-    colorMode: theme.colorMode,
-    nightTheme: theme.nightTheme,
-    dayTheme: theme.dayTheme,
-  }
-  nextData.text(htmlEscapeJsonString(JSON.stringify(parsedNextData)))
 
   // The <ThemeProvider {...} preventSSRMismatch> component will
   // inject a script tag too that looks like this:
@@ -162,7 +135,4 @@ function mutateCheeriobodyByRequest($, req) {
   //
   const primerData = $('script#__PRIMER_DATA__')
   console.assert(primerData.length === 1, 'Not exactly 1')
-  const parsedPrimerData = JSON.parse(primerData.get()[0].children[0].data)
-  parsedPrimerData.resolvedServerColorMode = cssTheme.colorMode === 'dark' ? 'night' : 'day'
-  primerData.text(htmlEscapeJsonString(JSON.stringify(parsedPrimerData)))
 }
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 57d5081979..f3e7892ef2 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -2,24 +2,28 @@ import React, { useEffect } from 'react'
 import App from 'next/app'
 import type { AppProps, AppContext } from 'next/app'
 import Head from 'next/head'
-import { ThemeProvider, ThemeProviderProps, SSRProvider } from '@primer/react'
+import { ThemeProvider, SSRProvider, ThemeProviderProps } from '@primer/react'
 
 import '../stylesheets/index.scss'
 
 import events from 'components/lib/events'
 import experiment from 'components/lib/experiment'
-import { defaultComponentTheme } from 'lib/get-theme.js'
+import { useSession } from 'components/lib/get-session'
 
 type MyAppProps = AppProps & {
   isDotComAuthenticated: boolean
-  themeProps: typeof defaultComponentTheme & Pick<ThemeProviderProps, 'colorMode'>
 }
-const MyApp = ({ Component, pageProps, themeProps }: MyAppProps) => {
+
+type colorModeAuto = Pick<ThemeProviderProps, 'colorMode'>
+
+const MyApp = ({ Component, pageProps }: MyAppProps) => {
   useEffect(() => {
     events()
     experiment()
   }, [])
 
+  const session = useSession()
+
   return (
     <>
       <Head>
@@ -47,12 +51,21 @@ const MyApp = ({ Component, pageProps, themeProps }: MyAppProps) => {
       </Head>
       <SSRProvider>
         <ThemeProvider
-          colorMode={themeProps.colorMode}
-          dayScheme={themeProps.dayTheme}
-          nightScheme={themeProps.nightTheme}
-          preventSSRMismatch
+          colorMode={
+            (session?.theme?.colorMode as colorModeAuto['colorMode']) ||
+            ('auto' as colorModeAuto['colorMode'])
+          }
+          dayScheme={session?.theme?.dayTheme || 'light'}
+          nightScheme={session?.theme?.nightTheme || 'dark'}
         >
-          <Component {...pageProps} />
+          {/* Appears Next.js can't modify <body> after server rendering:  https://stackoverflow.com/a/54774431 */}
+          <div
+            data-color-mode={session?.themeCss?.colorMode || 'auto'}
+            data-dark-theme={session?.themeCss?.nightTheme || 'dark'}
+            data-light-theme={session?.themeCss?.dayTheme || 'light'}
+          >
+            <Component {...pageProps} />
+          </div>
         </ThemeProvider>
       </SSRProvider>
     </>
@@ -64,16 +77,11 @@ const MyApp = ({ Component, pageProps, themeProps }: MyAppProps) => {
 // executed every time **in the client** if it was the first time
 // ever (since restart) or from a cached HTML.
 MyApp.getInitialProps = async (appContext: AppContext) => {
-  const { ctx } = appContext
   // calls page's `getInitialProps` and fills `appProps.pageProps`
   const appProps = await App.getInitialProps(appContext)
-  const req: any = ctx.req
-
-  const { getTheme } = await import('lib/get-theme.js')
 
   return {
     ...appProps,
-    themeProps: getTheme(req),
   }
 }
 
diff --git a/pages/_document.tsx b/pages/_document.tsx
index 71736d6e66..ec5d42ff81 100644
--- a/pages/_document.tsx
+++ b/pages/_document.tsx
@@ -2,8 +2,6 @@ import Document, { DocumentContext, Html, Head, Main, NextScript } from 'next/do
 
 import { ServerStyleSheet } from 'styled-components'
 
-import { getTheme } from 'lib/get-theme.js'
-
 export default class MyDocument extends Document {
   static async getInitialProps(ctx: DocumentContext) {
     const sheet = new ServerStyleSheet()
@@ -18,7 +16,6 @@ export default class MyDocument extends Document {
       const initialProps = await Document.getInitialProps(ctx)
       return {
         ...initialProps,
-        cssThemeProps: getTheme(ctx.req, true),
         styles: (
           <>
             {initialProps.styles}
@@ -32,11 +29,10 @@ export default class MyDocument extends Document {
   }
 
   render() {
-    const { colorMode, nightTheme, dayTheme } = (this.props as any).cssThemeProps
     return (
       <Html>
         <Head />
-        <body data-color-mode={colorMode} data-dark-theme={nightTheme} data-light-theme={dayTheme}>
+        <body>
           <Main />
           <NextScript />
         </body>
diff --git a/tests/rendering/render-caching.js b/tests/rendering/render-caching.js
index 1300c347e8..a65f557a28 100644
--- a/tests/rendering/render-caching.js
+++ b/tests/rendering/render-caching.js
@@ -1,85 +1,31 @@
-import cheerio from 'cheerio'
 import { expect, jest, test } from '@jest/globals'
 
 import { get } from '../helpers/e2etest.js'
 // import { PREFERRED_LOCALE_COOKIE_NAME } from '../../middleware/detect-language.js'
-import { getNextData, getPrimerData } from '../helpers/script-data.js'
-
-const serializeTheme = (theme) => {
-  return encodeURIComponent(JSON.stringify(theme))
-}
 
 describe('in-memory render caching', () => {
   jest.setTimeout(30 * 1000)
 
-  test('second render should be a cache hit with different theme properties', async () => {
-    const cookieValue1 = {
-      color_mode: 'light',
-      light_theme: { name: 'light', color_mode: 'light' },
-      dark_theme: { name: 'dark_high_contrast', color_mode: 'dark' },
-    }
+  test('second render should be a cache hit', async () => {
     // Light mode first
-    const res1 = await get('/en', {
-      headers: {
-        cookie: `color_mode=${serializeTheme(cookieValue1)}`,
-      },
-    })
+    const res1 = await get('/en')
     // Because these are effectively end-to-end tests, you can't expect
     // the first request to be a cache miss because another end-to-end
     // test might have "warmed up" this endpoint.
     expect(res1.headers['x-middleware-cache']).toBeTruthy()
-    const $1 = cheerio.load(res1.text)
-    expect($1('body').data('color-mode')).toBe(cookieValue1.color_mode)
-    const themeProps1 = getNextData($1).props.themeProps
-    expect(themeProps1.colorMode).toBe('day')
 
-    const cookieValue2 = {
-      color_mode: 'dark',
-      light_theme: { name: 'light', color_mode: 'light' },
-      dark_theme: { name: 'dark_high_contrast', color_mode: 'dark' },
-    }
-    const res2 = await get('/en', {
-      headers: {
-        cookie: `color_mode=${serializeTheme(cookieValue2)}`,
-      },
-    })
+    const res2 = await get('/en')
     expect(res2.headers['x-middleware-cache']).toBeTruthy()
-    const $2 = cheerio.load(res2.text)
-    expect($2('body').data('color-mode')).toBe(cookieValue2.color_mode)
-    const themeProps2 = getNextData($2).props.themeProps
-    expect(themeProps2.colorMode).toBe('night')
   })
 
-  test('second render should be cache hit with different resolvedServerColorMode in __PRIMER_DATA__', async () => {
+  test('second render should be cache hit with different __PRIMER_DATA__', async () => {
     await get('/en') // first render to assert the next render comes from cache
 
-    const res = await get('/en', {
-      headers: {
-        cookie: `color_mode=${serializeTheme({
-          color_mode: 'dark',
-          light_theme: { name: 'light', color_mode: 'light' },
-          dark_theme: { name: 'dark_high_contrast', color_mode: 'dark' },
-        })}`,
-      },
-    })
+    const res = await get('/en')
     expect(res.headers['x-middleware-cache']).toBeTruthy()
-    const $ = cheerio.load(res.text)
-    const data = getPrimerData($)
-    expect(data.resolvedServerColorMode).toBe('night')
 
     // Now do it all over again but with a light color mode
-    const res2 = await get('/en', {
-      headers: {
-        cookie: `color_mode=${serializeTheme({
-          color_mode: 'light',
-          light_theme: { name: 'light', color_mode: 'light' },
-          dark_theme: { name: 'dark_high_contrast', color_mode: 'dark' },
-        })}`,
-      },
-    })
+    const res2 = await get('/en')
     expect(res2.headers['x-middleware-cache']).toBeTruthy()
-    const $2 = cheerio.load(res2.text)
-    const data2 = getPrimerData($2)
-    expect(data2.resolvedServerColorMode).toBe('day')
   })
 })
