diff --git a/package-lock.json b/package-lock.json
index 7b949b95ae7..6b8f5dea953 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -25859,7 +25859,6 @@
         "@types/styled-system__theme-get": "^5.0.1",
         "clsx": "^2.1.1",
         "color2k": "^2.0.3",
-        "deepmerge": "^4.3.1",
         "focus-visible": "^5.2.1",
         "history": "^5.0.0",
         "hsluv": "1.0.1",
@@ -26414,6 +26413,9 @@
     "packages/styled-react": {
       "name": "@primer/styled-react",
       "version": "1.0.0-rc.2",
+      "dependencies": {
+        "deepmerge": "^4.3.1"
+      },
       "devDependencies": {
         "@babel/preset-react": "^7.27.1",
         "@babel/preset-typescript": "^7.27.1",
diff --git a/packages/react/package.json b/packages/react/package.json
index 0a9949b5949..ddc76827ddd 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -45,7 +45,6 @@
     "build:docs:preview": "NODE_OPTIONS=--openssl-legacy-provider script/build-docs preview",
     "build:components.json": "tsx script/components-json/build.ts",
     "build:hooks.json": "tsx script/hooks-json/build.ts",
-    "build:precompile-color-schemes": "tsx script/precompile-color-schemes.ts",
     "lint:npm": "publint --types",
     "storybook": "storybook",
     "type-check": "tsc --noEmit",
@@ -87,7 +86,6 @@
     "@types/styled-system__theme-get": "^5.0.1",
     "clsx": "^2.1.1",
     "color2k": "^2.0.3",
-    "deepmerge": "^4.3.1",
     "focus-visible": "^5.2.1",
     "history": "^5.0.0",
     "hsluv": "1.0.1",
diff --git a/packages/react/script/build b/packages/react/script/build
index 4dab4524738..e5b51cc32fd 100755
--- a/packages/react/script/build
+++ b/packages/react/script/build
@@ -5,9 +5,6 @@ set -e
 # Clean up
 npm run clean
 
-# Generate color schemes
-npm run build:precompile-color-schemes
-
 # Generate types for CSS Modules
 npm run type-css-modules
 
diff --git a/packages/react/src/__tests__/ThemeProvider.test.tsx b/packages/react/src/ThemeProvider/ThemeProvider.test.tsx
similarity index 83%
rename from packages/react/src/__tests__/ThemeProvider.test.tsx
rename to packages/react/src/ThemeProvider/ThemeProvider.test.tsx
index 0ac937b6880..af30308820b 100644
--- a/packages/react/src/__tests__/ThemeProvider.test.tsx
+++ b/packages/react/src/ThemeProvider/ThemeProvider.test.tsx
@@ -2,7 +2,8 @@ import {render, screen, waitFor} from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import {describe, expect, it, vi} from 'vitest'
 import React from 'react'
-import {Text, ThemeProvider, useColorSchemeVar, useTheme} from '..'
+import Text from '../Text'
+import {ThemeProvider, useColorSchemeVar, useTheme} from '../ThemeProvider'
 
 // window.matchMedia() is not implemented by JSDOM so we have to create a mock:
 // https://vijs.io/docs/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom
@@ -43,53 +44,9 @@ const exampleTheme = {
   },
 }
 
-it('respects theme prop', () => {
-  const theme = {
-    colors: {
-      text: '#f00',
-    },
-    space: ['0', '0.25rem'],
-  }
-
-  render(
-    <ThemeProvider theme={theme}>
-      <Text color="text" mb={1}>
-        Hello
-      </Text>
-    </ThemeProvider>,
-  )
-
-  expect(screen.getByText('Hello')).toHaveStyle('color: #f00')
-  expect(screen.getByText('Hello')).toHaveStyle('margin-bottom: 4px')
-})
-
-it('has default theme', () => {
-  render(
-    <ThemeProvider>
-      <Text color="fg.default" mb={1}>
-        Hello
-      </Text>
-    </ThemeProvider>,
-  )
-
-  expect(screen.getByText('Hello')).toMatchSnapshot()
-})
-
-it('inherits theme from parent', () => {
-  render(
-    <ThemeProvider theme={exampleTheme}>
-      <ThemeProvider>
-        <Text color="text">Hello</Text>
-      </ThemeProvider>
-    </ThemeProvider>,
-  )
-
-  expect(screen.getByText('Hello')).toHaveStyle('color: rgb(0, 0, 0)')
-})
-
 it('defaults to light color scheme', () => {
   render(
-    <ThemeProvider theme={exampleTheme}>
+    <ThemeProvider>
       <Text color="text">Hello</Text>
     </ThemeProvider>,
   )
@@ -99,7 +56,7 @@ it('defaults to light color scheme', () => {
 
 it('defaults to dark color scheme in night mode', () => {
   render(
-    <ThemeProvider theme={exampleTheme} colorMode="night">
+    <ThemeProvider colorMode="night">
       <Text color="text">Hello</Text>
     </ThemeProvider>,
   )
@@ -111,7 +68,7 @@ it('defaults to first color scheme when passed an invalid color scheme name', ()
   const spy = vi.spyOn(console, 'error').mockImplementationOnce(() => {})
 
   render(
-    <ThemeProvider theme={exampleTheme} dayScheme="foo">
+    <ThemeProvider dayScheme="foo">
       <Text color="text">Hello</Text>
     </ThemeProvider>,
   )
@@ -124,7 +81,7 @@ it('defaults to first color scheme when passed an invalid color scheme name', ()
 
 it('respects nightScheme prop', () => {
   render(
-    <ThemeProvider theme={exampleTheme} colorMode="night" nightScheme="dark_dimmed">
+    <ThemeProvider colorMode="night" nightScheme="dark_dimmed">
       <Text color="text">Hello</Text>
     </ThemeProvider>,
   )
@@ -134,7 +91,7 @@ it('respects nightScheme prop', () => {
 
 it('respects nightScheme prop with colorMode="dark"', () => {
   render(
-    <ThemeProvider theme={exampleTheme} colorMode="dark" nightScheme="dark_dimmed">
+    <ThemeProvider colorMode="dark" nightScheme="dark_dimmed">
       <Text color="text">Hello</Text>
     </ThemeProvider>,
   )
@@ -144,7 +101,7 @@ it('respects nightScheme prop with colorMode="dark"', () => {
 
 it('respects dayScheme prop', () => {
   render(
-    <ThemeProvider theme={exampleTheme} colorMode="day" dayScheme="dark" nightScheme="dark_dimmed">
+    <ThemeProvider colorMode="day" dayScheme="dark" nightScheme="dark_dimmed">
       <Text color="text">Hello</Text>
     </ThemeProvider>,
   )
@@ -154,7 +111,7 @@ it('respects dayScheme prop', () => {
 
 it('respects dayScheme prop with colorMode="light"', () => {
   render(
-    <ThemeProvider theme={exampleTheme} colorMode="light" dayScheme="dark" nightScheme="dark_dimmed">
+    <ThemeProvider colorMode="light" dayScheme="dark" nightScheme="dark_dimmed">
       <Text color="text">Hello</Text>
     </ThemeProvider>,
   )
@@ -164,7 +121,7 @@ it('respects dayScheme prop with colorMode="light"', () => {
 
 it('works in auto mode', () => {
   render(
-    <ThemeProvider theme={exampleTheme} colorMode="auto">
+    <ThemeProvider colorMode="auto">
       <Text color="text">Hello</Text>
     </ThemeProvider>,
   )
@@ -185,7 +142,7 @@ it('works in auto mode (dark)', () => {
   }))
 
   render(
-    <ThemeProvider theme={exampleTheme} colorMode="auto">
+    <ThemeProvider colorMode="auto">
       <Text color="text">Hello</Text>
     </ThemeProvider>,
   )
@@ -201,7 +158,7 @@ it('updates when colorMode prop changes', async () => {
   function App() {
     const [colorMode, setColorMode] = React.useState<'day' | 'night'>('day')
     return (
-      <ThemeProvider theme={exampleTheme} colorMode={colorMode}>
+      <ThemeProvider colorMode={colorMode}>
         <Text color="text">{colorMode}</Text>
         <button type="button" onClick={() => setColorMode(colorMode === 'day' ? 'night' : 'day')}>
           Toggle
@@ -229,7 +186,7 @@ it('updates when dayScheme prop changes', async () => {
   function App() {
     const [dayScheme, setDayScheme] = React.useState('light')
     return (
-      <ThemeProvider theme={exampleTheme} dayScheme={dayScheme}>
+      <ThemeProvider dayScheme={dayScheme}>
         <Text color="text">{dayScheme}</Text>
         <button type="button" onClick={() => setDayScheme(dayScheme === 'light' ? 'dark_dimmed' : 'light')}>
           Toggle
@@ -257,7 +214,7 @@ it('updates when nightScheme prop changes', async () => {
   function App() {
     const [nightScheme, setNightScheme] = React.useState('dark')
     return (
-      <ThemeProvider theme={exampleTheme} colorMode="night" nightScheme={nightScheme}>
+      <ThemeProvider colorMode="night" nightScheme={nightScheme}>
         <Text color="text">{nightScheme}</Text>
         <button type="button" onClick={() => setNightScheme(nightScheme === 'dark' ? 'dark_dimmed' : 'dark')}>
           Toggle
@@ -285,7 +242,7 @@ it('inherits colorMode from parent', async () => {
   function App() {
     const [colorMode, setcolorMode] = React.useState<'day' | 'night'>('day')
     return (
-      <ThemeProvider theme={exampleTheme} colorMode={colorMode}>
+      <ThemeProvider colorMode={colorMode}>
         <button type="button" onClick={() => setcolorMode(colorMode === 'day' ? 'night' : 'day')}>
           Toggle
         </button>
@@ -311,7 +268,7 @@ it('inherits dayScheme from parent', async () => {
   function App() {
     const [dayScheme, setDayScheme] = React.useState('light')
     return (
-      <ThemeProvider theme={exampleTheme} colorMode="night" dayScheme={dayScheme}>
+      <ThemeProvider colorMode="night" dayScheme={dayScheme}>
         <button type="button" onClick={() => setDayScheme(dayScheme === 'light' ? 'dark_dimmed' : 'light')}>
           Toggle
         </button>
@@ -337,7 +294,7 @@ it('inherits nightScheme from parent', async () => {
   function App() {
     const [nightScheme, setNightScheme] = React.useState('dark')
     return (
-      <ThemeProvider theme={exampleTheme} colorMode="day" nightScheme={nightScheme}>
+      <ThemeProvider colorMode="day" nightScheme={nightScheme}>
         <button type="button" onClick={() => setNightScheme(nightScheme === 'dark' ? 'dark_dimmed' : 'dark')}>
           Toggle
         </button>
@@ -371,7 +328,7 @@ describe('setColorMode', () => {
     }
 
     render(
-      <ThemeProvider theme={exampleTheme} colorMode="day">
+      <ThemeProvider colorMode="day">
         <Text color="text">Hello</Text>
         <ToggleMode />
       </ThemeProvider>,
@@ -401,7 +358,7 @@ describe('setDayScheme', () => {
     }
 
     render(
-      <ThemeProvider theme={exampleTheme} colorMode="day">
+      <ThemeProvider colorMode="day">
         <Text color="text">Hello</Text>
         <ToggleDayScheme />
       </ThemeProvider>,
@@ -431,7 +388,7 @@ describe('setNightScheme', () => {
     }
 
     render(
-      <ThemeProvider theme={exampleTheme} colorMode="night">
+      <ThemeProvider colorMode="night">
         <Text color="text">Hello</Text>
         <ToggleNightScheme />
       </ThemeProvider>,
@@ -474,7 +431,7 @@ describe('useColorSchemeVar', () => {
     }
 
     render(
-      <ThemeProvider theme={exampleTheme} nightScheme="dark_dimmed">
+      <ThemeProvider nightScheme="dark_dimmed">
         <CustomBg />
         <ToggleMode />
       </ThemeProvider>,
@@ -506,7 +463,7 @@ describe('useColorSchemeVar', () => {
     }
 
     render(
-      <ThemeProvider theme={exampleTheme}>
+      <ThemeProvider>
         <CustomBg />
         <ToggleMode />
       </ThemeProvider>,
@@ -533,22 +490,6 @@ describe('useTheme().resolvedColorScheme', () => {
     expect(screen.getByTestId('text').textContent).toEqual('')
   })
 
-  it('is undefined when the theme has no colorScheme object', () => {
-    const Component = () => {
-      const {resolvedColorScheme} = useTheme()
-
-      return <Text data-testid="text">{resolvedColorScheme}</Text>
-    }
-
-    render(
-      <ThemeProvider theme={{color: 'red'}}>
-        <Component />
-      </ThemeProvider>,
-    )
-
-    expect(screen.getByTestId('text').textContent).toEqual('')
-  })
-
   it('is the same as the applied colorScheme, when that colorScheme is in the theme', () => {
     const Component = () => {
       const {resolvedColorScheme} = useTheme()
@@ -559,7 +500,7 @@ describe('useTheme().resolvedColorScheme', () => {
     const schemeToApply = 'dark'
 
     render(
-      <ThemeProvider theme={exampleTheme} colorMode="day" dayScheme={schemeToApply}>
+      <ThemeProvider colorMode="day" dayScheme={schemeToApply}>
         <Component />
       </ThemeProvider>,
     )
@@ -578,7 +519,7 @@ describe('useTheme().resolvedColorScheme', () => {
 
     const schemeToApply = 'totally-invalid-colorscheme'
     render(
-      <ThemeProvider theme={exampleTheme} colorMode="day" dayScheme={schemeToApply}>
+      <ThemeProvider colorMode="day" dayScheme={schemeToApply}>
         <Component />
       </ThemeProvider>,
     )
@@ -604,7 +545,7 @@ describe('useTheme().resolvedColorScheme', () => {
       const schemeToApply = 'dark'
 
       render(
-        <ThemeProvider theme={exampleTheme} colorMode="day" dayScheme={schemeToApply}>
+        <ThemeProvider colorMode="day" dayScheme={schemeToApply}>
           <ThemeProvider>
             <Component />
           </ThemeProvider>
@@ -626,7 +567,7 @@ describe('useTheme().resolvedColorScheme', () => {
 
       const schemeToApply = 'totally-invalid-colorscheme'
       render(
-        <ThemeProvider theme={exampleTheme} colorMode="day" dayScheme={schemeToApply}>
+        <ThemeProvider colorMode="day" dayScheme={schemeToApply}>
           <ThemeProvider>
             <Component />
           </ThemeProvider>
diff --git a/packages/react/src/ThemeProvider.tsx b/packages/react/src/ThemeProvider/ThemeProvider.tsx
similarity index 75%
rename from packages/react/src/ThemeProvider.tsx
rename to packages/react/src/ThemeProvider/ThemeProvider.tsx
index 416e317a540..cc52d653cbb 100644
--- a/packages/react/src/ThemeProvider.tsx
+++ b/packages/react/src/ThemeProvider/ThemeProvider.tsx
@@ -1,22 +1,16 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
-import {ThemeProvider as SCThemeProvider} from 'styled-components'
-import defaultTheme from './theme'
-import deepmerge from 'deepmerge'
-import {useId} from './hooks'
-import {useSyncedState} from './hooks/useSyncedState'
+import {useId} from '../hooks/useId'
+import {useSyncedState} from '../hooks/useSyncedState'
 
 export const defaultColorMode = 'day'
 const defaultDayScheme = 'light'
 const defaultNightScheme = 'dark'
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export type Theme = {[key: string]: any}
 type ColorMode = 'day' | 'night' | 'light' | 'dark'
 export type ColorModeWithAuto = ColorMode | 'auto'
 
 export type ThemeProviderProps = {
-  theme?: Theme
   colorMode?: ColorModeWithAuto
   dayScheme?: string
   nightScheme?: string
@@ -24,7 +18,6 @@ export type ThemeProviderProps = {
 }
 
 const ThemeContext = React.createContext<{
-  theme?: Theme
   colorScheme?: string
   colorMode?: ColorModeWithAuto
   resolvedColorMode?: ColorMode
@@ -53,15 +46,7 @@ const getServerHandoff = (id: string) => {
 
 export const ThemeProvider: React.FC<React.PropsWithChildren<ThemeProviderProps>> = ({children, ...props}) => {
   // Get fallback values from parent ThemeProvider (if exists)
-  const {
-    theme: fallbackTheme,
-    colorMode: fallbackColorMode,
-    dayScheme: fallbackDayScheme,
-    nightScheme: fallbackNightScheme,
-  } = useTheme()
-
-  // Initialize state
-  const theme = props.theme ?? fallbackTheme ?? defaultTheme
+  const {colorMode: fallbackColorMode, dayScheme: fallbackDayScheme, nightScheme: fallbackNightScheme} = useTheme()
 
   const uniqueDataId = useId()
   const {resolvedServerColorMode} = getServerHandoff(uniqueDataId)
@@ -73,10 +58,6 @@ export const ThemeProvider: React.FC<React.PropsWithChildren<ThemeProviderProps>
   const systemColorMode = useSystemColorMode()
   const resolvedColorMode = resolvedColorModePassthrough.current || resolveColorMode(colorMode, systemColorMode)
   const colorScheme = chooseColorScheme(resolvedColorMode, dayScheme, nightScheme)
-  const {resolvedTheme, resolvedColorScheme} = React.useMemo(
-    () => applyColorScheme(theme, colorScheme),
-    [theme, colorScheme],
-  )
 
   // this effect will only run on client
   React.useEffect(
@@ -108,11 +89,10 @@ export const ThemeProvider: React.FC<React.PropsWithChildren<ThemeProviderProps>
   return (
     <ThemeContext.Provider
       value={{
-        theme: resolvedTheme,
         colorScheme,
         colorMode,
         resolvedColorMode,
-        resolvedColorScheme,
+        resolvedColorScheme: colorScheme,
         dayScheme,
         nightScheme,
         setColorMode,
@@ -120,16 +100,14 @@ export const ThemeProvider: React.FC<React.PropsWithChildren<ThemeProviderProps>
         setNightScheme,
       }}
     >
-      <SCThemeProvider theme={resolvedTheme}>
-        {children}
-        {props.preventSSRMismatch ? (
-          <script
-            type="application/json"
-            id={`__PRIMER_DATA_${uniqueDataId}__`}
-            dangerouslySetInnerHTML={{__html: JSON.stringify({resolvedServerColorMode: resolvedColorMode})}}
-          />
-        ) : null}
-      </SCThemeProvider>
+      {children}
+      {props.preventSSRMismatch ? (
+        <script
+          type="application/json"
+          id={`__PRIMER_DATA_${uniqueDataId}__`}
+          dangerouslySetInnerHTML={{__html: JSON.stringify({resolvedServerColorMode: resolvedColorMode})}}
+        />
+      ) : null}
     </ThemeContext.Provider>
   )
 }
@@ -213,33 +191,4 @@ function chooseColorScheme(colorMode: ColorMode, dayScheme: string, nightScheme:
   }
 }
 
-function applyColorScheme(
-  theme: Theme,
-  colorScheme: string,
-): {resolvedTheme: Theme; resolvedColorScheme: string | undefined} {
-  if (!theme.colorSchemes) {
-    return {
-      resolvedTheme: theme,
-      resolvedColorScheme: undefined,
-    }
-  }
-
-  if (!theme.colorSchemes[colorScheme]) {
-    // eslint-disable-next-line no-console
-    console.error(`\`${colorScheme}\` scheme not defined in \`theme.colorSchemes\``)
-
-    // Apply the first defined color scheme
-    const defaultColorScheme = Object.keys(theme.colorSchemes)[0]
-    return {
-      resolvedTheme: deepmerge(theme, theme.colorSchemes[defaultColorScheme]),
-      resolvedColorScheme: defaultColorScheme,
-    }
-  }
-
-  return {
-    resolvedTheme: deepmerge(theme, theme.colorSchemes[colorScheme]),
-    resolvedColorScheme: colorScheme,
-  }
-}
-
 export default ThemeProvider
diff --git a/packages/react/src/ThemeProvider/index.ts b/packages/react/src/ThemeProvider/index.ts
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/packages/react/src/useColorSchemeVar.hookDocs.json b/packages/react/src/ThemeProvider/useColorSchemeVar.hookDocs.json
similarity index 100%
rename from packages/react/src/useColorSchemeVar.hookDocs.json
rename to packages/react/src/ThemeProvider/useColorSchemeVar.hookDocs.json
diff --git a/packages/styled-react/package.json b/packages/styled-react/package.json
index 32e6ced69f7..9c25f1d68de 100644
--- a/packages/styled-react/package.json
+++ b/packages/styled-react/package.json
@@ -22,10 +22,14 @@
   ],
   "scripts": {
     "build": "script/build",
+    "build:precompile-color-schemes": "tsx script/precompile-color-schemes.ts",
     "clean": "rimraf dist",
     "lint:npm": "publint --types",
     "type-check": "tsc --noEmit"
   },
+  "dependencies": {
+    "deepmerge": "^4.3.1"
+  },
   "devDependencies": {
     "@babel/preset-react": "^7.27.1",
     "@babel/preset-typescript": "^7.27.1",
@@ -41,6 +45,7 @@
     "rollup": "4.50.1",
     "rollup-plugin-typescript2": "^0.36.0",
     "styled-components": "5.3.11",
+    "tsx": "4.20.3",
     "typescript": "^5.9.2"
   },
   "peerDependencies": {
diff --git a/packages/styled-react/script/build b/packages/styled-react/script/build
index b2981e2b226..06f1ee35460 100755
--- a/packages/styled-react/script/build
+++ b/packages/styled-react/script/build
@@ -1,3 +1,6 @@
 #!/bin/bash
 
+# Generate color schemes
+npm run build:precompile-color-schemes
+
 npx rollup -c
diff --git a/packages/react/script/precompile-color-schemes.ts b/packages/styled-react/script/precompile-color-schemes.ts
similarity index 93%
rename from packages/react/script/precompile-color-schemes.ts
rename to packages/styled-react/script/precompile-color-schemes.ts
index 9a55a353ed9..0ab8a599f88 100644
--- a/packages/react/script/precompile-color-schemes.ts
+++ b/packages/styled-react/script/precompile-color-schemes.ts
@@ -1,7 +1,7 @@
 import fs from 'fs'
 import path from 'path'
 import {colors} from '../src/legacy-theme/ts/colors'
-import {partitionColors, omitScale} from '../src/utils/theme'
+import {partitionColors, omitScale} from '../../react/src/utils/theme'
 import {fileURLToPath} from 'url'
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url))
diff --git a/packages/styled-react/src/components/ThemeProvider/ThemeProvider.browser.test.tsx b/packages/styled-react/src/components/ThemeProvider/ThemeProvider.browser.test.tsx
new file mode 100644
index 00000000000..04bc4557e5d
--- /dev/null
+++ b/packages/styled-react/src/components/ThemeProvider/ThemeProvider.browser.test.tsx
@@ -0,0 +1,259 @@
+import {render, screen} from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import {describe, expect, it, vi} from 'vitest'
+import React from 'react'
+import {Text, ThemeProvider, useTheme} from '../..'
+
+// window.matchMedia() is not implemented by JSDOM so we have to create a mock:
+// https://vijs.io/docs/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: vi.fn().mockImplementation(query => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: vi.fn(), // deprecated
+    removeListener: vi.fn(), // deprecated
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+    dispatchEvent: vi.fn(),
+  })),
+})
+
+const exampleTheme = {
+  colors: {
+    text: '#f00',
+  },
+  colorSchemes: {
+    light: {
+      colors: {
+        text: 'black',
+      },
+    },
+    dark: {
+      colors: {
+        text: 'white',
+      },
+    },
+    dark_dimmed: {
+      colors: {
+        text: 'gray',
+      },
+    },
+  },
+}
+
+describe('setColorMode', () => {
+  it('changes the color mode', async () => {
+    const user = userEvent.setup()
+
+    function ToggleMode() {
+      const {colorMode, setColorMode} = useTheme()
+      return (
+        <button type="button" onClick={() => setColorMode(colorMode === 'day' ? 'night' : 'day')}>
+          Toggle
+        </button>
+      )
+    }
+
+    render(
+      <ThemeProvider theme={exampleTheme} colorMode="day">
+        <Text color="text">Hello</Text>
+        <ToggleMode />
+      </ThemeProvider>,
+    )
+
+    // starts in day mode (light scheme)
+    expect(screen.getByText('Hello')).toHaveStyle('color: rgb(0, 0, 0)')
+
+    await user.click(screen.getByRole('button'))
+
+    // clicking the toggle button enables night mode (dark scheme)
+    expect(screen.getByText('Hello')).toHaveStyle('color: rgb(255, 255, 255)')
+  })
+})
+
+describe('setDayScheme', () => {
+  it('changes the day scheme', async () => {
+    const user = userEvent.setup()
+
+    function ToggleDayScheme() {
+      const {dayScheme, setDayScheme} = useTheme()
+      return (
+        <button type="button" onClick={() => setDayScheme(dayScheme === 'light' ? 'dark' : 'light')}>
+          Toggle
+        </button>
+      )
+    }
+
+    render(
+      <ThemeProvider theme={exampleTheme} colorMode="day">
+        <Text color="text">Hello</Text>
+        <ToggleDayScheme />
+      </ThemeProvider>,
+    )
+
+    // starts in day mode (light scheme)
+    expect(screen.getByText('Hello')).toHaveStyle('color: rgb(0, 0, 0)')
+
+    await user.click(screen.getByRole('button'))
+
+    // clicking the toggle button sets day scheme to dark
+    expect(screen.getByText('Hello')).toHaveStyle('color: rgb(255, 255, 255)')
+  })
+})
+
+describe('setNightScheme', () => {
+  it('changes the night scheme', async () => {
+    const user = userEvent.setup()
+
+    function ToggleNightScheme() {
+      const {nightScheme, setNightScheme} = useTheme()
+      return (
+        <button type="button" onClick={() => setNightScheme(nightScheme === 'dark' ? 'dark_dimmed' : 'dark')}>
+          Toggle
+        </button>
+      )
+    }
+
+    render(
+      <ThemeProvider theme={exampleTheme} colorMode="night">
+        <Text color="text">Hello</Text>
+        <ToggleNightScheme />
+      </ThemeProvider>,
+    )
+
+    // starts in night mode (dark scheme)
+    expect(screen.getByText('Hello')).toHaveStyle('color: rgb(255, 255, 255)')
+
+    await user.click(screen.getByRole('button'))
+
+    // clicking the toggle button sets night scheme to dark_dimmed
+    expect(screen.getByText('Hello')).toHaveStyle('color: rgb(128, 128, 128)')
+  })
+})
+
+describe('useTheme().resolvedColorScheme', () => {
+  it('is undefined when not in a theme', () => {
+    const Component = () => {
+      const {resolvedColorScheme} = useTheme()
+
+      return <Text data-testid="text">{resolvedColorScheme}</Text>
+    }
+
+    render(<Component />)
+
+    expect(screen.getByTestId('text').textContent).toEqual('')
+  })
+
+  it('is undefined when the theme has no colorScheme object', () => {
+    const Component = () => {
+      const {resolvedColorScheme} = useTheme()
+
+      return <Text data-testid="text">{resolvedColorScheme}</Text>
+    }
+
+    render(
+      <ThemeProvider theme={{color: 'red'}}>
+        <Component />
+      </ThemeProvider>,
+    )
+
+    expect(screen.getByTestId('text').textContent).toEqual('')
+  })
+
+  it('is the same as the applied colorScheme, when that colorScheme is in the theme', () => {
+    const Component = () => {
+      const {resolvedColorScheme} = useTheme()
+
+      return <Text data-testid="text">{resolvedColorScheme}</Text>
+    }
+
+    const schemeToApply = 'dark'
+
+    render(
+      <ThemeProvider theme={exampleTheme} colorMode="day" dayScheme={schemeToApply}>
+        <Component />
+      </ThemeProvider>,
+    )
+
+    expect(exampleTheme.colorSchemes).toHaveProperty(schemeToApply)
+    expect(screen.getByTestId('text').textContent).toEqual(schemeToApply)
+  })
+
+  it('is the value of the fallback colorScheme applied when attempting to apply an invalid colorScheme', () => {
+    const spy = vi.spyOn(console, 'error').mockImplementationOnce(() => {})
+    const Component = () => {
+      const {resolvedColorScheme} = useTheme()
+
+      return <Text data-testid="text">{resolvedColorScheme}</Text>
+    }
+
+    const schemeToApply = 'totally-invalid-colorscheme'
+    render(
+      <ThemeProvider theme={exampleTheme} colorMode="day" dayScheme={schemeToApply}>
+        <Component />
+      </ThemeProvider>,
+    )
+
+    const defaultThemeColorScheme = Object.keys(exampleTheme.colorSchemes)[0]
+
+    expect(spy).toHaveBeenCalledWith('`totally-invalid-colorscheme` scheme not defined in `theme.colorSchemes`')
+    expect(defaultThemeColorScheme).not.toEqual(schemeToApply)
+    expect(exampleTheme.colorSchemes).not.toHaveProperty(schemeToApply)
+    expect(screen.getByTestId('text').textContent).toEqual('light')
+
+    spy.mockRestore()
+  })
+
+  describe('nested theme', () => {
+    it('is the same as the applied colorScheme, when that colorScheme is in the theme', () => {
+      const Component = () => {
+        const {resolvedColorScheme} = useTheme()
+
+        return <Text data-testid="text">{resolvedColorScheme}</Text>
+      }
+
+      const schemeToApply = 'dark'
+
+      render(
+        <ThemeProvider theme={exampleTheme} colorMode="day" dayScheme={schemeToApply}>
+          <ThemeProvider>
+            <Component />
+          </ThemeProvider>
+        </ThemeProvider>,
+      )
+
+      expect(exampleTheme.colorSchemes).toHaveProperty(schemeToApply)
+      expect(screen.getByTestId('text').textContent).toEqual(schemeToApply)
+    })
+
+    it('is the value of the fallback colorScheme applied when attempting to apply an invalid colorScheme', () => {
+      const spy = vi.spyOn(console, 'error').mockImplementation(() => {})
+
+      const Component = () => {
+        const {resolvedColorScheme} = useTheme()
+
+        return <Text data-testid="text">{resolvedColorScheme}</Text>
+      }
+
+      const schemeToApply = 'totally-invalid-colorscheme'
+      render(
+        <ThemeProvider theme={exampleTheme} colorMode="day" dayScheme={schemeToApply}>
+          <ThemeProvider>
+            <Component />
+          </ThemeProvider>
+        </ThemeProvider>,
+      )
+
+      const defaultThemeColorScheme = Object.keys(exampleTheme.colorSchemes)[0]
+
+      expect(spy).toHaveBeenCalledWith('`totally-invalid-colorscheme` scheme not defined in `theme.colorSchemes`')
+      expect(defaultThemeColorScheme).not.toEqual(schemeToApply)
+      expect(exampleTheme.colorSchemes).not.toHaveProperty(schemeToApply)
+      expect(screen.getByTestId('text').textContent).toEqual('light')
+
+      spy.mockRestore()
+    })
+  })
+})
diff --git a/packages/styled-react/src/components/ThemeProvider/ThemeProvider.tsx b/packages/styled-react/src/components/ThemeProvider/ThemeProvider.tsx
new file mode 100644
index 00000000000..e2ce30d6a57
--- /dev/null
+++ b/packages/styled-react/src/components/ThemeProvider/ThemeProvider.tsx
@@ -0,0 +1,106 @@
+import {
+  ThemeProvider as PrimerThemeProvider,
+  type ThemeProviderProps as PrimerThemeProviderProps,
+  useTheme as usePrimerTheme,
+} from '@primer/react'
+import deepmerge from 'deepmerge'
+import {createContext, useContext, useMemo, type PropsWithChildren} from 'react'
+import {ThemeProvider as SCThemeProvider} from 'styled-components'
+import defaultTheme from '../../theme'
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type Theme = {[key: string]: any}
+
+type ThemeProviderProps = PropsWithChildren<
+  PrimerThemeProviderProps & {
+    theme?: Theme
+  }
+>
+
+type ColorMode = 'day' | 'night' | 'light' | 'dark'
+type ColorModeWithAuto = ColorMode | 'auto'
+
+const ThemeContext = createContext<{
+  theme?: Theme
+  colorScheme?: string
+  colorMode?: ColorModeWithAuto
+  resolvedColorMode?: ColorMode
+  resolvedColorScheme?: string
+  dayScheme?: string
+  nightScheme?: string
+  setColorMode: React.Dispatch<React.SetStateAction<ColorModeWithAuto>>
+  setDayScheme: React.Dispatch<React.SetStateAction<string>>
+  setNightScheme: React.Dispatch<React.SetStateAction<string>>
+}>({
+  setColorMode: () => null,
+  setDayScheme: () => null,
+  setNightScheme: () => null,
+})
+
+function useTheme() {
+  return useContext(ThemeContext)
+}
+
+function ThemeProvider({children, theme, ...rest}: ThemeProviderProps) {
+  return (
+    <PrimerThemeProvider {...rest}>
+      <ThemeProviderImpl theme={theme}>{children}</ThemeProviderImpl>
+    </PrimerThemeProvider>
+  )
+}
+
+function ThemeProviderImpl({children, ...rest}: ThemeProviderProps) {
+  const primerTheme = usePrimerTheme()
+  const {theme: fallbackTheme} = useTheme()
+  // Initialize state
+  const theme = rest.theme ?? fallbackTheme ?? defaultTheme
+  const {resolvedTheme, resolvedColorScheme} = useMemo(
+    () => applyColorScheme(theme, primerTheme.colorScheme!),
+    [theme, primerTheme.colorScheme],
+  )
+  const value = useMemo(() => {
+    return {
+      ...primerTheme,
+      theme: resolvedTheme,
+      resolvedColorScheme,
+    }
+  }, [primerTheme, resolvedTheme, resolvedColorScheme])
+
+  return (
+    <ThemeContext.Provider value={value}>
+      <SCThemeProvider theme={resolvedTheme}>{children}</SCThemeProvider>
+    </ThemeContext.Provider>
+  )
+}
+
+function applyColorScheme(
+  theme: Theme,
+  colorScheme: string,
+): {resolvedTheme: Theme; resolvedColorScheme: string | undefined} {
+  if (!theme.colorSchemes) {
+    return {
+      resolvedTheme: theme,
+      resolvedColorScheme: undefined,
+    }
+  }
+
+  if (!theme.colorSchemes[colorScheme]) {
+    // eslint-disable-next-line no-console
+    console.error(`\`${colorScheme}\` scheme not defined in \`theme.colorSchemes\``)
+
+    // Apply the first defined color scheme
+    const defaultColorScheme = Object.keys(theme.colorSchemes)[0]
+    return {
+      resolvedTheme: deepmerge(theme, theme.colorSchemes[defaultColorScheme]),
+      resolvedColorScheme: defaultColorScheme,
+    }
+  }
+
+  return {
+    resolvedTheme: deepmerge(theme, theme.colorSchemes[colorScheme]),
+    resolvedColorScheme: colorScheme,
+  }
+}
+
+export {ThemeProvider, useTheme}
+export type {ThemeProviderProps, Theme}
diff --git a/packages/styled-react/src/components/ThemeProvider/index.ts b/packages/styled-react/src/components/ThemeProvider/index.ts
new file mode 100644
index 00000000000..9df48dc3e68
--- /dev/null
+++ b/packages/styled-react/src/components/ThemeProvider/index.ts
@@ -0,0 +1 @@
+export {ThemeProvider, type ThemeProviderProps, type Theme, useTheme} from './ThemeProvider'
diff --git a/packages/styled-react/src/index.tsx b/packages/styled-react/src/index.tsx
index 66763c5389a..c8c3259e3ba 100644
--- a/packages/styled-react/src/index.tsx
+++ b/packages/styled-react/src/index.tsx
@@ -136,11 +136,10 @@ export {
   sx,
 
   // theming depends on styled-components
-  ThemeProvider,
   merge,
   theme,
   themeGet,
   useColorSchemeVar,
-  useTheme,
 } from '@primer/react'
+export {ThemeProvider, useTheme} from './components/ThemeProvider'
 export type {BoxProps, SxProp, BetterSystemStyleObject}
diff --git a/packages/react/src/legacy-theme/README.md b/packages/styled-react/src/legacy-theme/README.md
similarity index 100%
rename from packages/react/src/legacy-theme/README.md
rename to packages/styled-react/src/legacy-theme/README.md
diff --git a/packages/react/src/legacy-theme/ts/color-schemes.ts b/packages/styled-react/src/legacy-theme/ts/color-schemes.ts
similarity index 100%
rename from packages/react/src/legacy-theme/ts/color-schemes.ts
rename to packages/styled-react/src/legacy-theme/ts/color-schemes.ts
diff --git a/packages/react/src/legacy-theme/ts/colors/dark.ts b/packages/styled-react/src/legacy-theme/ts/colors/dark.ts
similarity index 100%
rename from packages/react/src/legacy-theme/ts/colors/dark.ts
rename to packages/styled-react/src/legacy-theme/ts/colors/dark.ts
diff --git a/packages/react/src/legacy-theme/ts/colors/dark_colorblind.ts b/packages/styled-react/src/legacy-theme/ts/colors/dark_colorblind.ts
similarity index 100%
rename from packages/react/src/legacy-theme/ts/colors/dark_colorblind.ts
rename to packages/styled-react/src/legacy-theme/ts/colors/dark_colorblind.ts
diff --git a/packages/react/src/legacy-theme/ts/colors/dark_dimmed.ts b/packages/styled-react/src/legacy-theme/ts/colors/dark_dimmed.ts
similarity index 100%
rename from packages/react/src/legacy-theme/ts/colors/dark_dimmed.ts
rename to packages/styled-react/src/legacy-theme/ts/colors/dark_dimmed.ts
diff --git a/packages/react/src/legacy-theme/ts/colors/dark_high_contrast.ts b/packages/styled-react/src/legacy-theme/ts/colors/dark_high_contrast.ts
similarity index 100%
rename from packages/react/src/legacy-theme/ts/colors/dark_high_contrast.ts
rename to packages/styled-react/src/legacy-theme/ts/colors/dark_high_contrast.ts
diff --git a/packages/react/src/legacy-theme/ts/colors/dark_tritanopia.ts b/packages/styled-react/src/legacy-theme/ts/colors/dark_tritanopia.ts
similarity index 100%
rename from packages/react/src/legacy-theme/ts/colors/dark_tritanopia.ts
rename to packages/styled-react/src/legacy-theme/ts/colors/dark_tritanopia.ts
diff --git a/packages/react/src/legacy-theme/ts/colors/index.ts b/packages/styled-react/src/legacy-theme/ts/colors/index.ts
similarity index 100%
rename from packages/react/src/legacy-theme/ts/colors/index.ts
rename to packages/styled-react/src/legacy-theme/ts/colors/index.ts
diff --git a/packages/react/src/legacy-theme/ts/colors/light.ts b/packages/styled-react/src/legacy-theme/ts/colors/light.ts
similarity index 100%
rename from packages/react/src/legacy-theme/ts/colors/light.ts
rename to packages/styled-react/src/legacy-theme/ts/colors/light.ts
diff --git a/packages/react/src/legacy-theme/ts/colors/light_colorblind.ts b/packages/styled-react/src/legacy-theme/ts/colors/light_colorblind.ts
similarity index 100%
rename from packages/react/src/legacy-theme/ts/colors/light_colorblind.ts
rename to packages/styled-react/src/legacy-theme/ts/colors/light_colorblind.ts
diff --git a/packages/react/src/legacy-theme/ts/colors/light_high_contrast.ts b/packages/styled-react/src/legacy-theme/ts/colors/light_high_contrast.ts
similarity index 100%
rename from packages/react/src/legacy-theme/ts/colors/light_high_contrast.ts
rename to packages/styled-react/src/legacy-theme/ts/colors/light_high_contrast.ts
diff --git a/packages/react/src/legacy-theme/ts/colors/light_tritanopia.ts b/packages/styled-react/src/legacy-theme/ts/colors/light_tritanopia.ts
similarity index 100%
rename from packages/react/src/legacy-theme/ts/colors/light_tritanopia.ts
rename to packages/styled-react/src/legacy-theme/ts/colors/light_tritanopia.ts
diff --git a/packages/react/src/legacy-theme/ts/index.ts b/packages/styled-react/src/legacy-theme/ts/index.ts
similarity index 100%
rename from packages/react/src/legacy-theme/ts/index.ts
rename to packages/styled-react/src/legacy-theme/ts/index.ts
diff --git a/packages/react/src/theme.ts b/packages/styled-react/src/theme.ts
similarity index 88%
rename from packages/react/src/theme.ts
rename to packages/styled-react/src/theme.ts
index a1ad8cf5ec2..468c7d1a3ee 100644
--- a/packages/react/src/theme.ts
+++ b/packages/styled-react/src/theme.ts
@@ -1,7 +1,14 @@
-import type {KeyPaths} from './utils/types/KeyPaths'
-import {fontStack} from './utils/theme'
 import {colorSchemes} from './legacy-theme/ts/color-schemes'
 
+// Produces a union of dot-delimited keypaths to the string values in a nested object:
+type KeyPaths<O> = {
+  [K in keyof O]: K extends string ? (O[K] extends Record<string, unknown> ? `${K}.${KeyPaths<O[K]>}` : `${K}`) : never
+}[keyof O]
+
+function fontStack(fonts: Array<string>): string {
+  return fonts.map(font => (font.includes(' ') ? `"${font}"` : font)).join(', ')
+}
+
 const animation = {
   easeOutCubic: 'cubic-bezier(0.33, 1, 0.68, 1)',
 }
diff --git a/packages/styled-react/vitest.config.browser.ts b/packages/styled-react/vitest.config.browser.ts
index 00b25150af3..dd9772c045c 100644
--- a/packages/styled-react/vitest.config.browser.ts
+++ b/packages/styled-react/vitest.config.browser.ts
@@ -1,3 +1,4 @@
+import path from 'node:path'
 import react from '@vitejs/plugin-react'
 import {defineConfig} from 'vitest/config'
 
@@ -6,6 +7,22 @@ export default defineConfig({
   define: {
     __DEV__: true,
   },
+  resolve: {
+    alias: [
+      {
+        find: '@primer/react/experimental',
+        replacement: path.resolve(import.meta.dirname, '..', 'react', 'src', 'experimental', 'index.ts'),
+      },
+      {
+        find: '@primer/react/deprecated',
+        replacement: path.resolve(import.meta.dirname, '..', 'react', 'src', 'deprecated', 'index.ts'),
+      },
+      {
+        find: '@primer/react',
+        replacement: path.resolve(import.meta.dirname, '..', 'react', 'src', 'index.ts'),
+      },
+    ],
+  },
   test: {
     name: '@primer/styled-react (browser)',
     include: ['src/**/*.browser.test.?(c|m)[jt]s?(x)'],