diff --git a/.changeset/yellow-pens-kiss.md b/.changeset/yellow-pens-kiss.md
new file mode 100644
index 00000000000..9a456505b25
--- /dev/null
+++ b/.changeset/yellow-pens-kiss.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": major
+---
+
+ThemeProvider: Remove styled-components ThemeProvider
diff --git a/packages/react/src/ThemeProvider.tsx b/packages/react/src/ThemeProvider.tsx
index 416e317a540..c3f74c373a8 100644
--- a/packages/react/src/ThemeProvider.tsx
+++ b/packages/react/src/ThemeProvider.tsx
@@ -1,6 +1,5 @@
 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'
@@ -16,7 +15,6 @@ type ColorMode = 'day' | 'night' | 'light' | 'dark'
 export type ColorModeWithAuto = ColorMode | 'auto'
 
 export type ThemeProviderProps = {
-  theme?: Theme
   colorMode?: ColorModeWithAuto
   dayScheme?: string
   nightScheme?: string
@@ -61,7 +59,7 @@ export const ThemeProvider: React.FC<React.PropsWithChildren<ThemeProviderProps>
   } = useTheme()
 
   // Initialize state
-  const theme = props.theme ?? fallbackTheme ?? defaultTheme
+  const theme = fallbackTheme ?? defaultTheme
 
   const uniqueDataId = useId()
   const {resolvedServerColorMode} = getServerHandoff(uniqueDataId)
@@ -120,7 +118,11 @@ export const ThemeProvider: React.FC<React.PropsWithChildren<ThemeProviderProps>
         setNightScheme,
       }}
     >
-      <SCThemeProvider theme={resolvedTheme}>
+      <div
+        data-color-mode={colorMode === 'auto' ? 'auto' : colorScheme.includes('dark') ? 'dark' : 'light'}
+        data-light-theme={dayScheme}
+        data-dark-theme={nightScheme}
+      >
         {children}
         {props.preventSSRMismatch ? (
           <script
@@ -129,7 +131,7 @@ export const ThemeProvider: React.FC<React.PropsWithChildren<ThemeProviderProps>
             dangerouslySetInnerHTML={{__html: JSON.stringify({resolvedServerColorMode: resolvedColorMode})}}
           />
         ) : null}
-      </SCThemeProvider>
+      </div>
     </ThemeContext.Provider>
   )
 }
diff --git a/packages/react/src/__tests__/ThemeProvider.test.tsx b/packages/react/src/__tests__/ThemeProvider.test.tsx
index 518c2b92447..ce023877820 100644
--- a/packages/react/src/__tests__/ThemeProvider.test.tsx
+++ b/packages/react/src/__tests__/ThemeProvider.test.tsx
@@ -3,7 +3,15 @@ import userEvent from '@testing-library/user-event'
 import {describe, expect, it, vi} from 'vitest'
 import React from 'react'
 import {ThemeProvider, useColorSchemeVar, useTheme} from '../ThemeProvider'
-import Box from '../Box'
+
+// copied from '@primer/primitives/dist/css/functional/themes/';
+const fgDefaultColors = {
+  light: '#1f2328',
+  // eslint-disable-next-line camelcase
+  light_high_contrast: '#010409',
+  dark: '#f0f6fc',
+  dark_dimmed: '#d1d7e0',
+}
 
 // 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
@@ -21,159 +29,48 @@ Object.defineProperty(window, 'matchMedia', {
   })),
 })
 
-const exampleTheme = {
-  colors: {
-    text: '#f00',
-  },
-  colorSchemes: {
-    light: {
-      colors: {
-        text: 'black',
-      },
-    },
-    dark: {
-      colors: {
-        text: 'white',
-      },
-    },
-    dark_dimmed: {
-      colors: {
-        text: 'gray',
-      },
-    },
-  },
-}
-
-it('respects theme prop', () => {
-  const theme = {
-    colors: {
-      text: '#f00',
-    },
-    space: ['0', '0.25rem'],
-  }
-
-  render(
-    <ThemeProvider theme={theme}>
-      <Box color="text" mb={1}>
-        Hello
-      </Box>
-    </ThemeProvider>,
-  )
-
-  expect(screen.getByText('Hello')).toHaveStyle('color: #f00')
-  expect(screen.getByText('Hello')).toHaveStyle('margin-bottom: 4px')
-})
-
-it('has default theme', () => {
-  render(
-    <ThemeProvider>
-      <Box color="fg.default" mb={1}>
-        Hello
-      </Box>
-    </ThemeProvider>,
-  )
-
-  expect(screen.getByText('Hello')).toMatchSnapshot()
-})
-
-it('inherits theme from parent', () => {
-  render(
-    <ThemeProvider theme={exampleTheme}>
-      <ThemeProvider>
-        <Box color="text">Hello</Box>
-      </ThemeProvider>
-    </ThemeProvider>,
-  )
-
-  expect(screen.getByText('Hello')).toHaveStyle('color: rgb(0, 0, 0)')
-})
-
 it('defaults to light color scheme', () => {
   render(
-    <ThemeProvider theme={exampleTheme}>
-      <Box color="text">Hello</Box>
+    <ThemeProvider>
+      <span style={{color: 'var(--fgColor-default)'}}>Hello</span>
     </ThemeProvider>,
   )
 
-  expect(screen.getByText('Hello')).toHaveStyle('color: rgb(0, 0, 0)')
+  expect(screen.getByText('Hello')).toHaveStyle(`color: ${fgDefaultColors.light}`)
 })
 
 it('defaults to dark color scheme in night mode', () => {
   render(
-    <ThemeProvider theme={exampleTheme} colorMode="night">
-      <Box color="text">Hello</Box>
-    </ThemeProvider>,
-  )
-
-  expect(screen.getByText('Hello')).toHaveStyle('color: rgb(255, 255, 255)')
-})
-
-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">
-      <Box color="text">Hello</Box>
+    <ThemeProvider colorMode="night">
+      <span style={{color: 'var(--fgColor-default)'}}>Hello</span>
     </ThemeProvider>,
   )
 
-  expect(spy).toHaveBeenCalledWith('`foo` scheme not defined in `theme.colorSchemes`')
-  expect(screen.getByText('Hello')).toHaveStyle('color: rgb(0, 0, 0)')
-
-  spy.mockRestore()
+  expect(screen.getByText('Hello')).toHaveStyle(`color: ${fgDefaultColors.dark}`)
 })
 
 it('respects nightScheme prop', () => {
   render(
-    <ThemeProvider theme={exampleTheme} colorMode="night" nightScheme="dark_dimmed">
-      <Box color="text">Hello</Box>
-    </ThemeProvider>,
-  )
-
-  expect(screen.getByText('Hello')).toHaveStyle('color: rgb(128, 128, 128)')
-})
-
-it('respects nightScheme prop with colorMode="dark"', () => {
-  render(
-    <ThemeProvider theme={exampleTheme} colorMode="dark" nightScheme="dark_dimmed">
-      <Box color="text">Hello</Box>
-    </ThemeProvider>,
-  )
-
-  expect(screen.getByText('Hello')).toHaveStyle('color: rgb(128, 128, 128)')
-})
-
-it('respects dayScheme prop', () => {
-  render(
-    <ThemeProvider theme={exampleTheme} colorMode="day" dayScheme="dark" nightScheme="dark_dimmed">
-      <Box color="text">Hello</Box>
+    <ThemeProvider colorMode="night" nightScheme="dark_dimmed">
+      <span style={{color: 'var(--fgColor-default)'}}>Hello</span>
     </ThemeProvider>,
   )
 
-  expect(screen.getByText('Hello')).toHaveStyle('color: rgb(255, 255, 255)')
-})
-
-it('respects dayScheme prop with colorMode="light"', () => {
-  render(
-    <ThemeProvider theme={exampleTheme} colorMode="light" dayScheme="dark" nightScheme="dark_dimmed">
-      <Box color="text">Hello</Box>
-    </ThemeProvider>,
-  )
-
-  expect(screen.getByText('Hello')).toHaveStyle('color: rgb(255, 255, 255)')
+  expect(screen.getByText('Hello')).toHaveStyle(`color: ${fgDefaultColors.dark_dimmed}`)
 })
 
 it('works in auto mode', () => {
   render(
-    <ThemeProvider theme={exampleTheme} colorMode="auto">
-      <Box color="text">Hello</Box>
+    <ThemeProvider colorMode="auto">
+      <span style={{color: 'var(--fgColor-default)'}}>Hello</span>
     </ThemeProvider>,
   )
 
-  expect(screen.getByText('Hello')).toHaveStyle('color: rgb(0, 0, 0)')
+  expect(screen.getByText('Hello')).toHaveStyle('color: rgb(31, 35, 40)')
 })
 
-it('works in auto mode (dark)', () => {
+// TODO: need to wire up a prefers color scheme mock, vitest-matchmedia-mock?
+it.skip('works in auto mode (dark)', () => {
   const matchMediaSpy = vi.spyOn(window, 'matchMedia').mockImplementation(query => ({
     matches: true, // enable dark mode
     media: query,
@@ -186,12 +83,12 @@ it('works in auto mode (dark)', () => {
   }))
 
   render(
-    <ThemeProvider theme={exampleTheme} colorMode="auto">
-      <Box color="text">Hello</Box>
+    <ThemeProvider colorMode="auto">
+      <span style={{color: 'var(--fgColor-default)'}}>Hello</span>
     </ThemeProvider>,
   )
 
-  expect(screen.getByText('Hello')).toHaveStyle('color: rgb(255, 255, 255)')
+  expect(screen.getByText('Hello')).toHaveStyle(`color: ${fgDefaultColors.dark}`)
 
   matchMediaSpy.mockRestore()
 })
@@ -202,8 +99,8 @@ it('updates when colorMode prop changes', async () => {
   function App() {
     const [colorMode, setColorMode] = React.useState<'day' | 'night'>('day')
     return (
-      <ThemeProvider theme={exampleTheme} colorMode={colorMode}>
-        <Box color="text">{colorMode}</Box>
+      <ThemeProvider colorMode={colorMode}>
+        <span style={{color: 'var(--fgColor-default)'}}>{colorMode}</span>
         <button type="button" onClick={() => setColorMode(colorMode === 'day' ? 'night' : 'day')}>
           Toggle
         </button>
@@ -214,13 +111,13 @@ it('updates when colorMode prop changes', async () => {
   render(<App />)
 
   // starts in day mode (light scheme)
-  expect(screen.getByText('day')).toHaveStyle('color: rgb(0, 0, 0)')
+  expect(screen.getByText('day')).toHaveStyle(`color: ${fgDefaultColors.light}`)
 
   await user.click(screen.getByRole('button'))
 
   await waitFor(() =>
     // clicking the toggle button enables night mode (dark scheme)
-    expect(screen.getByText('night')).toHaveStyle('color: rgb(255, 255, 255)'),
+    expect(screen.getByText('night')).toHaveStyle(`color: ${fgDefaultColors.dark}`),
   )
 })
 
@@ -230,9 +127,9 @@ it('updates when dayScheme prop changes', async () => {
   function App() {
     const [dayScheme, setDayScheme] = React.useState('light')
     return (
-      <ThemeProvider theme={exampleTheme} dayScheme={dayScheme}>
-        <Box color="text">{dayScheme}</Box>
-        <button type="button" onClick={() => setDayScheme(dayScheme === 'light' ? 'dark_dimmed' : 'light')}>
+      <ThemeProvider dayScheme={dayScheme}>
+        <span style={{color: 'var(--fgColor-default)'}}>{dayScheme}</span>
+        <button type="button" onClick={() => setDayScheme(dayScheme === 'light' ? 'light_high_contrast' : 'light')}>
           Toggle
         </button>
       </ThemeProvider>
@@ -242,13 +139,13 @@ it('updates when dayScheme prop changes', async () => {
   render(<App />)
 
   // starts in day mode (light scheme)
-  expect(screen.getByText('light')).toHaveStyle('color: rgb(0, 0, 0)')
+  expect(screen.getByText('light')).toHaveStyle(`color: ${fgDefaultColors.light}`)
 
   await user.click(screen.getByRole('button'))
 
   await waitFor(() =>
-    // clicking the toggle sets the day scheme to dark_dimmed
-    expect(screen.getByText('dark_dimmed')).toHaveStyle('color: rgb(128, 128, 128)'),
+    // clicking the toggle sets the day scheme to light_high_contrast
+    expect(screen.getByText('light_high_contrast')).toHaveStyle(`color: ${fgDefaultColors.light_high_contrast}`),
   )
 })
 
@@ -258,8 +155,8 @@ it('updates when nightScheme prop changes', async () => {
   function App() {
     const [nightScheme, setNightScheme] = React.useState('dark')
     return (
-      <ThemeProvider theme={exampleTheme} colorMode="night" nightScheme={nightScheme}>
-        <Box color="text">{nightScheme}</Box>
+      <ThemeProvider colorMode="night" nightScheme={nightScheme}>
+        <span style={{color: 'var(--fgColor-default)'}}>{nightScheme}</span>
         <button type="button" onClick={() => setNightScheme(nightScheme === 'dark' ? 'dark_dimmed' : 'dark')}>
           Toggle
         </button>
@@ -270,13 +167,13 @@ it('updates when nightScheme prop changes', async () => {
   render(<App />)
 
   // starts in night mode (dark scheme)
-  expect(screen.getByText('dark')).toHaveStyle('color: rgb(255, 255, 255)')
+  expect(screen.getByText('dark')).toHaveStyle(`color: ${fgDefaultColors.dark}`)
 
   await user.click(screen.getByRole('button'))
 
   await waitFor(() =>
     // clicking the toggle button sets the night scheme to dark_dimmed
-    expect(screen.getByText('dark_dimmed')).toHaveStyle('color: rgb(128, 128, 128)'),
+    expect(screen.getByText('dark_dimmed')).toHaveStyle(`color: ${fgDefaultColors.dark_dimmed}`),
   )
 })
 
@@ -286,12 +183,12 @@ 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>
         <ThemeProvider>
-          <Box color="text">{colorMode}</Box>
+          <span style={{color: 'var(--fgColor-default)'}}>{colorMode}</span>
         </ThemeProvider>
       </ThemeProvider>
     )
@@ -299,11 +196,11 @@ it('inherits colorMode from parent', async () => {
 
   render(<App />)
 
-  expect(screen.getByText('day')).toHaveStyle('color: rgb(0, 0, 0)')
+  expect(screen.getByText('day')).toHaveStyle(`color: ${fgDefaultColors.light}`)
 
   await user.click(screen.getByRole('button'))
 
-  await waitFor(() => expect(screen.getByText('night')).toHaveStyle('color: rgb(255, 255, 255)'))
+  await waitFor(() => expect(screen.getByText('night')).toHaveStyle(`color: ${fgDefaultColors.dark}`))
 })
 
 it('inherits dayScheme from parent', async () => {
@@ -312,12 +209,12 @@ it('inherits dayScheme from parent', async () => {
   function App() {
     const [dayScheme, setDayScheme] = React.useState('light')
     return (
-      <ThemeProvider theme={exampleTheme} colorMode="night" dayScheme={dayScheme}>
-        <button type="button" onClick={() => setDayScheme(dayScheme === 'light' ? 'dark_dimmed' : 'light')}>
+      <ThemeProvider colorMode="night" dayScheme={dayScheme}>
+        <button type="button" onClick={() => setDayScheme(dayScheme === 'light' ? 'light_high_contrast' : 'light')}>
           Toggle
         </button>
         <ThemeProvider colorMode="day">
-          <Box color="text">{dayScheme}</Box>
+          <span style={{color: 'var(--fgColor-default)'}}>{dayScheme}</span>
         </ThemeProvider>
       </ThemeProvider>
     )
@@ -325,11 +222,13 @@ it('inherits dayScheme from parent', async () => {
 
   render(<App />)
 
-  expect(screen.getByText('light')).toHaveStyle('color: rgb(0, 0, 0)')
+  expect(screen.getByText('light')).toHaveStyle(`color: ${fgDefaultColors.light}`)
 
   await user.click(screen.getByRole('button'))
 
-  await waitFor(() => expect(screen.getByText('dark_dimmed')).toHaveStyle('color: rgb(128, 128, 128)'))
+  await waitFor(() =>
+    expect(screen.getByText('light_high_contrast')).toHaveStyle(`color: ${fgDefaultColors.light_high_contrast}`),
+  )
 })
 
 it('inherits nightScheme from parent', async () => {
@@ -338,12 +237,12 @@ 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>
         <ThemeProvider colorMode="night">
-          <Box color="text">{nightScheme}</Box>
+          <span style={{color: 'var(--fgColor-default)'}}>{nightScheme}</span>
         </ThemeProvider>
       </ThemeProvider>
     )
@@ -351,11 +250,11 @@ it('inherits nightScheme from parent', async () => {
 
   render(<App />)
 
-  expect(screen.getByText('dark')).toHaveStyle('color: rgb(255, 255, 255)')
+  expect(screen.getByText('dark')).toHaveStyle(`color: ${fgDefaultColors.dark}`)
 
   await user.click(screen.getByRole('button'))
 
-  await waitFor(() => expect(screen.getByText('dark_dimmed')).toHaveStyle('color: rgb(128, 128, 128)'))
+  await waitFor(() => expect(screen.getByText('dark_dimmed')).toHaveStyle(`color: ${fgDefaultColors.dark_dimmed}`))
 })
 
 describe('setColorMode', () => {
@@ -372,19 +271,19 @@ describe('setColorMode', () => {
     }
 
     render(
-      <ThemeProvider theme={exampleTheme} colorMode="day">
-        <Box color="text">Hello</Box>
+      <ThemeProvider colorMode="day">
+        <span style={{color: 'var(--fgColor-default)'}}>Hello</span>
         <ToggleMode />
       </ThemeProvider>,
     )
 
     // starts in day mode (light scheme)
-    expect(screen.getByText('Hello')).toHaveStyle('color: rgb(0, 0, 0)')
+    expect(screen.getByText('Hello')).toHaveStyle(`color: ${fgDefaultColors.light}`)
 
     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)')
+    expect(screen.getByText('Hello')).toHaveStyle(`color: ${fgDefaultColors.dark}`)
   })
 })
 
@@ -402,19 +301,19 @@ describe('setDayScheme', () => {
     }
 
     render(
-      <ThemeProvider theme={exampleTheme} colorMode="day">
-        <Box color="text">Hello</Box>
+      <ThemeProvider colorMode="day">
+        <span style={{color: 'var(--fgColor-default)'}}>Hello</span>
         <ToggleDayScheme />
       </ThemeProvider>,
     )
 
     // starts in day mode (light scheme)
-    expect(screen.getByText('Hello')).toHaveStyle('color: rgb(0, 0, 0)')
+    expect(screen.getByText('Hello')).toHaveStyle(`color: ${fgDefaultColors.light}`)
 
     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)')
+    expect(screen.getByText('Hello')).toHaveStyle(`color: ${fgDefaultColors.dark}`)
   })
 })
 
@@ -432,19 +331,19 @@ describe('setNightScheme', () => {
     }
 
     render(
-      <ThemeProvider theme={exampleTheme} colorMode="night">
-        <Box color="text">Hello</Box>
+      <ThemeProvider colorMode="night">
+        <span style={{color: 'var(--fgColor-default)'}}>Hello</span>
         <ToggleNightScheme />
       </ThemeProvider>,
     )
 
     // starts in night mode (dark scheme)
-    expect(screen.getByText('Hello')).toHaveStyle('color: rgb(255, 255, 255)')
+    expect(screen.getByText('Hello')).toHaveStyle(`color: ${fgDefaultColors.dark}`)
 
     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)')
+    expect(screen.getByText('Hello')).toHaveStyle(`color: ${fgDefaultColors.dark_dimmed}`)
   })
 })
 
@@ -471,11 +370,11 @@ describe('useColorSchemeVar', () => {
         'inherit',
       )
 
-      return <Box bg={customBg}>Hello</Box>
+      return <span style={{backgroundColor: customBg}}>Hello</span>
     }
 
     render(
-      <ThemeProvider theme={exampleTheme} nightScheme="dark_dimmed">
+      <ThemeProvider nightScheme="dark_dimmed">
         <CustomBg />
         <ToggleMode />
       </ThemeProvider>,
@@ -503,11 +402,11 @@ describe('useColorSchemeVar', () => {
     function CustomBg() {
       const customBg = useColorSchemeVar({dark: 'blue'}, 'red')
 
-      return <Box bg={customBg}>Hello</Box>
+      return <span style={{backgroundColor: customBg}}>Hello</span>
     }
 
     render(
-      <ThemeProvider theme={exampleTheme}>
+      <ThemeProvider>
         <CustomBg />
         <ToggleMode />
       </ThemeProvider>,
@@ -526,7 +425,7 @@ describe('useTheme().resolvedColorScheme', () => {
     const Component = () => {
       const {resolvedColorScheme} = useTheme()
 
-      return <Box data-testid="text">{resolvedColorScheme}</Box>
+      return <span data-testid="text">{resolvedColorScheme}</span>
     }
 
     render(<Component />)
@@ -534,38 +433,21 @@ 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 <Box data-testid="text">{resolvedColorScheme}</Box>
-    }
-
-    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 <Box data-testid="text">{resolvedColorScheme}</Box>
+      return <span data-testid="text">{resolvedColorScheme}</span>
     }
 
     const schemeToApply = 'dark'
 
     render(
-      <ThemeProvider theme={exampleTheme} colorMode="day" dayScheme={schemeToApply}>
+      <ThemeProvider colorMode="day" dayScheme={schemeToApply}>
         <Component />
       </ThemeProvider>,
     )
 
-    expect(exampleTheme.colorSchemes).toHaveProperty(schemeToApply)
     expect(screen.getByTestId('text').textContent).toEqual(schemeToApply)
   })
 
@@ -574,22 +456,21 @@ describe('useTheme().resolvedColorScheme', () => {
     const Component = () => {
       const {resolvedColorScheme} = useTheme()
 
-      return <Box data-testid="text">{resolvedColorScheme}</Box>
+      return <span data-testid="text">{resolvedColorScheme}</span>
     }
 
     const schemeToApply = 'totally-invalid-colorscheme'
     render(
-      <ThemeProvider theme={exampleTheme} colorMode="day" dayScheme={schemeToApply}>
+      <ThemeProvider colorMode="day" dayScheme={schemeToApply}>
         <Component />
       </ThemeProvider>,
     )
 
-    const defaultThemeColorScheme = Object.keys(exampleTheme.colorSchemes)[0]
+    const defaultThemeColorScheme = 'light'
 
     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')
+    expect(screen.getByTestId('text').textContent).toEqual(defaultThemeColorScheme)
 
     spy.mockRestore()
   })
@@ -599,20 +480,19 @@ describe('useTheme().resolvedColorScheme', () => {
       const Component = () => {
         const {resolvedColorScheme} = useTheme()
 
-        return <Box data-testid="text">{resolvedColorScheme}</Box>
+        return <span data-testid="text">{resolvedColorScheme}</span>
       }
 
       const schemeToApply = 'dark'
 
       render(
-        <ThemeProvider theme={exampleTheme} colorMode="day" dayScheme={schemeToApply}>
+        <ThemeProvider colorMode="day" dayScheme={schemeToApply}>
           <ThemeProvider>
             <Component />
           </ThemeProvider>
         </ThemeProvider>,
       )
 
-      expect(exampleTheme.colorSchemes).toHaveProperty(schemeToApply)
       expect(screen.getByTestId('text').textContent).toEqual(schemeToApply)
     })
 
@@ -622,24 +502,23 @@ describe('useTheme().resolvedColorScheme', () => {
       const Component = () => {
         const {resolvedColorScheme} = useTheme()
 
-        return <Box data-testid="text">{resolvedColorScheme}</Box>
+        return <span data-testid="text">{resolvedColorScheme}</span>
       }
 
       const schemeToApply = 'totally-invalid-colorscheme'
       render(
-        <ThemeProvider theme={exampleTheme} colorMode="day" dayScheme={schemeToApply}>
+        <ThemeProvider colorMode="day" dayScheme={schemeToApply}>
           <ThemeProvider>
             <Component />
           </ThemeProvider>
         </ThemeProvider>,
       )
 
-      const defaultThemeColorScheme = Object.keys(exampleTheme.colorSchemes)[0]
+      const defaultThemeColorScheme = 'light'
 
       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')
+      expect(screen.getByTestId('text').textContent).toEqual(defaultThemeColorScheme)
 
       spy.mockRestore()
     })
diff --git a/packages/styled-react/src/__tests__/ThemeProvider.browser.test.tsx b/packages/styled-react/src/__tests__/ThemeProvider.browser.test.tsx
new file mode 100644
index 00000000000..afb82cab2dd
--- /dev/null
+++ b/packages/styled-react/src/__tests__/ThemeProvider.browser.test.tsx
@@ -0,0 +1,707 @@
+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 {FeatureFlags} from '@primer/react/experimental'
+import {ThemeProvider, useColorSchemeVar, useTheme, Box} 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',
+      },
+    },
+  },
+}
+
+it('respects theme prop', () => {
+  const theme = {
+    colors: {
+      text: '#f00',
+    },
+    space: ['0', '0.25rem'],
+  }
+
+  render(
+    <FeatureFlags flags={{primer_react_use_styled_react_theming: true}}>
+      <ThemeProvider theme={theme}>
+        <Box color="text" mb={1}>
+          Hello
+        </Box>
+      </ThemeProvider>
+    </FeatureFlags>,
+  )
+
+  expect(screen.getByText('Hello')).toHaveStyle('color: #f00')
+  expect(screen.getByText('Hello')).toHaveStyle('margin-bottom: 4px')
+})
+
+it('has default theme', () => {
+  render(
+    <FeatureFlags flags={{primer_react_use_styled_react_theming: true}}>
+      <ThemeProvider>
+        <Box color="fg.default" mb={1}>
+          Hello
+        </Box>
+      </ThemeProvider>
+    </FeatureFlags>,
+  )
+
+  expect(screen.getByText('Hello')).toMatchSnapshot()
+})
+
+it('inherits theme from parent', () => {
+  render(
+    <FeatureFlags flags={{primer_react_use_styled_react_theming: true}}>
+      <ThemeProvider theme={exampleTheme}>
+        <ThemeProvider>
+          <Box color="text">Hello</Box>
+        </ThemeProvider>
+      </ThemeProvider>
+    </FeatureFlags>,
+  )
+
+  expect(screen.getByText('Hello')).toHaveStyle('color: rgb(0, 0, 0)')
+})
+
+it('defaults to light color scheme', () => {
+  render(
+    <FeatureFlags flags={{primer_react_use_styled_react_theming: true}}>
+      <ThemeProvider theme={exampleTheme}>
+        <Box color="text">Hello</Box>
+      </ThemeProvider>
+    </FeatureFlags>,
+  )
+
+  expect(screen.getByText('Hello')).toHaveStyle('color: rgb(0, 0, 0)')
+})
+
+it('defaults to dark color scheme in night mode', () => {
+  render(
+    <FeatureFlags flags={{primer_react_use_styled_react_theming: true}}>
+      <ThemeProvider theme={exampleTheme} colorMode="night">
+        <Box color="text">Hello</Box>
+      </ThemeProvider>
+    </FeatureFlags>,
+  )
+
+  expect(screen.getByText('Hello')).toHaveStyle('color: rgb(255, 255, 255)')
+})
+
+it('defaults to first color scheme when passed an invalid color scheme name', () => {
+  const spy = vi.spyOn(console, 'error').mockImplementationOnce(() => {})
+
+  render(
+    <FeatureFlags flags={{primer_react_use_styled_react_theming: true}}>
+      <ThemeProvider theme={exampleTheme} dayScheme="foo">
+        <Box color="text">Hello</Box>
+      </ThemeProvider>
+    </FeatureFlags>,
+  )
+
+  expect(spy).toHaveBeenCalledWith('`foo` scheme not defined in `theme.colorSchemes`')
+  expect(screen.getByText('Hello')).toHaveStyle('color: rgb(0, 0, 0)')
+
+  spy.mockRestore()
+})
+
+it('respects nightScheme prop', () => {
+  render(
+    <FeatureFlags flags={{primer_react_use_styled_react_theming: true}}>
+      <ThemeProvider theme={exampleTheme} colorMode="night" nightScheme="dark_dimmed">
+        <Box color="text">Hello</Box>
+      </ThemeProvider>
+    </FeatureFlags>,
+  )
+
+  expect(screen.getByText('Hello')).toHaveStyle('color: rgb(128, 128, 128)')
+})
+
+it('respects nightScheme prop with colorMode="dark"', () => {
+  render(
+    <FeatureFlags flags={{primer_react_use_styled_react_theming: true}}>
+      <ThemeProvider theme={exampleTheme} colorMode="dark" nightScheme="dark_dimmed">
+        <Box color="text">Hello</Box>
+      </ThemeProvider>
+    </FeatureFlags>,
+  )
+
+  expect(screen.getByText('Hello')).toHaveStyle('color: rgb(128, 128, 128)')
+})
+
+it('respects dayScheme prop', () => {
+  render(
+    <FeatureFlags flags={{primer_react_use_styled_react_theming: true}}>
+      <ThemeProvider theme={exampleTheme} colorMode="day" dayScheme="dark" nightScheme="dark_dimmed">
+        <Box color="text">Hello</Box>
+      </ThemeProvider>
+    </FeatureFlags>,
+  )
+
+  expect(screen.getByText('Hello')).toHaveStyle('color: rgb(255, 255, 255)')
+})
+
+it('respects dayScheme prop with colorMode="light"', () => {
+  render(
+    <FeatureFlags flags={{primer_react_use_styled_react_theming: true}}>
+      <ThemeProvider theme={exampleTheme} colorMode="light" dayScheme="dark" nightScheme="dark_dimmed">
+        <Box color="text">Hello</Box>
+      </ThemeProvider>
+    </FeatureFlags>,
+  )
+
+  expect(screen.getByText('Hello')).toHaveStyle('color: rgb(255, 255, 255)')
+})
+
+it('works in auto mode', () => {
+  render(
+    <FeatureFlags flags={{primer_react_use_styled_react_theming: true}}>
+      <ThemeProvider theme={exampleTheme} colorMode="auto">
+        <Box color="text">Hello</Box>
+      </ThemeProvider>
+    </FeatureFlags>,
+  )
+
+  expect(screen.getByText('Hello')).toHaveStyle('color: rgb(0, 0, 0)')
+})
+
+it('works in auto mode (dark)', () => {
+  const matchMediaSpy = vi.spyOn(window, 'matchMedia').mockImplementation(query => ({
+    matches: true, // enable dark mode
+    media: query,
+    onchange: null,
+    addListener: vi.fn(), // deprecated
+    removeListener: vi.fn(), // deprecated
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+    dispatchEvent: vi.fn(),
+  }))
+
+  render(
+    <FeatureFlags flags={{primer_react_use_styled_react_theming: true}}>
+      <ThemeProvider theme={exampleTheme} colorMode="auto">
+        <Box color="text">Hello</Box>
+      </ThemeProvider>
+    </FeatureFlags>,
+  )
+
+  expect(screen.getByText('Hello')).toHaveStyle('color: rgb(255, 255, 255)')
+
+  matchMediaSpy.mockRestore()
+})
+
+it('updates when colorMode prop changes', async () => {
+  const user = userEvent.setup()
+
+  function App() {
+    const [colorMode, setColorMode] = React.useState<'day' | 'night'>('day')
+    return (
+      <FeatureFlags flags={{primer_react_use_styled_react_theming: true}}>
+        <ThemeProvider theme={exampleTheme} colorMode={colorMode}>
+          <Box color="text">{colorMode}</Box>
+          <button type="button" onClick={() => setColorMode(colorMode === 'day' ? 'night' : 'day')}>
+            Toggle
+          </button>
+        </ThemeProvider>
+      </FeatureFlags>
+    )
+  }
+
+  render(<App />)
+
+  // starts in day mode (light scheme)
+  expect(screen.getByText('day')).toHaveStyle('color: rgb(0, 0, 0)')
+
+  await user.click(screen.getByRole('button'))
+
+  await waitFor(() =>
+    // clicking the toggle button enables night mode (dark scheme)
+    expect(screen.getByText('night')).toHaveStyle('color: rgb(255, 255, 255)'),
+  )
+})
+
+it('updates when dayScheme prop changes', async () => {
+  const user = userEvent.setup()
+
+  function App() {
+    const [dayScheme, setDayScheme] = React.useState('light')
+    return (
+      <FeatureFlags flags={{primer_react_use_styled_react_theming: true}}>
+        <ThemeProvider theme={exampleTheme} dayScheme={dayScheme}>
+          <Box color="text">{dayScheme}</Box>
+          <button type="button" onClick={() => setDayScheme(dayScheme === 'light' ? 'dark_dimmed' : 'light')}>
+            Toggle
+          </button>
+        </ThemeProvider>
+      </FeatureFlags>
+    )
+  }
+
+  render(<App />)
+
+  // starts in day mode (light scheme)
+  expect(screen.getByText('light')).toHaveStyle('color: rgb(0, 0, 0)')
+
+  await user.click(screen.getByRole('button'))
+
+  await waitFor(() =>
+    // clicking the toggle sets the day scheme to dark_dimmed
+    expect(screen.getByText('dark_dimmed')).toHaveStyle('color: rgb(128, 128, 128)'),
+  )
+})
+
+it('updates when nightScheme prop changes', async () => {
+  const user = userEvent.setup()
+
+  function App() {
+    const [nightScheme, setNightScheme] = React.useState('dark')
+    return (
+      <FeatureFlags flags={{primer_react_use_styled_react_theming: true}}>
+        <ThemeProvider theme={exampleTheme} colorMode="night" nightScheme={nightScheme}>
+          <Box color="text">{nightScheme}</Box>
+          <button type="button" onClick={() => setNightScheme(nightScheme === 'dark' ? 'dark_dimmed' : 'dark')}>
+            Toggle
+          </button>
+        </ThemeProvider>
+      </FeatureFlags>
+    )
+  }
+
+  render(<App />)
+
+  // starts in night mode (dark scheme)
+  expect(screen.getByText('dark')).toHaveStyle('color: rgb(255, 255, 255)')
+
+  await user.click(screen.getByRole('button'))
+
+  await waitFor(() =>
+    // clicking the toggle button sets the night scheme to dark_dimmed
+    expect(screen.getByText('dark_dimmed')).toHaveStyle('color: rgb(128, 128, 128)'),
+  )
+})
+
+it('inherits colorMode from parent', async () => {
+  const user = userEvent.setup()
+
+  function App() {
+    const [colorMode, setcolorMode] = React.useState<'day' | 'night'>('day')
+    return (
+      <FeatureFlags flags={{primer_react_use_styled_react_theming: true}}>
+        <ThemeProvider theme={exampleTheme} colorMode={colorMode}>
+          <button type="button" onClick={() => setcolorMode(colorMode === 'day' ? 'night' : 'day')}>
+            Toggle
+          </button>
+          <ThemeProvider>
+            <Box color="text">{colorMode}</Box>
+          </ThemeProvider>
+        </ThemeProvider>
+      </FeatureFlags>
+    )
+  }
+
+  render(<App />)
+
+  expect(screen.getByText('day')).toHaveStyle('color: rgb(0, 0, 0)')
+
+  await user.click(screen.getByRole('button'))
+
+  await waitFor(() => expect(screen.getByText('night')).toHaveStyle('color: rgb(255, 255, 255)'))
+})
+
+it('inherits dayScheme from parent', async () => {
+  const user = userEvent.setup()
+
+  function App() {
+    const [dayScheme, setDayScheme] = React.useState('light')
+    return (
+      <FeatureFlags flags={{primer_react_use_styled_react_theming: true}}>
+        <ThemeProvider theme={exampleTheme} colorMode="night" dayScheme={dayScheme}>
+          <button type="button" onClick={() => setDayScheme(dayScheme === 'light' ? 'dark_dimmed' : 'light')}>
+            Toggle
+          </button>
+          <ThemeProvider colorMode="day">
+            <Box color="text">{dayScheme}</Box>
+          </ThemeProvider>
+        </ThemeProvider>
+      </FeatureFlags>
+    )
+  }
+
+  render(<App />)
+
+  expect(screen.getByText('light')).toHaveStyle('color: rgb(0, 0, 0)')
+
+  await user.click(screen.getByRole('button'))
+
+  await waitFor(() => expect(screen.getByText('dark_dimmed')).toHaveStyle('color: rgb(128, 128, 128)'))
+})
+
+it('inherits nightScheme from parent', async () => {
+  const user = userEvent.setup()
+
+  function App() {
+    const [nightScheme, setNightScheme] = React.useState('dark')
+    return (
+      <FeatureFlags flags={{primer_react_use_styled_react_theming: true}}>
+        <ThemeProvider theme={exampleTheme} colorMode="day" nightScheme={nightScheme}>
+          <button type="button" onClick={() => setNightScheme(nightScheme === 'dark' ? 'dark_dimmed' : 'dark')}>
+            Toggle
+          </button>
+          <ThemeProvider colorMode="night">
+            <Box color="text">{nightScheme}</Box>
+          </ThemeProvider>
+        </ThemeProvider>
+      </FeatureFlags>
+    )
+  }
+
+  render(<App />)
+
+  expect(screen.getByText('dark')).toHaveStyle('color: rgb(255, 255, 255)')
+
+  await user.click(screen.getByRole('button'))
+
+  await waitFor(() => expect(screen.getByText('dark_dimmed')).toHaveStyle('color: rgb(128, 128, 128)'))
+})
+
+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(
+      <FeatureFlags flags={{primer_react_use_styled_react_theming: true}}>
+        <ThemeProvider theme={exampleTheme} colorMode="day">
+          <Box color="text">Hello</Box>
+          <ToggleMode />
+        </ThemeProvider>
+      </FeatureFlags>,
+    )
+
+    // 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(
+      <FeatureFlags flags={{primer_react_use_styled_react_theming: true}}>
+        <ThemeProvider theme={exampleTheme} colorMode="day">
+          <Box color="text">Hello</Box>
+          <ToggleDayScheme />
+        </ThemeProvider>
+      </FeatureFlags>,
+    )
+
+    // 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(
+      <FeatureFlags flags={{primer_react_use_styled_react_theming: true}}>
+        <ThemeProvider theme={exampleTheme} colorMode="night">
+          <Box color="text">Hello</Box>
+          <ToggleNightScheme />
+        </ThemeProvider>
+      </FeatureFlags>,
+    )
+
+    // 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('useColorSchemeVar', () => {
+  it('updates value when scheme changes', async () => {
+    const user = userEvent.setup()
+
+    function ToggleMode() {
+      const {colorMode, setColorMode} = useTheme()
+      return (
+        <button type="button" onClick={() => setColorMode(colorMode === 'day' ? 'night' : 'day')}>
+          Toggle
+        </button>
+      )
+    }
+
+    function CustomBg() {
+      const customBg = useColorSchemeVar(
+        {
+          light: 'red',
+          dark: 'blue',
+          dark_dimmed: 'green',
+        },
+        'inherit',
+      )
+
+      return <Box bg={customBg}>Hello</Box>
+    }
+
+    render(
+      <FeatureFlags flags={{primer_react_use_styled_react_theming: true}}>
+        <ThemeProvider theme={exampleTheme} nightScheme="dark_dimmed">
+          <CustomBg />
+          <ToggleMode />
+        </ThemeProvider>
+      </FeatureFlags>,
+    )
+
+    expect(screen.getByText('Hello')).toHaveStyle('background-color: rgb(255, 0, 0)')
+
+    await user.click(screen.getByRole('button'))
+
+    expect(screen.getByText('Hello')).toHaveStyle('background-color: rgb(0, 128, 0)')
+  })
+
+  it('supports fallback value', async () => {
+    const user = userEvent.setup()
+
+    function ToggleMode() {
+      const {colorMode, setColorMode} = useTheme()
+      return (
+        <button type="button" onClick={() => setColorMode(colorMode === 'day' ? 'night' : 'day')}>
+          Toggle
+        </button>
+      )
+    }
+
+    function CustomBg() {
+      const customBg = useColorSchemeVar({dark: 'blue'}, 'red')
+
+      return <Box bg={customBg}>Hello</Box>
+    }
+
+    render(
+      <FeatureFlags flags={{primer_react_use_styled_react_theming: true}}>
+        <ThemeProvider theme={exampleTheme}>
+          <CustomBg />
+          <ToggleMode />
+        </ThemeProvider>
+      </FeatureFlags>,
+    )
+
+    expect(screen.getByText('Hello')).toHaveStyle('background-color: rgb(255, 0, 0)')
+
+    await user.click(screen.getByRole('button'))
+
+    expect(screen.getByText('Hello')).toHaveStyle('background-color: rgb(0, 0, 255)')
+  })
+})
+
+describe('useTheme().resolvedColorScheme', () => {
+  it('is undefined when not in a theme', () => {
+    const Component = () => {
+      const {resolvedColorScheme} = useTheme()
+
+      return <Box data-testid="text">{resolvedColorScheme}</Box>
+    }
+
+    render(<Component />)
+
+    expect(screen.getByTestId('text').textContent).toEqual('')
+  })
+
+  it('is undefined when the theme has no colorScheme object', () => {
+    const Component = () => {
+      const {resolvedColorScheme} = useTheme()
+
+      return <Box data-testid="text">{resolvedColorScheme}</Box>
+    }
+
+    render(
+      <FeatureFlags flags={{primer_react_use_styled_react_theming: true}}>
+        <ThemeProvider theme={{color: 'red'}}>
+          <Component />
+        </ThemeProvider>
+      </FeatureFlags>,
+    )
+
+    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 <Box data-testid="text">{resolvedColorScheme}</Box>
+    }
+
+    const schemeToApply = 'dark'
+
+    render(
+      <FeatureFlags flags={{primer_react_use_styled_react_theming: true}}>
+        <ThemeProvider theme={exampleTheme} colorMode="day" dayScheme={schemeToApply}>
+          <Component />
+        </ThemeProvider>
+      </FeatureFlags>,
+    )
+
+    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 <Box data-testid="text">{resolvedColorScheme}</Box>
+    }
+
+    const schemeToApply = 'totally-invalid-colorscheme'
+    render(
+      <FeatureFlags flags={{primer_react_use_styled_react_theming: true}}>
+        <ThemeProvider theme={exampleTheme} colorMode="day" dayScheme={schemeToApply}>
+          <Component />
+        </ThemeProvider>
+      </FeatureFlags>,
+    )
+
+    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 <Box data-testid="text">{resolvedColorScheme}</Box>
+      }
+
+      const schemeToApply = 'dark'
+
+      render(
+        <FeatureFlags flags={{primer_react_use_styled_react_theming: true}}>
+          <ThemeProvider theme={exampleTheme} colorMode="day" dayScheme={schemeToApply}>
+            <FeatureFlags flags={{primer_react_use_styled_react_theming: true}}>
+              <ThemeProvider>
+                <Component />
+              </ThemeProvider>
+            </FeatureFlags>
+          </ThemeProvider>
+        </FeatureFlags>,
+      )
+
+      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 <Box data-testid="text">{resolvedColorScheme}</Box>
+      }
+
+      const schemeToApply = 'totally-invalid-colorscheme'
+      render(
+        <FeatureFlags flags={{primer_react_use_styled_react_theming: true}}>
+          <ThemeProvider theme={exampleTheme} colorMode="day" dayScheme={schemeToApply}>
+            <FeatureFlags flags={{primer_react_use_styled_react_theming: true}}>
+              <ThemeProvider>
+                <Component />
+              </ThemeProvider>
+            </FeatureFlags>
+          </ThemeProvider>
+        </FeatureFlags>,
+      )
+
+      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/react/src/__tests__/__snapshots__/ThemeProvider.test.tsx.snap b/packages/styled-react/src/__tests__/__snapshots__/ThemeProvider.browser.test.tsx.snap
similarity index 100%
rename from packages/react/src/__tests__/__snapshots__/ThemeProvider.test.tsx.snap
rename to packages/styled-react/src/__tests__/__snapshots__/ThemeProvider.browser.test.tsx.snap