github
diff --git a/‎src/color-schemes/components/BrandThemeProvider.tsx‎
Lines changed: 15 additions & 0 deletions b/‎src/color-schemes/components/BrandThemeProvider.tsx‎
Lines changed: 15 additions & 0 deletions
diff --git a/‎src/color-schemes/lib/get-brand-color-mode.ts‎
Lines changed: 3 additions & 0 deletions b/‎src/color-schemes/lib/get-brand-color-mode.ts‎
Lines changed: 3 additions & 0 deletions
diff --git a/‎src/color-schemes/tests/get-brand-color-mode.ts‎
Lines changed: 14 additions & 0 deletions b/‎src/color-schemes/tests/get-brand-color-mode.ts‎
Lines changed: 14 additions & 0 deletions
diff --git a/‎src/frame/pages/app.tsx‎
Lines changed: 4 additions & 4 deletions b/‎src/frame/pages/app.tsx‎
Lines changed: 4 additions & 4 deletions
@@ -0,0 +1,15 @@
+import type { PropsWithChildren } from 'react'
+import { useTheme as usePrimerTheme } from '@primer/react'
+import { ThemeProvider } from '@primer/react-brand'
+
+import { getBrandColorMode } from '@/color-schemes/lib/get-brand-color-mode'
+
+export const BrandThemeProvider = ({ children }: PropsWithChildren) => {
+  // We need to resolve the color scheme through PRC first, because there are
+  // otherwise many unhandled edge cases.
+  // E.g. auto mode + dark mode + light scheme.
+  const { resolvedColorScheme } = usePrimerTheme()
+  const colorMode = getBrandColorMode(resolvedColorScheme)
+
+  return <ThemeProvider colorMode={colorMode}>{children}</ThemeProvider>
+}
@@ -0,0 +1,3 @@
+export function getBrandColorMode(resolvedColorScheme?: string) {
+  return resolvedColorScheme?.startsWith('dark') ? 'dark' : 'light'
+}
@@ -0,0 +1,14 @@
+import { describe, expect, test } from 'vitest'
+
+import { getBrandColorMode } from '@/color-schemes/lib/get-brand-color-mode'
+
+describe('getBrandColorMode', () => {
+  test.each([
+    ['light', 'light'],
+    ['dark', 'dark'],
+    ['dark_dimmed', 'dark'],
+    ['dark_high_contrast', 'dark'],
+  ])('maps the %s scheme to %s mode', (scheme, mode) => {
+    expect(getBrandColorMode(scheme)).toBe(mode)
+  })
+})
@@ -3,9 +3,9 @@ import App from 'next/app'
 import type { AppProps, AppContext } from 'next/app'
 import Head from 'next/head'
 import { ThemeProvider } from '@primer/react'
-import { ThemeProvider as BrandThemeProvider } from '@primer/react-brand'
 import { useRouter } from 'next/router'
 
+import { BrandThemeProvider } from '@/color-schemes/components/BrandThemeProvider'
 import { initializeEvents } from '@/events/components/events'
 import {
   initializeExperiments,
@@ -117,10 +117,10 @@ const MyApp = ({ Component, pageProps, languagesContext, stagingName }: MyAppPro
           components receive brand theme context during the Docs 2026 migration
           (github/docs-engineering#5879). Runs alongside the @primer/react
           ThemeProvider above while the component-by-component swap is in progress.
-          Brand expects a CSS color mode ('auto' | 'light' | 'dark'), so pass
-          theme.css.colorMode rather than the component ('auto' | 'day' | 'night') mode.
+          Resolve Brand's color mode from Primer React's active color scheme so
+          opposite-mode day/night schemes stay in sync.
         */}
-        <BrandThemeProvider colorMode={theme.css.colorMode}>
+        <BrandThemeProvider>
           <LanguagesContext.Provider value={languagesContext}>
             <SharedUIContextProvider>
               <ClientSideHashFocus />
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+export function getBrandColorMode(resolvedColorScheme?: string) {`
	`2`	`+ return resolvedColorScheme?.startsWith('dark') ? 'dark' : 'light'`
	`3`	`+}`