From f292d310f8f3a7acd90654d17bbca35e559b64e9 Mon Sep 17 00:00:00 2001
From: Daniel Guillan <danielguillan@github.com>
Date: Wed, 29 Apr 2026 22:00:06 +0200
Subject: [PATCH 01/18] Add data-color-scheme attribute for color mode scheme
 derivation

---
 .../react/src/Accordion/Accordion.module.css  |  2 +-
 .../src/Card/Card.stories.shared.module.css   |  2 +-
 packages/react/src/Heading/Heading.module.css |  2 +-
 .../react/src/Hero/Hero.stories.module.css    |  4 +-
 .../src/InlineLink/InlineLink.module.css      |  2 +-
 packages/react/src/Label/Label.module.css     |  2 +-
 .../MinimalFooter/MinimalFooter.module.css    |  2 +-
 packages/react/src/SubNav/SubNav.module.css   |  2 +-
 packages/react/src/Text/Text.module.css       |  2 +-
 .../src/ThemeProvider/ThemeProvider.test.tsx  | 46 ++++++++++++++++++-
 .../react/src/ThemeProvider/ThemeProvider.tsx | 29 ++++++++++--
 packages/react/src/Token/Token.module.css     |  2 +-
 .../FeaturePreviewLevelOne.module.css         |  4 +-
 .../FeaturePreviewLevelTwo.module.css         |  2 +-
 .../Overview/FlexSuiteAIOverview.module.css   |  4 +-
 .../CategoryPage/CategoryPage.module.css      |  8 ++--
 .../SolutionPage/SolutionPage.module.css      |  8 ++--
 .../seo/Category/CategoryPage.module.css      |  4 +-
 18 files changed, 96 insertions(+), 31 deletions(-)

diff --git a/packages/react/src/Accordion/Accordion.module.css b/packages/react/src/Accordion/Accordion.module.css
index 9ecb41c0ec..be54023e10 100644
--- a/packages/react/src/Accordion/Accordion.module.css
+++ b/packages/react/src/Accordion/Accordion.module.css
@@ -276,7 +276,7 @@ details[open] > .Accordion__summary.Accordion__summary--default .Accordion__summ
   line-height: var(--brand-text-lineHeight-200);
 }
 
-[data-color-mode='dark'] .Accordion__content {
+:is([data-color-mode='dark'], [data-color-scheme='dark']) .Accordion__content {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: auto;
 }
diff --git a/packages/react/src/Card/Card.stories.shared.module.css b/packages/react/src/Card/Card.stories.shared.module.css
index 01070f8006..434542aedc 100644
--- a/packages/react/src/Card/Card.stories.shared.module.css
+++ b/packages/react/src/Card/Card.stories.shared.module.css
@@ -34,7 +34,7 @@
     var(--brand-color-canvas-default);
 }
 
-[data-color-mode='dark'] .gridColumnArrowHover .gridItem:is(:hover, :focus-within) {
+:is([data-color-mode='dark'], [data-color-scheme='dark']) .gridColumnArrowHover .gridItem:is(:hover, :focus-within) {
   background: linear-gradient(180deg, rgba(242, 245, 243, 0.1) 0%, rgba(242, 245, 243, 0) 100%),
     var(--brand-color-canvas-default);
 }
diff --git a/packages/react/src/Heading/Heading.module.css b/packages/react/src/Heading/Heading.module.css
index 98beabb78d..532388a03a 100644
--- a/packages/react/src/Heading/Heading.module.css
+++ b/packages/react/src/Heading/Heading.module.css
@@ -15,7 +15,7 @@
   --condensed-stretch: 90%;
 }
 
-[data-color-mode='dark'] .Heading {
+:is([data-color-mode='dark'], [data-color-scheme='dark']) .Heading {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
diff --git a/packages/react/src/Hero/Hero.stories.module.css b/packages/react/src/Hero/Hero.stories.module.css
index 02c4930f69..43864f2963 100644
--- a/packages/react/src/Hero/Hero.stories.module.css
+++ b/packages/react/src/Hero/Hero.stories.module.css
@@ -12,10 +12,10 @@
 .heroWithCardsExample {
   --customCardsBackgroundColor: transparent;
 }
-[data-color-mode='light'] .heroWithCardsExample {
+:is([data-color-mode='light'], [data-color-scheme='light']) .heroWithCardsExample {
   --customCardsBackgroundColor: var(--base-color-scale-gray-1);
 }
-[data-color-mode='dark'] .heroWithCardsExample {
+:is([data-color-mode='dark'], [data-color-scheme='dark']) .heroWithCardsExample {
   --customCardsBackgroundColor: var(--base-color-scale-gray-9);
 }
 
diff --git a/packages/react/src/InlineLink/InlineLink.module.css b/packages/react/src/InlineLink/InlineLink.module.css
index 42224c1adb..9f0dbd77c9 100644
--- a/packages/react/src/InlineLink/InlineLink.module.css
+++ b/packages/react/src/InlineLink/InlineLink.module.css
@@ -24,7 +24,7 @@
   color: var(--brand-InlineLink-color-pressed);
 }
 
-[data-color-mode='dark'] .InlineLink {
+:is([data-color-mode='dark'], [data-color-scheme='dark']) .InlineLink {
   -webkit-font-smoothing: subpixel-antialiased;
   -moz-osx-font-smoothing: auto;
 }
diff --git a/packages/react/src/Label/Label.module.css b/packages/react/src/Label/Label.module.css
index 737941a86b..8d9436e1ec 100644
--- a/packages/react/src/Label/Label.module.css
+++ b/packages/react/src/Label/Label.module.css
@@ -32,7 +32,7 @@
   text-align: center;
 }
 
-[data-color-mode='dark'] .Label {
+:is([data-color-mode='dark'], [data-color-scheme='dark']) .Label {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: auto;
 }
diff --git a/packages/react/src/MinimalFooter/MinimalFooter.module.css b/packages/react/src/MinimalFooter/MinimalFooter.module.css
index b3c7b1a0ad..49bf2243c1 100644
--- a/packages/react/src/MinimalFooter/MinimalFooter.module.css
+++ b/packages/react/src/MinimalFooter/MinimalFooter.module.css
@@ -81,7 +81,7 @@
   height: auto;
 }
 
-[data-color-mode='light'] .Footer__social-icon {
+:is([data-color-mode='light'], [data-color-scheme='light']) .Footer__social-icon {
   filter: brightness(95%) saturate(100%);
 }
 
diff --git a/packages/react/src/SubNav/SubNav.module.css b/packages/react/src/SubNav/SubNav.module.css
index 08a23b4447..0903601a22 100644
--- a/packages/react/src/SubNav/SubNav.module.css
+++ b/packages/react/src/SubNav/SubNav.module.css
@@ -21,7 +21,7 @@
   background-color: var(--brand-SubNav-bgColor);
 }
 
-[data-color-mode='dark'] .SubNav {
+:is([data-color-mode='dark'], [data-color-scheme='dark']) .SubNav {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
diff --git a/packages/react/src/Text/Text.module.css b/packages/react/src/Text/Text.module.css
index f810f2e96b..22b4bafa26 100644
--- a/packages/react/src/Text/Text.module.css
+++ b/packages/react/src/Text/Text.module.css
@@ -2,7 +2,7 @@
   font-family: var(--brand-body-fontFamily);
 }
 
-[data-color-mode='dark'] .Text--antialiased {
+:is([data-color-mode='dark'], [data-color-scheme='dark']) .Text--antialiased {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: auto;
 }
diff --git a/packages/react/src/ThemeProvider/ThemeProvider.test.tsx b/packages/react/src/ThemeProvider/ThemeProvider.test.tsx
index 490b2dbc17..a6565fa648 100644
--- a/packages/react/src/ThemeProvider/ThemeProvider.test.tsx
+++ b/packages/react/src/ThemeProvider/ThemeProvider.test.tsx
@@ -2,7 +2,7 @@ import React, {useContext} from 'react'
 import {render, renderHook, cleanup} from '@testing-library/react'
 import '@testing-library/jest-dom'
 
-import {ColorMode, ThemeContext, ThemeProvider} from './ThemeProvider'
+import {ColorMode, ThemeContext, ThemeProvider, getColorScheme} from './ThemeProvider'
 import {axe, toHaveNoViolations} from 'jest-axe'
 
 expect.extend(toHaveNoViolations)
@@ -42,6 +42,7 @@ describe('ThemeProvider', () => {
 
     expect(rootEl).toBeInTheDocument()
     expect(rootEl).toHaveAttribute('data-color-mode')
+    expect(rootEl).toHaveAttribute('data-color-scheme', 'light')
     expect(childEl).toBeInTheDocument()
   })
 
@@ -53,6 +54,7 @@ describe('ThemeProvider', () => {
     const expectedMode = 'light'
 
     expect(rootEl).toHaveAttribute('data-color-mode', expectedMode)
+    expect(rootEl).toHaveAttribute('data-color-scheme', 'light')
   })
 
   it('can optionally render dark mode', () => {
@@ -63,6 +65,27 @@ describe('ThemeProvider', () => {
     const el = getByTestId(mockId)
 
     expect(el).toHaveAttribute('data-color-mode', mockMode)
+    expect(el).toHaveAttribute('data-color-scheme', 'dark')
+  })
+
+  it('derives dark color scheme for any mode containing "dark"', () => {
+    const mockId = 'theme-provider'
+    const {getByTestId} = render(<ThemeProvider data-testid={mockId} colorMode="dark_dimmed" />)
+
+    const el = getByTestId(mockId)
+
+    expect(el).toHaveAttribute('data-color-mode', 'dark_dimmed')
+    expect(el).toHaveAttribute('data-color-scheme', 'dark')
+  })
+
+  it('derives light color scheme for modes not containing "dark"', () => {
+    const mockId = 'theme-provider'
+    const {getByTestId} = render(<ThemeProvider data-testid={mockId} colorMode="light_high_contrast" />)
+
+    const el = getByTestId(mockId)
+
+    expect(el).toHaveAttribute('data-color-mode', 'light_high_contrast')
+    expect(el).toHaveAttribute('data-color-scheme', 'light')
   })
 
   it('can optionally render dark color scheme in auto mode', () => {
@@ -85,6 +108,7 @@ describe('ThemeProvider', () => {
     const expectedMode = 'dark'
 
     expect(el).toHaveAttribute('data-color-mode', expectedMode)
+    expect(el).toHaveAttribute('data-color-scheme', 'dark')
 
     matchMediaSpy.mockRestore()
   })
@@ -109,6 +133,7 @@ describe('ThemeProvider', () => {
     const expectedMode = 'light'
 
     expect(el).toHaveAttribute('data-color-mode', expectedMode)
+    expect(el).toHaveAttribute('data-color-scheme', 'light')
   })
 
   it('supports nested ThemeProviders', () => {
@@ -129,8 +154,11 @@ describe('ThemeProvider', () => {
     const levelTwoProviderEl = getByTestId(levelTwoProviderId)
 
     expect(rootProviderEl).toHaveAttribute('data-color-mode', 'light')
+    expect(rootProviderEl).toHaveAttribute('data-color-scheme', 'light')
     expect(levelOneProviderEl).toHaveAttribute('data-color-mode', 'dark')
+    expect(levelOneProviderEl).toHaveAttribute('data-color-scheme', 'dark')
     expect(levelTwoProviderEl).toHaveAttribute('data-color-mode', 'light')
+    expect(levelTwoProviderEl).toHaveAttribute('data-color-scheme', 'light')
   })
 
   it('returns all available modes via context', () => {
@@ -150,10 +178,12 @@ describe('ThemeProvider', () => {
     const {getByTestId, rerender} = render(<MockComponent mode={'light'} />)
 
     expect(getByTestId(mockId)).toHaveAttribute('data-color-mode', 'light')
+    expect(getByTestId(mockId)).toHaveAttribute('data-color-scheme', 'light')
 
     rerender(<MockComponent mode={'dark'} />)
 
     expect(getByTestId(mockId)).toHaveAttribute('data-color-mode', 'dark')
+    expect(getByTestId(mockId)).toHaveAttribute('data-color-scheme', 'dark')
   })
 
   test('no a11y violations', async () => {
@@ -163,3 +193,17 @@ describe('ThemeProvider', () => {
     expect(results).toHaveNoViolations()
   })
 })
+
+describe('getColorScheme', () => {
+  it('returns "dark" for modes containing "dark"', () => {
+    expect(getColorScheme('dark')).toBe('dark')
+    expect(getColorScheme('dark_dimmed')).toBe('dark')
+    expect(getColorScheme('dark_high_contrast')).toBe('dark')
+  })
+
+  it('returns "light" for modes not containing "dark"', () => {
+    expect(getColorScheme('light')).toBe('light')
+    expect(getColorScheme('light_high_contrast')).toBe('light')
+    expect(getColorScheme('auto')).toBe('light')
+  })
+})
diff --git a/packages/react/src/ThemeProvider/ThemeProvider.tsx b/packages/react/src/ThemeProvider/ThemeProvider.tsx
index e024f15754..efddbafa99 100644
--- a/packages/react/src/ThemeProvider/ThemeProvider.tsx
+++ b/packages/react/src/ThemeProvider/ThemeProvider.tsx
@@ -6,7 +6,15 @@ export enum ColorModesEnum {
   AUTO = 'auto',
 }
 
-export type ColorMode = `${ColorModesEnum}`
+export type ColorMode = `${ColorModesEnum}` | (string & {})
+
+/**
+ * Returns the base color scheme ("light" or "dark") for a given color mode.
+ * Any mode containing "dark" maps to the dark scheme; everything else maps to light.
+ */
+export function getColorScheme(mode: string): 'light' | 'dark' {
+  return mode.includes('dark') ? 'dark' : 'light'
+}
 
 export type ThemeContextProps = {
   /*
@@ -31,6 +39,16 @@ export const ThemeContext = createContext<ThemeContextProps>({
   availableColorModes: Object.values(ColorModesEnum),
 })
 
+/**
+ * SSR-safe matchMedia wrapper. Returns undefined when window.matchMedia is unavailable.
+ */
+const safeMatchMedia = (query: string): MediaQueryList | undefined => {
+  if (typeof window !== 'undefined' && typeof window.matchMedia === 'function') {
+    return window.matchMedia(query)
+  }
+  return undefined
+}
+
 /**
  * ThemeProvider is used to provide theme-related context to its child components.
  */
@@ -50,22 +68,23 @@ export function ThemeProvider({colorMode = defaultMode, children, ...rest}: Prop
 
   return (
     <ThemeContext.Provider value={{colorMode: activeMode, availableColorModes}}>
-      <div data-color-mode={activeMode} {...rest}>
+      <div data-color-mode={activeMode} data-color-scheme={getColorScheme(activeMode)} {...rest}>
         {children}
       </div>
     </ThemeContext.Provider>
   )
 }
 
-const queryBrowserPreference = () => window.matchMedia(`(prefers-color-scheme: ${ColorModesEnum.DARK})`)
+const queryBrowserPreference = () => safeMatchMedia(`(prefers-color-scheme: ${ColorModesEnum.DARK})`)
 
 const getActiveAutoMode = () => {
-  const mediaQueryList: MediaQueryList = queryBrowserPreference()
-  return mediaQueryList.matches ? ColorModesEnum.DARK : ColorModesEnum.LIGHT
+  const mediaQueryList = queryBrowserPreference()
+  return mediaQueryList?.matches ? ColorModesEnum.DARK : ColorModesEnum.LIGHT
 }
 
 const handleSystemPreferenceChange = callback => {
   const mediaQueryList = queryBrowserPreference()
+  if (!mediaQueryList) return () => {}
   const changeHandler = event => callback(event.matches ? ColorModesEnum.DARK : ColorModesEnum.LIGHT)
   mediaQueryList.addEventListener('change', changeHandler)
   return () => mediaQueryList.removeEventListener('change', changeHandler)
diff --git a/packages/react/src/Token/Token.module.css b/packages/react/src/Token/Token.module.css
index 6ea5fe214c..3d6a992191 100644
--- a/packages/react/src/Token/Token.module.css
+++ b/packages/react/src/Token/Token.module.css
@@ -22,7 +22,7 @@
   text-decoration: none;
 }
 
-[data-color-mode='dark'] .Token {
+:is([data-color-mode='dark'], [data-color-scheme='dark']) .Token {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: auto;
 }
diff --git a/packages/react/src/recipes/FeaturePreviewLPs/FeaturePreviewLevelOne/FeaturePreviewLevelOne.module.css b/packages/react/src/recipes/FeaturePreviewLPs/FeaturePreviewLevelOne/FeaturePreviewLevelOne.module.css
index a1b8d55965..1d2a581e33 100644
--- a/packages/react/src/recipes/FeaturePreviewLPs/FeaturePreviewLevelOne/FeaturePreviewLevelOne.module.css
+++ b/packages/react/src/recipes/FeaturePreviewLPs/FeaturePreviewLevelOne/FeaturePreviewLevelOne.module.css
@@ -7,7 +7,7 @@
   --brand-Hero-regular-padding: var(--brand-Hero-narrow-padding);
 }
 
-[data-color-mode='dark'] .FeaturePreview__trailingSection {
+:is([data-color-mode='dark'], [data-color-scheme='dark']) .FeaturePreview__trailingSection {
   --brand-color-canvas-subtle: var(--base-color-scale-gray-7);
 }
 
@@ -89,7 +89,7 @@
     z-index: 1;
   }
 
-  [data-color-mode='dark'] .FeaturePreview__formContent {
+  :is([data-color-mode='dark'], [data-color-scheme='dark']) .FeaturePreview__formContent {
     background-color: var(--brand-color-canvas-subtle);
   }
 
diff --git a/packages/react/src/recipes/FeaturePreviewLPs/FeaturePreviewLevelTwo/FeaturePreviewLevelTwo.module.css b/packages/react/src/recipes/FeaturePreviewLPs/FeaturePreviewLevelTwo/FeaturePreviewLevelTwo.module.css
index 29446bb7df..f9999a6edd 100644
--- a/packages/react/src/recipes/FeaturePreviewLPs/FeaturePreviewLevelTwo/FeaturePreviewLevelTwo.module.css
+++ b/packages/react/src/recipes/FeaturePreviewLPs/FeaturePreviewLevelTwo/FeaturePreviewLevelTwo.module.css
@@ -45,7 +45,7 @@
   --brand-color-canvas-subtle: var(--base-color-scale-gray-1);
 }
 
-[data-color-mode='dark'] .FeaturePreview__trailingSection {
+:is([data-color-mode='dark'], [data-color-scheme='dark']) .FeaturePreview__trailingSection {
   --brand-color-canvas-subtle: var(--base-color-scale-gray-7);
 }
 
diff --git a/packages/react/src/recipes/Flexsuite/Overview/FlexSuiteAIOverview.module.css b/packages/react/src/recipes/Flexsuite/Overview/FlexSuiteAIOverview.module.css
index 824b014a7f..91889d885b 100644
--- a/packages/react/src/recipes/Flexsuite/Overview/FlexSuiteAIOverview.module.css
+++ b/packages/react/src/recipes/Flexsuite/Overview/FlexSuiteAIOverview.module.css
@@ -58,7 +58,9 @@
     var(--brand-color-canvas-default);
 }
 
-[data-color-mode='dark'] .cardGridColumnArrowHover .cardGridItem:is(:hover, :focus-within) {
+:is([data-color-mode='dark'], [data-color-scheme='dark'])
+  .cardGridColumnArrowHover
+  .cardGridItem:is(:hover, :focus-within) {
   background: linear-gradient(180deg, rgba(242, 245, 243, 0.1) 0%, rgba(242, 245, 243, 0) 100%),
     var(--brand-color-canvas-default);
 }
diff --git a/packages/react/src/recipes/SolutionTemplates/CategoryPage/CategoryPage.module.css b/packages/react/src/recipes/SolutionTemplates/CategoryPage/CategoryPage.module.css
index e65c32cf74..bad9d673e2 100644
--- a/packages/react/src/recipes/SolutionTemplates/CategoryPage/CategoryPage.module.css
+++ b/packages/react/src/recipes/SolutionTemplates/CategoryPage/CategoryPage.module.css
@@ -52,19 +52,19 @@
   left: 20%;
 }
 
-[data-color-mode='light'] .customHero::before {
+:is([data-color-mode='light'], [data-color-scheme='light']) .customHero::before {
   background: var(--base-color-scale-blue-2);
 }
 
-[data-color-mode='light'] .customHero::after {
+:is([data-color-mode='light'], [data-color-scheme='light']) .customHero::after {
   background: var(--base-color-scale-purple-2);
 }
 
-[data-color-mode='dark'] .customHero::before {
+:is([data-color-mode='dark'], [data-color-scheme='dark']) .customHero::before {
   background: var(--base-color-scale-blue-5);
 }
 
-[data-color-mode='dark'] .customHero::after {
+:is([data-color-mode='dark'], [data-color-scheme='dark']) .customHero::after {
   background: var(--base-color-scale-purple-5);
 }
 
diff --git a/packages/react/src/recipes/SolutionTemplates/SolutionPage/SolutionPage.module.css b/packages/react/src/recipes/SolutionTemplates/SolutionPage/SolutionPage.module.css
index e934accffd..22b3dd4450 100644
--- a/packages/react/src/recipes/SolutionTemplates/SolutionPage/SolutionPage.module.css
+++ b/packages/react/src/recipes/SolutionTemplates/SolutionPage/SolutionPage.module.css
@@ -102,18 +102,18 @@
   top: calc(--topOffset - 100px);
 }
 
-[data-color-mode='light'] .heroVideoGlow::before {
+:is([data-color-mode='light'], [data-color-scheme='light']) .heroVideoGlow::before {
   background: var(--base-color-scale-blue-2);
 }
 
-[data-color-mode='light'] .heroVideoGlow::after {
+:is([data-color-mode='light'], [data-color-scheme='light']) .heroVideoGlow::after {
   background: var(--base-color-scale-purple-2);
 }
 
-[data-color-mode='dark'] .heroVideoGlow::before {
+:is([data-color-mode='dark'], [data-color-scheme='dark']) .heroVideoGlow::before {
   background: var(--base-color-scale-blue-7);
 }
 
-[data-color-mode='dark'] .heroVideoGlow::after {
+:is([data-color-mode='dark'], [data-color-scheme='dark']) .heroVideoGlow::after {
   background: var(--base-color-scale-purple-7);
 }
diff --git a/packages/react/src/recipes/seo/Category/CategoryPage.module.css b/packages/react/src/recipes/seo/Category/CategoryPage.module.css
index b25390e73a..11f159f476 100644
--- a/packages/react/src/recipes/seo/Category/CategoryPage.module.css
+++ b/packages/react/src/recipes/seo/Category/CategoryPage.module.css
@@ -33,8 +33,8 @@
   background-color: var(--base-color-scale-gray-1);
 }
 
-[data-color-mode='dark'] .navListItemSelected,
-[data-color-mode='dark'] .navListItem:hover {
+:is([data-color-mode='dark'], [data-color-scheme='dark']) .navListItemSelected,
+:is([data-color-mode='dark'], [data-color-scheme='dark']) .navListItem:hover {
   background-color: var(--base-color-scale-gray-6);
 }
 

From 82aa674b6b2e7e34b3b08c8772198453b6e1fe1c Mon Sep 17 00:00:00 2001
From: Daniel Guillan <danielguillan@github.com>
Date: Thu, 30 Apr 2026 18:12:33 +0200
Subject: [PATCH 02/18] Update token formatter to support data-color-scheme and
 auto mode

---
 .../src/formats/color-mode-attributes.js      | 101 +++++++++++++-----
 1 file changed, 72 insertions(+), 29 deletions(-)

diff --git a/packages/design-tokens/src/formats/color-mode-attributes.js b/packages/design-tokens/src/formats/color-mode-attributes.js
index e109a57667..318caf05af 100644
--- a/packages/design-tokens/src/formats/color-mode-attributes.js
+++ b/packages/design-tokens/src/formats/color-mode-attributes.js
@@ -30,44 +30,32 @@ function colorModeAttributes({dictionary, file, options}) {
     allTokens = [...allTokens].sort(sortByReference(dictionary)) // TODO - add a test for this
   }
 
-  const renderLightMode = () =>
-    `:root, 
-    [data-color-mode=${defaultMode}]  { 
-      ${allTokens
-        .map(createPropertyFormatter({outputReferences, dictionary, format: 'css', formatter: {}, themeable: false}))
-        .filter(function (strVal) {
-          return !!strVal
-        })
-        .join('\n')}
-    }\n`
+  const getColorScheme = mode => (mode.includes('dark') ? 'dark' : 'light')
 
   /**
-   * Returns alternate color mode tokens by replacing the contents of value with said mode
+   * Renders token declarations for a given mode.
+   * Returns an empty string if no tokens exist for the mode.
    */
-  const renderAlternateColorMode = mode => {
-    if (mode === defaultMode) return renderLightMode()
+  const renderTokenDeclarations = mode => {
+    if (mode === defaultMode) {
+      return allTokens
+        .map(createPropertyFormatter({outputReferences, dictionary, format: 'css', formatter: {}, themeable: false}))
+        .filter(Boolean)
+        .join('\n')
+    }
 
     const replaceWithAlternateModeValue = token => {
       if (token.hasOwnProperty(mode)) {
-        return Object.assign({}, token, {
-          value: token[mode],
-        })
+        return Object.assign({}, token, {value: token[mode]})
       }
     }
 
     const newDictionary = JSON.parse(JSON.stringify(dictionary))
-
     newDictionary.allProperties = newDictionary.allProperties.map(replaceWithAlternateModeValue).filter(Boolean)
 
-    // short-circuit if no tokens are found for the supported modes
     if (!newDictionary.allProperties.length) return ''
 
-    const {allTokens: newAllTokens} = newDictionary
-
-    return `
-    [data-color-mode="${mode}"]  {
-    
-    ${newAllTokens
+    return newDictionary.allTokens
       .map(replaceWithAlternateModeValue)
       .filter(Boolean)
       .map(
@@ -79,17 +67,72 @@ function colorModeAttributes({dictionary, file, options}) {
           themeable: false,
         }),
       )
-      .filter(function (strVal) {
-        return !!strVal
-      })
-      .join('\n')}
-      
+      .filter(Boolean)
+      .join('\n')
+  }
+
+  const renderLightMode = () => {
+    const declarations = renderTokenDeclarations(defaultMode)
+    return `:root, 
+    [data-color-mode="${defaultMode}"],
+    [data-color-scheme="${defaultMode}"] { 
+      ${declarations}
     }\n`
   }
+
+  /**
+   * Returns alternate color mode tokens by replacing the contents of value with said mode
+   */
+  const renderAlternateColorMode = mode => {
+    if (mode === defaultMode) return renderLightMode()
+
+    const declarations = renderTokenDeclarations(mode)
+    if (!declarations) return ''
+
+    const colorScheme = getColorScheme(mode)
+
+    return `
+    :is([data-color-mode="${mode}"], [data-color-scheme="${colorScheme}"]) {
+      ${declarations}
+    }\n`
+  }
+
+  /**
+   * Renders auto mode media query blocks so that tokens respond to
+   * prefers-color-scheme when data-color-mode="auto" is set (e.g. by Primer React).
+   */
+  const renderAutoMode = () => {
+    const lightDeclarations = renderTokenDeclarations(defaultMode)
+    const darkDeclarations = renderTokenDeclarations('dark')
+
+    let output = ''
+
+    if (lightDeclarations) {
+      output += `
+      @media (prefers-color-scheme: light) {
+        [data-color-mode="auto"] {
+          ${lightDeclarations}
+        }
+      }\n`
+    }
+
+    if (darkDeclarations) {
+      output += `
+      @media (prefers-color-scheme: dark) {
+        [data-color-mode="auto"] {
+          ${darkDeclarations}
+        }
+      }\n`
+    }
+
+    return output
+  }
+
   const template = `
       ${fileHeader({file})}
  
     ${supportedModes.map(mode => renderAlternateColorMode(mode)).join('')}
+    ${renderAutoMode()}
     
     \n`
 

From 33c34962536c0356aaf237ea31a382eb0480c9ae Mon Sep 17 00:00:00 2001
From: Daniel Guillan <danielguillan@github.com>
Date: Thu, 30 Apr 2026 20:15:22 +0200
Subject: [PATCH 03/18] Add changeset

---
 .changeset/lazy-wolves-win.md | 6 ++++++
 1 file changed, 6 insertions(+)
 create mode 100644 .changeset/lazy-wolves-win.md

diff --git a/.changeset/lazy-wolves-win.md b/.changeset/lazy-wolves-win.md
new file mode 100644
index 0000000000..dd0f987ce0
--- /dev/null
+++ b/.changeset/lazy-wolves-win.md
@@ -0,0 +1,6 @@
+---
+'@primer/react-brand': minor
+'@primer/brand-primitives': patch
+---
+
+`ThemeProvider` now supports derivative color modes. You can pass modes like `"dark_dimmed"` or `"light_high_contrast"` and the right light or dark color tokens will apply. No new themes are added; derivative modes inherit from the existing `light` and `dark` token sets.

From 5fe073a7b937c6e103bcc730855b65d4dbb3bbdb Mon Sep 17 00:00:00 2001
From: Daniel Guillan <danielguillan@github.com>
Date: Thu, 30 Apr 2026 22:18:54 +0200
Subject: [PATCH 04/18] Cleanup

---
 .../src/formats/color-mode-attributes.js      | 109 ++++++------------
 .../src/formats/color-mode-attributes.test.js |  14 ++-
 2 files changed, 46 insertions(+), 77 deletions(-)

diff --git a/packages/design-tokens/src/formats/color-mode-attributes.js b/packages/design-tokens/src/formats/color-mode-attributes.js
index 318caf05af..6b015ba851 100644
--- a/packages/design-tokens/src/formats/color-mode-attributes.js
+++ b/packages/design-tokens/src/formats/color-mode-attributes.js
@@ -30,32 +30,51 @@ function colorModeAttributes({dictionary, file, options}) {
     allTokens = [...allTokens].sort(sortByReference(dictionary)) // TODO - add a test for this
   }
 
-  const getColorScheme = mode => (mode.includes('dark') ? 'dark' : 'light')
+  const renderLightMode = () =>
+    `:root, 
+    [data-color-mode=${defaultMode}],
+    [data-color-scheme="light"] { 
+      ${allTokens
+        .map(createPropertyFormatter({outputReferences, dictionary, format: 'css', formatter: {}, themeable: false}))
+        .filter(function (strVal) {
+          return !!strVal
+        })
+        .join('\n')}
+    }\n`
 
   /**
-   * Renders token declarations for a given mode.
-   * Returns an empty string if no tokens exist for the mode.
+   * Returns alternate color mode tokens by replacing the contents of value with said mode
    */
-  const renderTokenDeclarations = mode => {
-    if (mode === defaultMode) {
-      return allTokens
-        .map(createPropertyFormatter({outputReferences, dictionary, format: 'css', formatter: {}, themeable: false}))
-        .filter(Boolean)
-        .join('\n')
-    }
+  const renderAlternateColorMode = mode => {
+    if (mode === defaultMode) return renderLightMode()
 
     const replaceWithAlternateModeValue = token => {
       if (token.hasOwnProperty(mode)) {
-        return Object.assign({}, token, {value: token[mode]})
+        return Object.assign({}, token, {
+          value: token[mode],
+        })
       }
     }
 
     const newDictionary = JSON.parse(JSON.stringify(dictionary))
+
     newDictionary.allProperties = newDictionary.allProperties.map(replaceWithAlternateModeValue).filter(Boolean)
 
+    // short-circuit if no tokens are found for the supported modes
     if (!newDictionary.allProperties.length) return ''
 
-    return newDictionary.allTokens
+    const {allTokens: newAllTokens} = newDictionary
+
+    let selector = `[data-color-mode="${mode}"]`
+    // Only add data-color-scheme for base dark mode
+    if (mode === 'dark') {
+      selector = `[data-color-mode="${mode}"], [data-color-scheme="dark"]`
+    }
+
+    return `
+    ${selector}  {
+    
+    ${newAllTokens
       .map(replaceWithAlternateModeValue)
       .filter(Boolean)
       .map(
@@ -67,72 +86,18 @@ function colorModeAttributes({dictionary, file, options}) {
           themeable: false,
         }),
       )
-      .filter(Boolean)
-      .join('\n')
-  }
-
-  const renderLightMode = () => {
-    const declarations = renderTokenDeclarations(defaultMode)
-    return `:root, 
-    [data-color-mode="${defaultMode}"],
-    [data-color-scheme="${defaultMode}"] { 
-      ${declarations}
-    }\n`
-  }
-
-  /**
-   * Returns alternate color mode tokens by replacing the contents of value with said mode
-   */
-  const renderAlternateColorMode = mode => {
-    if (mode === defaultMode) return renderLightMode()
-
-    const declarations = renderTokenDeclarations(mode)
-    if (!declarations) return ''
-
-    const colorScheme = getColorScheme(mode)
-
-    return `
-    :is([data-color-mode="${mode}"], [data-color-scheme="${colorScheme}"]) {
-      ${declarations}
+      .filter(function (strVal) {
+        return !!strVal
+      })
+      .join('\n')}
+      
     }\n`
   }
 
-  /**
-   * Renders auto mode media query blocks so that tokens respond to
-   * prefers-color-scheme when data-color-mode="auto" is set (e.g. by Primer React).
-   */
-  const renderAutoMode = () => {
-    const lightDeclarations = renderTokenDeclarations(defaultMode)
-    const darkDeclarations = renderTokenDeclarations('dark')
-
-    let output = ''
-
-    if (lightDeclarations) {
-      output += `
-      @media (prefers-color-scheme: light) {
-        [data-color-mode="auto"] {
-          ${lightDeclarations}
-        }
-      }\n`
-    }
-
-    if (darkDeclarations) {
-      output += `
-      @media (prefers-color-scheme: dark) {
-        [data-color-mode="auto"] {
-          ${darkDeclarations}
-        }
-      }\n`
-    }
-
-    return output
-  }
-
   const template = `
       ${fileHeader({file})}
- 
+  
     ${supportedModes.map(mode => renderAlternateColorMode(mode)).join('')}
-    ${renderAutoMode()}
     
     \n`
 
diff --git a/packages/design-tokens/src/formats/color-mode-attributes.test.js b/packages/design-tokens/src/formats/color-mode-attributes.test.js
index 3b7eee9821..22e7b2c1fc 100644
--- a/packages/design-tokens/src/formats/color-mode-attributes.test.js
+++ b/packages/design-tokens/src/formats/color-mode-attributes.test.js
@@ -133,7 +133,8 @@ describe('Design tokens', () => {
 
     const expectedOutput = `
 :root,
-[data-color-mode="light"] {
+[data-color-mode="light"],
+[data-color-scheme="light"] {
   --brand-text-color-example: gray;
 }
 
@@ -141,7 +142,8 @@ describe('Design tokens', () => {
   --brand-text-color-example: black;
 }
 
-[data-color-mode="dark"] {
+[data-color-mode="dark"],
+[data-color-scheme="dark"] {
   --brand-text-color-example: white;
 }
 `.trim()
@@ -460,13 +462,15 @@ describe('Design tokens', () => {
 
     const expectedOutput = `
 :root,
-[data-color-mode="light"] {
+[data-color-mode="light"],
+[data-color-scheme="light"] {
   --base-color-scale-gray-0: #f6f8fa;
   --base-color-scale-gray-1: #eaeef2;
   --base-color-scale-gray-2: #b1bac4;
 }
 
-[data-color-mode="dark"] {
+[data-color-mode="dark"],
+[data-color-scheme="dark"] {
   --base-color-scale-gray-0: #f0f6fc;
   --base-color-scale-gray-1: #c9d1d9;
   --base-color-scale-gray-2: #b1bac4;
@@ -476,7 +480,7 @@ describe('Design tokens', () => {
   --base-color-scale-gray-0: #f0f6fc;
   --base-color-scale-gray-1: #c9d1d9;
   --base-color-scale-gray-2: #b1bac4;
-}    
+}
 `.trim()
 
     // remove timestamp and trim

From bcdeeb2865ed9642b2c4c5879f85c19eeaca6741 Mon Sep 17 00:00:00 2001
From: Daniel Guillan <danielguillan@github.com>
Date: Thu, 30 Apr 2026 22:35:29 +0200
Subject: [PATCH 05/18] Fixes

---
 packages/react/src/Card/CardSkewEffect.tsx    |  7 ++--
 .../src/MinimalFooter/MinimalFooter.test.tsx  | 12 +++++++
 .../react/src/MinimalFooter/MinimalFooter.tsx |  5 +--
 .../react/src/ThemeProvider/ThemeProvider.tsx | 17 ++-------
 .../FlexTemplate/FlexSection/FlexSection.tsx  |  8 +++--
 .../components/FlexSectionTestimonials.tsx    |  7 ++--
 .../Overview/FlexSuiteAIOverview.tsx          | 35 +++++--------------
 7 files changed, 40 insertions(+), 51 deletions(-)

diff --git a/packages/react/src/Card/CardSkewEffect.tsx b/packages/react/src/Card/CardSkewEffect.tsx
index 43f77404e9..5d196c818a 100644
--- a/packages/react/src/Card/CardSkewEffect.tsx
+++ b/packages/react/src/Card/CardSkewEffect.tsx
@@ -1,7 +1,7 @@
 import React, {useRef, useEffect, PropsWithChildren} from 'react'
 import {clsx} from 'clsx'
 
-import {useTheme} from '../'
+import {getColorScheme, useTheme} from '../'
 import {BaseProps} from '../component-helpers'
 
 import styles from './Card.module.css'
@@ -21,11 +21,12 @@ export const CardSkewEffect = ({
   ...rest
 }: PropsWithChildren<CardSkewEffectProps>) => {
   const {colorMode} = useTheme()
+  const colorScheme = getColorScheme(colorMode)
   const boundingRef = useRef<HTMLDivElement | null>(null)
   const torchRef = useRef<HTMLDivElement | null>(null)
 
   useEffect(() => {
-    if (colorMode === 'light' || disableSkew) return
+    if (colorScheme === 'light' || disableSkew) return
 
     const motionQuery = window.matchMedia('(prefers-reduced-motion: reduce)')
 
@@ -70,7 +71,7 @@ export const CardSkewEffect = ({
       torchElement?.removeEventListener('mousemove', handleMouseMove)
       motionQuery.removeEventListener('change', handleReducedMotionChange)
     }
-  }, [disableSkew, perspective, colorMode])
+  }, [disableSkew, perspective, colorScheme])
 
   return (
     <div ref={boundingRef} className={clsx(styles['Card--skew'], className)} {...rest}>
diff --git a/packages/react/src/MinimalFooter/MinimalFooter.test.tsx b/packages/react/src/MinimalFooter/MinimalFooter.test.tsx
index effe343c6d..9c4e68b7e8 100644
--- a/packages/react/src/MinimalFooter/MinimalFooter.test.tsx
+++ b/packages/react/src/MinimalFooter/MinimalFooter.test.tsx
@@ -298,6 +298,18 @@ describe('MinimalFooter', () => {
     )
   })
 
+  it('uses dark logo fill for derived dark color modes', () => {
+    const {container} = render(
+      <ThemeProvider colorMode="dark_dimmed">
+        <MinimalFooter />
+      </ThemeProvider>,
+    )
+
+    const logo = container.querySelector('a[aria-label="GitHub"] svg')
+
+    expect(logo).toHaveAttribute('fill', 'white')
+  })
+
   it('renders social links with visually hidden text', () => {
     const {getByText} = render(<MinimalFooter socialLinks={['x']} />)
     const hiddenText = getByText('GitHub on X')
diff --git a/packages/react/src/MinimalFooter/MinimalFooter.tsx b/packages/react/src/MinimalFooter/MinimalFooter.tsx
index db8a7936d1..b49f409335 100644
--- a/packages/react/src/MinimalFooter/MinimalFooter.tsx
+++ b/packages/react/src/MinimalFooter/MinimalFooter.tsx
@@ -2,7 +2,7 @@ import React, {PropsWithChildren} from 'react'
 import {clsx} from 'clsx'
 import {LogoGithubIcon} from '@primer/octicons-react'
 
-import {ColorModesEnum, Stack, Text, useTheme} from '../'
+import {getColorScheme, Stack, Text, useTheme} from '../'
 import {BaseProps} from '../component-helpers'
 
 /**
@@ -235,6 +235,7 @@ type SocialLogomarksProps = {
 
 function SocialLogomarks({socialLinks = socialLinkNames, logoHref}: SocialLogomarksProps) {
   const {colorMode} = useTheme()
+  const colorScheme = getColorScheme(colorMode)
 
   return (
     <section className={clsx(styles['Footer__logomarks'])}>
@@ -252,7 +253,7 @@ function SocialLogomarks({socialLinks = socialLinkNames, logoHref}: SocialLogoma
               data-analytics-event='{"category":"Footer","action":"go to home","label":"text:home"}'
               aria-label="GitHub"
             >
-              <LogoGithubIcon fill={colorMode === ColorModesEnum.DARK ? 'white' : 'black'} size="medium" />
+              <LogoGithubIcon fill={colorScheme === 'dark' ? 'white' : 'black'} size="medium" />
             </a>
           </div>
           {socialLinks ? (
diff --git a/packages/react/src/ThemeProvider/ThemeProvider.tsx b/packages/react/src/ThemeProvider/ThemeProvider.tsx
index efddbafa99..8dd814e3ba 100644
--- a/packages/react/src/ThemeProvider/ThemeProvider.tsx
+++ b/packages/react/src/ThemeProvider/ThemeProvider.tsx
@@ -39,16 +39,6 @@ export const ThemeContext = createContext<ThemeContextProps>({
   availableColorModes: Object.values(ColorModesEnum),
 })
 
-/**
- * SSR-safe matchMedia wrapper. Returns undefined when window.matchMedia is unavailable.
- */
-const safeMatchMedia = (query: string): MediaQueryList | undefined => {
-  if (typeof window !== 'undefined' && typeof window.matchMedia === 'function') {
-    return window.matchMedia(query)
-  }
-  return undefined
-}
-
 /**
  * ThemeProvider is used to provide theme-related context to its child components.
  */
@@ -75,16 +65,15 @@ export function ThemeProvider({colorMode = defaultMode, children, ...rest}: Prop
   )
 }
 
-const queryBrowserPreference = () => safeMatchMedia(`(prefers-color-scheme: ${ColorModesEnum.DARK})`)
+const queryBrowserPreference = () => window.matchMedia(`(prefers-color-scheme: ${ColorModesEnum.DARK})`)
 
 const getActiveAutoMode = () => {
-  const mediaQueryList = queryBrowserPreference()
-  return mediaQueryList?.matches ? ColorModesEnum.DARK : ColorModesEnum.LIGHT
+  const mediaQueryList: MediaQueryList = queryBrowserPreference()
+  return mediaQueryList.matches ? ColorModesEnum.DARK : ColorModesEnum.LIGHT
 }
 
 const handleSystemPreferenceChange = callback => {
   const mediaQueryList = queryBrowserPreference()
-  if (!mediaQueryList) return () => {}
   const changeHandler = event => callback(event.matches ? ColorModesEnum.DARK : ColorModesEnum.LIGHT)
   mediaQueryList.addEventListener('change', changeHandler)
   return () => mediaQueryList.removeEventListener('change', changeHandler)
diff --git a/packages/react/src/recipes/FlexTemplate/FlexSection/FlexSection.tsx b/packages/react/src/recipes/FlexTemplate/FlexSection/FlexSection.tsx
index 70d28a412c..0c831d8775 100644
--- a/packages/react/src/recipes/FlexTemplate/FlexSection/FlexSection.tsx
+++ b/packages/react/src/recipes/FlexTemplate/FlexSection/FlexSection.tsx
@@ -26,6 +26,7 @@ import {
   Stack,
   Statistic,
   Text,
+  getColorScheme,
   useTheme,
 } from '../../..'
 
@@ -56,6 +57,7 @@ type FlexSectionProps = {
 
 export function FlexSection({component, className}: FlexSectionProps) {
   const {colorMode} = useTheme()
+  const colorScheme = getColorScheme(colorMode)
   const [selectedSegmentedControlItem, setSelectedSegmentedControlItem] = React.useState(0)
   const {
     breakoutBanner,
@@ -435,9 +437,9 @@ export function FlexSection({component, className}: FlexSectionProps) {
                   align={breakoutBanner.align}
                   backgroundColor={backgroundColor}
                   backgroundImageSrc={{
-                    narrow: colorMode === 'dark' ? darkNarrowBg : lightNarrowBg,
-                    regular: colorMode === 'dark' ? darkWideBg : lightWideBg,
-                    wide: colorMode === 'dark' ? darkWideBg : lightWideBg,
+                    narrow: colorScheme === 'dark' ? darkNarrowBg : lightNarrowBg,
+                    regular: colorScheme === 'dark' ? darkWideBg : lightWideBg,
+                    wide: colorScheme === 'dark' ? darkWideBg : lightWideBg,
                   }}
                   backgroundImagePosition={{
                     narrow: 'bottom',
diff --git a/packages/react/src/recipes/FlexTemplate/FlexSection/components/FlexSectionTestimonials.tsx b/packages/react/src/recipes/FlexTemplate/FlexSection/components/FlexSectionTestimonials.tsx
index 9a8d29e94a..fd28837057 100644
--- a/packages/react/src/recipes/FlexTemplate/FlexSection/components/FlexSectionTestimonials.tsx
+++ b/packages/react/src/recipes/FlexTemplate/FlexSection/components/FlexSectionTestimonials.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import {clsx} from 'clsx'
 
-import {Box, Grid, Image, useTheme} from '../../../..'
+import {Box, Grid, Image, getColorScheme, useTheme} from '../../../..'
 import {ContentfulTestimonials} from './ContentfulTestimonials'
 import type {FlexTemplateTestimonialsConfig} from '../../FlexTemplate.types'
 
@@ -77,6 +77,7 @@ type FlexSectionTestimonialsProps = {
 
 export function FlexSectionTestimonials({testimonials, className}: FlexSectionTestimonialsProps) {
   const {colorMode} = useTheme()
+  const colorScheme = getColorScheme(colorMode)
 
   const variant = testimonials.variant ?? 'minimal'
   const backgroundVariant = testimonials.backgroundImageVariant
@@ -93,14 +94,14 @@ export function FlexSectionTestimonials({testimonials, className}: FlexSectionTe
           marginBlockEnd={{narrow: 'none', wide: set.marginBlockEnd}}
         >
           <Image
-            src={colorMode === 'light' ? startShapeLight : startShapeDark}
+            src={colorScheme === 'light' ? startShapeLight : startShapeDark}
             alt=""
             className={clsx(styles.testimonialBackgroundImageShape, styles.left)}
             width={set.left.width}
             loading="lazy"
           />
           <Image
-            src={colorMode === 'light' ? endShapeLight : endShapeDark}
+            src={colorScheme === 'light' ? endShapeLight : endShapeDark}
             alt=""
             className={clsx(styles.testimonialBackgroundImageShape, styles.right)}
             width={set.right.width}
diff --git a/packages/react/src/recipes/Flexsuite/Overview/FlexSuiteAIOverview.tsx b/packages/react/src/recipes/Flexsuite/Overview/FlexSuiteAIOverview.tsx
index b13d671e4b..264f7c2f74 100644
--- a/packages/react/src/recipes/Flexsuite/Overview/FlexSuiteAIOverview.tsx
+++ b/packages/react/src/recipes/Flexsuite/Overview/FlexSuiteAIOverview.tsx
@@ -5,10 +5,10 @@ import React, {useEffect} from 'react'
 import {
   Box,
   Card,
-  ColorModesEnum,
   FAQ,
   FAQGroup,
   Grid,
+  getColorScheme,
   Hero,
   Heading,
   InlineLink,
@@ -56,6 +56,7 @@ export function FlexSuiteAIOverviewTemplate({content}: FlexSuiteAIOverviewTempla
   const heroImageRef = React.useRef<HTMLDivElement>(null)
   const riverImageRefs = React.useRef<Array<HTMLDivElement | null>>([])
   const {colorMode} = useTheme()
+  const colorScheme = getColorScheme(colorMode)
 
   useEffect(() => {
     const cleanups: Array<() => void> = []
@@ -128,7 +129,7 @@ export function FlexSuiteAIOverviewTemplate({content}: FlexSuiteAIOverviewTempla
             <Hero.Image
               enableBorder={false}
               position="block-end"
-              src={colorMode === ColorModesEnum.DARK ? renderUI3Dark : renderUI3}
+              src={colorScheme === 'dark' ? renderUI3Dark : renderUI3}
               alt={content.hero.imageAlt}
             />
           </Hero>
@@ -184,14 +185,8 @@ export function FlexSuiteAIOverviewTemplate({content}: FlexSuiteAIOverviewTempla
                 imageBackgroundColor="subtle"
               >
                 <picture>
-                  <source
-                    srcSet={colorMode === ColorModesEnum.DARK ? renderUI3Dark : renderUI3}
-                    media="(max-width: 47.99rem)"
-                  />
-                  <img
-                    src={colorMode === ColorModesEnum.DARK ? renderUI3Dark : renderUI3}
-                    alt={content.rivers[0].imageAlt}
-                  />
+                  <source srcSet={colorScheme === 'dark' ? renderUI3Dark : renderUI3} media="(max-width: 47.99rem)" />
+                  <img src={colorScheme === 'dark' ? renderUI3Dark : renderUI3} alt={content.rivers[0].imageAlt} />
                 </picture>
               </River.Visual>
               <River.Content>
@@ -209,14 +204,8 @@ export function FlexSuiteAIOverviewTemplate({content}: FlexSuiteAIOverviewTempla
                 imageBackgroundColor="subtle"
               >
                 <picture>
-                  <source
-                    srcSet={colorMode === ColorModesEnum.DARK ? renderUI3Dark : renderUI3}
-                    media="(max-width: 47.99rem)"
-                  />
-                  <img
-                    src={colorMode === ColorModesEnum.DARK ? renderUI3Dark : renderUI3}
-                    alt={content.rivers[1].imageAlt}
-                  />
+                  <source srcSet={colorScheme === 'dark' ? renderUI3Dark : renderUI3} media="(max-width: 47.99rem)" />
+                  <img src={colorScheme === 'dark' ? renderUI3Dark : renderUI3} alt={content.rivers[1].imageAlt} />
                 </picture>
               </River.Visual>
               <River.Content>
@@ -234,14 +223,8 @@ export function FlexSuiteAIOverviewTemplate({content}: FlexSuiteAIOverviewTempla
                 imageBackgroundColor="subtle"
               >
                 <picture>
-                  <source
-                    srcSet={colorMode === ColorModesEnum.DARK ? renderUI3Dark : renderUI3}
-                    media="(max-width: 47.99rem)"
-                  />
-                  <img
-                    src={colorMode === ColorModesEnum.DARK ? renderUI3Dark : renderUI3}
-                    alt={content.rivers[2].imageAlt}
-                  />
+                  <source srcSet={colorScheme === 'dark' ? renderUI3Dark : renderUI3} media="(max-width: 47.99rem)" />
+                  <img src={colorScheme === 'dark' ? renderUI3Dark : renderUI3} alt={content.rivers[2].imageAlt} />
                 </picture>
               </River.Visual>
               <River.Content>

From 7f64e350410504721d1fbb8e94dea52f9d22fae4 Mon Sep 17 00:00:00 2001
From: Daniel Guillan <danielguillan@github.com>
Date: Thu, 30 Apr 2026 22:44:17 +0200
Subject: [PATCH 06/18] Cleanup

---
 packages/design-tokens/src/formats/color-mode-attributes.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/design-tokens/src/formats/color-mode-attributes.js b/packages/design-tokens/src/formats/color-mode-attributes.js
index 6b015ba851..550cd9d202 100644
--- a/packages/design-tokens/src/formats/color-mode-attributes.js
+++ b/packages/design-tokens/src/formats/color-mode-attributes.js
@@ -66,7 +66,7 @@ function colorModeAttributes({dictionary, file, options}) {
     const {allTokens: newAllTokens} = newDictionary
 
     let selector = `[data-color-mode="${mode}"]`
-    // Only add data-color-scheme for base dark mode
+
     if (mode === 'dark') {
       selector = `[data-color-mode="${mode}"], [data-color-scheme="dark"]`
     }
@@ -96,7 +96,7 @@ function colorModeAttributes({dictionary, file, options}) {
 
   const template = `
       ${fileHeader({file})}
-  
+ 
     ${supportedModes.map(mode => renderAlternateColorMode(mode)).join('')}
     
     \n`

From c026d32bc4ef6715abffb38f601d8443fa17c679 Mon Sep 17 00:00:00 2001
From: Daniel Guillan <danielguillan@github.com>
Date: Wed, 29 Apr 2026 22:00:06 +0200
Subject: [PATCH 07/18] Add data-color-scheme attribute for color mode scheme
 derivation

---
 .../react/src/Accordion/Accordion.module.css  |  2 +-
 .../src/Card/Card.stories.shared.module.css   |  2 +-
 packages/react/src/Heading/Heading.module.css |  2 +-
 .../react/src/Hero/Hero.stories.module.css    |  4 +-
 .../src/InlineLink/InlineLink.module.css      |  2 +-
 packages/react/src/Label/Label.module.css     |  2 +-
 .../MinimalFooter/MinimalFooter.module.css    |  2 +-
 packages/react/src/SubNav/SubNav.module.css   |  2 +-
 packages/react/src/Text/Text.module.css       |  2 +-
 .../src/ThemeProvider/ThemeProvider.test.tsx  | 46 ++++++++++++++++++-
 .../react/src/ThemeProvider/ThemeProvider.tsx | 29 ++++++++++--
 .../FeaturePreviewLevelOne.module.css         |  4 +-
 .../FeaturePreviewLevelTwo.module.css         |  2 +-
 .../Overview/FlexSuiteAIOverview.module.css   |  4 +-
 .../CategoryPage/CategoryPage.module.css      |  8 ++--
 .../SolutionPage/SolutionPage.module.css      |  8 ++--
 .../seo/Category/CategoryPage.module.css      |  4 +-
 17 files changed, 95 insertions(+), 30 deletions(-)

diff --git a/packages/react/src/Accordion/Accordion.module.css b/packages/react/src/Accordion/Accordion.module.css
index 9ecb41c0ec..be54023e10 100644
--- a/packages/react/src/Accordion/Accordion.module.css
+++ b/packages/react/src/Accordion/Accordion.module.css
@@ -276,7 +276,7 @@ details[open] > .Accordion__summary.Accordion__summary--default .Accordion__summ
   line-height: var(--brand-text-lineHeight-200);
 }
 
-[data-color-mode='dark'] .Accordion__content {
+:is([data-color-mode='dark'], [data-color-scheme='dark']) .Accordion__content {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: auto;
 }
diff --git a/packages/react/src/Card/Card.stories.shared.module.css b/packages/react/src/Card/Card.stories.shared.module.css
index 01070f8006..434542aedc 100644
--- a/packages/react/src/Card/Card.stories.shared.module.css
+++ b/packages/react/src/Card/Card.stories.shared.module.css
@@ -34,7 +34,7 @@
     var(--brand-color-canvas-default);
 }
 
-[data-color-mode='dark'] .gridColumnArrowHover .gridItem:is(:hover, :focus-within) {
+:is([data-color-mode='dark'], [data-color-scheme='dark']) .gridColumnArrowHover .gridItem:is(:hover, :focus-within) {
   background: linear-gradient(180deg, rgba(242, 245, 243, 0.1) 0%, rgba(242, 245, 243, 0) 100%),
     var(--brand-color-canvas-default);
 }
diff --git a/packages/react/src/Heading/Heading.module.css b/packages/react/src/Heading/Heading.module.css
index 98beabb78d..532388a03a 100644
--- a/packages/react/src/Heading/Heading.module.css
+++ b/packages/react/src/Heading/Heading.module.css
@@ -15,7 +15,7 @@
   --condensed-stretch: 90%;
 }
 
-[data-color-mode='dark'] .Heading {
+:is([data-color-mode='dark'], [data-color-scheme='dark']) .Heading {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
diff --git a/packages/react/src/Hero/Hero.stories.module.css b/packages/react/src/Hero/Hero.stories.module.css
index 02c4930f69..43864f2963 100644
--- a/packages/react/src/Hero/Hero.stories.module.css
+++ b/packages/react/src/Hero/Hero.stories.module.css
@@ -12,10 +12,10 @@
 .heroWithCardsExample {
   --customCardsBackgroundColor: transparent;
 }
-[data-color-mode='light'] .heroWithCardsExample {
+:is([data-color-mode='light'], [data-color-scheme='light']) .heroWithCardsExample {
   --customCardsBackgroundColor: var(--base-color-scale-gray-1);
 }
-[data-color-mode='dark'] .heroWithCardsExample {
+:is([data-color-mode='dark'], [data-color-scheme='dark']) .heroWithCardsExample {
   --customCardsBackgroundColor: var(--base-color-scale-gray-9);
 }
 
diff --git a/packages/react/src/InlineLink/InlineLink.module.css b/packages/react/src/InlineLink/InlineLink.module.css
index 42224c1adb..9f0dbd77c9 100644
--- a/packages/react/src/InlineLink/InlineLink.module.css
+++ b/packages/react/src/InlineLink/InlineLink.module.css
@@ -24,7 +24,7 @@
   color: var(--brand-InlineLink-color-pressed);
 }
 
-[data-color-mode='dark'] .InlineLink {
+:is([data-color-mode='dark'], [data-color-scheme='dark']) .InlineLink {
   -webkit-font-smoothing: subpixel-antialiased;
   -moz-osx-font-smoothing: auto;
 }
diff --git a/packages/react/src/Label/Label.module.css b/packages/react/src/Label/Label.module.css
index 737941a86b..8d9436e1ec 100644
--- a/packages/react/src/Label/Label.module.css
+++ b/packages/react/src/Label/Label.module.css
@@ -32,7 +32,7 @@
   text-align: center;
 }
 
-[data-color-mode='dark'] .Label {
+:is([data-color-mode='dark'], [data-color-scheme='dark']) .Label {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: auto;
 }
diff --git a/packages/react/src/MinimalFooter/MinimalFooter.module.css b/packages/react/src/MinimalFooter/MinimalFooter.module.css
index b3c7b1a0ad..49bf2243c1 100644
--- a/packages/react/src/MinimalFooter/MinimalFooter.module.css
+++ b/packages/react/src/MinimalFooter/MinimalFooter.module.css
@@ -81,7 +81,7 @@
   height: auto;
 }
 
-[data-color-mode='light'] .Footer__social-icon {
+:is([data-color-mode='light'], [data-color-scheme='light']) .Footer__social-icon {
   filter: brightness(95%) saturate(100%);
 }
 
diff --git a/packages/react/src/SubNav/SubNav.module.css b/packages/react/src/SubNav/SubNav.module.css
index 08a23b4447..0903601a22 100644
--- a/packages/react/src/SubNav/SubNav.module.css
+++ b/packages/react/src/SubNav/SubNav.module.css
@@ -21,7 +21,7 @@
   background-color: var(--brand-SubNav-bgColor);
 }
 
-[data-color-mode='dark'] .SubNav {
+:is([data-color-mode='dark'], [data-color-scheme='dark']) .SubNav {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
diff --git a/packages/react/src/Text/Text.module.css b/packages/react/src/Text/Text.module.css
index f810f2e96b..22b4bafa26 100644
--- a/packages/react/src/Text/Text.module.css
+++ b/packages/react/src/Text/Text.module.css
@@ -2,7 +2,7 @@
   font-family: var(--brand-body-fontFamily);
 }
 
-[data-color-mode='dark'] .Text--antialiased {
+:is([data-color-mode='dark'], [data-color-scheme='dark']) .Text--antialiased {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: auto;
 }
diff --git a/packages/react/src/ThemeProvider/ThemeProvider.test.tsx b/packages/react/src/ThemeProvider/ThemeProvider.test.tsx
index 490b2dbc17..a6565fa648 100644
--- a/packages/react/src/ThemeProvider/ThemeProvider.test.tsx
+++ b/packages/react/src/ThemeProvider/ThemeProvider.test.tsx
@@ -2,7 +2,7 @@ import React, {useContext} from 'react'
 import {render, renderHook, cleanup} from '@testing-library/react'
 import '@testing-library/jest-dom'
 
-import {ColorMode, ThemeContext, ThemeProvider} from './ThemeProvider'
+import {ColorMode, ThemeContext, ThemeProvider, getColorScheme} from './ThemeProvider'
 import {axe, toHaveNoViolations} from 'jest-axe'
 
 expect.extend(toHaveNoViolations)
@@ -42,6 +42,7 @@ describe('ThemeProvider', () => {
 
     expect(rootEl).toBeInTheDocument()
     expect(rootEl).toHaveAttribute('data-color-mode')
+    expect(rootEl).toHaveAttribute('data-color-scheme', 'light')
     expect(childEl).toBeInTheDocument()
   })
 
@@ -53,6 +54,7 @@ describe('ThemeProvider', () => {
     const expectedMode = 'light'
 
     expect(rootEl).toHaveAttribute('data-color-mode', expectedMode)
+    expect(rootEl).toHaveAttribute('data-color-scheme', 'light')
   })
 
   it('can optionally render dark mode', () => {
@@ -63,6 +65,27 @@ describe('ThemeProvider', () => {
     const el = getByTestId(mockId)
 
     expect(el).toHaveAttribute('data-color-mode', mockMode)
+    expect(el).toHaveAttribute('data-color-scheme', 'dark')
+  })
+
+  it('derives dark color scheme for any mode containing "dark"', () => {
+    const mockId = 'theme-provider'
+    const {getByTestId} = render(<ThemeProvider data-testid={mockId} colorMode="dark_dimmed" />)
+
+    const el = getByTestId(mockId)
+
+    expect(el).toHaveAttribute('data-color-mode', 'dark_dimmed')
+    expect(el).toHaveAttribute('data-color-scheme', 'dark')
+  })
+
+  it('derives light color scheme for modes not containing "dark"', () => {
+    const mockId = 'theme-provider'
+    const {getByTestId} = render(<ThemeProvider data-testid={mockId} colorMode="light_high_contrast" />)
+
+    const el = getByTestId(mockId)
+
+    expect(el).toHaveAttribute('data-color-mode', 'light_high_contrast')
+    expect(el).toHaveAttribute('data-color-scheme', 'light')
   })
 
   it('can optionally render dark color scheme in auto mode', () => {
@@ -85,6 +108,7 @@ describe('ThemeProvider', () => {
     const expectedMode = 'dark'
 
     expect(el).toHaveAttribute('data-color-mode', expectedMode)
+    expect(el).toHaveAttribute('data-color-scheme', 'dark')
 
     matchMediaSpy.mockRestore()
   })
@@ -109,6 +133,7 @@ describe('ThemeProvider', () => {
     const expectedMode = 'light'
 
     expect(el).toHaveAttribute('data-color-mode', expectedMode)
+    expect(el).toHaveAttribute('data-color-scheme', 'light')
   })
 
   it('supports nested ThemeProviders', () => {
@@ -129,8 +154,11 @@ describe('ThemeProvider', () => {
     const levelTwoProviderEl = getByTestId(levelTwoProviderId)
 
     expect(rootProviderEl).toHaveAttribute('data-color-mode', 'light')
+    expect(rootProviderEl).toHaveAttribute('data-color-scheme', 'light')
     expect(levelOneProviderEl).toHaveAttribute('data-color-mode', 'dark')
+    expect(levelOneProviderEl).toHaveAttribute('data-color-scheme', 'dark')
     expect(levelTwoProviderEl).toHaveAttribute('data-color-mode', 'light')
+    expect(levelTwoProviderEl).toHaveAttribute('data-color-scheme', 'light')
   })
 
   it('returns all available modes via context', () => {
@@ -150,10 +178,12 @@ describe('ThemeProvider', () => {
     const {getByTestId, rerender} = render(<MockComponent mode={'light'} />)
 
     expect(getByTestId(mockId)).toHaveAttribute('data-color-mode', 'light')
+    expect(getByTestId(mockId)).toHaveAttribute('data-color-scheme', 'light')
 
     rerender(<MockComponent mode={'dark'} />)
 
     expect(getByTestId(mockId)).toHaveAttribute('data-color-mode', 'dark')
+    expect(getByTestId(mockId)).toHaveAttribute('data-color-scheme', 'dark')
   })
 
   test('no a11y violations', async () => {
@@ -163,3 +193,17 @@ describe('ThemeProvider', () => {
     expect(results).toHaveNoViolations()
   })
 })
+
+describe('getColorScheme', () => {
+  it('returns "dark" for modes containing "dark"', () => {
+    expect(getColorScheme('dark')).toBe('dark')
+    expect(getColorScheme('dark_dimmed')).toBe('dark')
+    expect(getColorScheme('dark_high_contrast')).toBe('dark')
+  })
+
+  it('returns "light" for modes not containing "dark"', () => {
+    expect(getColorScheme('light')).toBe('light')
+    expect(getColorScheme('light_high_contrast')).toBe('light')
+    expect(getColorScheme('auto')).toBe('light')
+  })
+})
diff --git a/packages/react/src/ThemeProvider/ThemeProvider.tsx b/packages/react/src/ThemeProvider/ThemeProvider.tsx
index e024f15754..efddbafa99 100644
--- a/packages/react/src/ThemeProvider/ThemeProvider.tsx
+++ b/packages/react/src/ThemeProvider/ThemeProvider.tsx
@@ -6,7 +6,15 @@ export enum ColorModesEnum {
   AUTO = 'auto',
 }
 
-export type ColorMode = `${ColorModesEnum}`
+export type ColorMode = `${ColorModesEnum}` | (string & {})
+
+/**
+ * Returns the base color scheme ("light" or "dark") for a given color mode.
+ * Any mode containing "dark" maps to the dark scheme; everything else maps to light.
+ */
+export function getColorScheme(mode: string): 'light' | 'dark' {
+  return mode.includes('dark') ? 'dark' : 'light'
+}
 
 export type ThemeContextProps = {
   /*
@@ -31,6 +39,16 @@ export const ThemeContext = createContext<ThemeContextProps>({
   availableColorModes: Object.values(ColorModesEnum),
 })
 
+/**
+ * SSR-safe matchMedia wrapper. Returns undefined when window.matchMedia is unavailable.
+ */
+const safeMatchMedia = (query: string): MediaQueryList | undefined => {
+  if (typeof window !== 'undefined' && typeof window.matchMedia === 'function') {
+    return window.matchMedia(query)
+  }
+  return undefined
+}
+
 /**
  * ThemeProvider is used to provide theme-related context to its child components.
  */
@@ -50,22 +68,23 @@ export function ThemeProvider({colorMode = defaultMode, children, ...rest}: Prop
 
   return (
     <ThemeContext.Provider value={{colorMode: activeMode, availableColorModes}}>
-      <div data-color-mode={activeMode} {...rest}>
+      <div data-color-mode={activeMode} data-color-scheme={getColorScheme(activeMode)} {...rest}>
         {children}
       </div>
     </ThemeContext.Provider>
   )
 }
 
-const queryBrowserPreference = () => window.matchMedia(`(prefers-color-scheme: ${ColorModesEnum.DARK})`)
+const queryBrowserPreference = () => safeMatchMedia(`(prefers-color-scheme: ${ColorModesEnum.DARK})`)
 
 const getActiveAutoMode = () => {
-  const mediaQueryList: MediaQueryList = queryBrowserPreference()
-  return mediaQueryList.matches ? ColorModesEnum.DARK : ColorModesEnum.LIGHT
+  const mediaQueryList = queryBrowserPreference()
+  return mediaQueryList?.matches ? ColorModesEnum.DARK : ColorModesEnum.LIGHT
 }
 
 const handleSystemPreferenceChange = callback => {
   const mediaQueryList = queryBrowserPreference()
+  if (!mediaQueryList) return () => {}
   const changeHandler = event => callback(event.matches ? ColorModesEnum.DARK : ColorModesEnum.LIGHT)
   mediaQueryList.addEventListener('change', changeHandler)
   return () => mediaQueryList.removeEventListener('change', changeHandler)
diff --git a/packages/react/src/recipes/FeaturePreviewLPs/FeaturePreviewLevelOne/FeaturePreviewLevelOne.module.css b/packages/react/src/recipes/FeaturePreviewLPs/FeaturePreviewLevelOne/FeaturePreviewLevelOne.module.css
index a1b8d55965..1d2a581e33 100644
--- a/packages/react/src/recipes/FeaturePreviewLPs/FeaturePreviewLevelOne/FeaturePreviewLevelOne.module.css
+++ b/packages/react/src/recipes/FeaturePreviewLPs/FeaturePreviewLevelOne/FeaturePreviewLevelOne.module.css
@@ -7,7 +7,7 @@
   --brand-Hero-regular-padding: var(--brand-Hero-narrow-padding);
 }
 
-[data-color-mode='dark'] .FeaturePreview__trailingSection {
+:is([data-color-mode='dark'], [data-color-scheme='dark']) .FeaturePreview__trailingSection {
   --brand-color-canvas-subtle: var(--base-color-scale-gray-7);
 }
 
@@ -89,7 +89,7 @@
     z-index: 1;
   }
 
-  [data-color-mode='dark'] .FeaturePreview__formContent {
+  :is([data-color-mode='dark'], [data-color-scheme='dark']) .FeaturePreview__formContent {
     background-color: var(--brand-color-canvas-subtle);
   }
 
diff --git a/packages/react/src/recipes/FeaturePreviewLPs/FeaturePreviewLevelTwo/FeaturePreviewLevelTwo.module.css b/packages/react/src/recipes/FeaturePreviewLPs/FeaturePreviewLevelTwo/FeaturePreviewLevelTwo.module.css
index 29446bb7df..f9999a6edd 100644
--- a/packages/react/src/recipes/FeaturePreviewLPs/FeaturePreviewLevelTwo/FeaturePreviewLevelTwo.module.css
+++ b/packages/react/src/recipes/FeaturePreviewLPs/FeaturePreviewLevelTwo/FeaturePreviewLevelTwo.module.css
@@ -45,7 +45,7 @@
   --brand-color-canvas-subtle: var(--base-color-scale-gray-1);
 }
 
-[data-color-mode='dark'] .FeaturePreview__trailingSection {
+:is([data-color-mode='dark'], [data-color-scheme='dark']) .FeaturePreview__trailingSection {
   --brand-color-canvas-subtle: var(--base-color-scale-gray-7);
 }
 
diff --git a/packages/react/src/recipes/Flexsuite/Overview/FlexSuiteAIOverview.module.css b/packages/react/src/recipes/Flexsuite/Overview/FlexSuiteAIOverview.module.css
index 8b80b579a1..93dbf09c95 100644
--- a/packages/react/src/recipes/Flexsuite/Overview/FlexSuiteAIOverview.module.css
+++ b/packages/react/src/recipes/Flexsuite/Overview/FlexSuiteAIOverview.module.css
@@ -58,7 +58,9 @@
     var(--brand-color-canvas-default);
 }
 
-[data-color-mode='dark'] .cardGridColumnArrowHover .cardGridItem:is(:hover, :focus-within) {
+:is([data-color-mode='dark'], [data-color-scheme='dark'])
+  .cardGridColumnArrowHover
+  .cardGridItem:is(:hover, :focus-within) {
   background: linear-gradient(180deg, rgba(242, 245, 243, 0.1) 0%, rgba(242, 245, 243, 0) 100%),
     var(--brand-color-canvas-default);
 }
diff --git a/packages/react/src/recipes/SolutionTemplates/CategoryPage/CategoryPage.module.css b/packages/react/src/recipes/SolutionTemplates/CategoryPage/CategoryPage.module.css
index e65c32cf74..bad9d673e2 100644
--- a/packages/react/src/recipes/SolutionTemplates/CategoryPage/CategoryPage.module.css
+++ b/packages/react/src/recipes/SolutionTemplates/CategoryPage/CategoryPage.module.css
@@ -52,19 +52,19 @@
   left: 20%;
 }
 
-[data-color-mode='light'] .customHero::before {
+:is([data-color-mode='light'], [data-color-scheme='light']) .customHero::before {
   background: var(--base-color-scale-blue-2);
 }
 
-[data-color-mode='light'] .customHero::after {
+:is([data-color-mode='light'], [data-color-scheme='light']) .customHero::after {
   background: var(--base-color-scale-purple-2);
 }
 
-[data-color-mode='dark'] .customHero::before {
+:is([data-color-mode='dark'], [data-color-scheme='dark']) .customHero::before {
   background: var(--base-color-scale-blue-5);
 }
 
-[data-color-mode='dark'] .customHero::after {
+:is([data-color-mode='dark'], [data-color-scheme='dark']) .customHero::after {
   background: var(--base-color-scale-purple-5);
 }
 
diff --git a/packages/react/src/recipes/SolutionTemplates/SolutionPage/SolutionPage.module.css b/packages/react/src/recipes/SolutionTemplates/SolutionPage/SolutionPage.module.css
index e934accffd..22b3dd4450 100644
--- a/packages/react/src/recipes/SolutionTemplates/SolutionPage/SolutionPage.module.css
+++ b/packages/react/src/recipes/SolutionTemplates/SolutionPage/SolutionPage.module.css
@@ -102,18 +102,18 @@
   top: calc(--topOffset - 100px);
 }
 
-[data-color-mode='light'] .heroVideoGlow::before {
+:is([data-color-mode='light'], [data-color-scheme='light']) .heroVideoGlow::before {
   background: var(--base-color-scale-blue-2);
 }
 
-[data-color-mode='light'] .heroVideoGlow::after {
+:is([data-color-mode='light'], [data-color-scheme='light']) .heroVideoGlow::after {
   background: var(--base-color-scale-purple-2);
 }
 
-[data-color-mode='dark'] .heroVideoGlow::before {
+:is([data-color-mode='dark'], [data-color-scheme='dark']) .heroVideoGlow::before {
   background: var(--base-color-scale-blue-7);
 }
 
-[data-color-mode='dark'] .heroVideoGlow::after {
+:is([data-color-mode='dark'], [data-color-scheme='dark']) .heroVideoGlow::after {
   background: var(--base-color-scale-purple-7);
 }
diff --git a/packages/react/src/recipes/seo/Category/CategoryPage.module.css b/packages/react/src/recipes/seo/Category/CategoryPage.module.css
index b25390e73a..11f159f476 100644
--- a/packages/react/src/recipes/seo/Category/CategoryPage.module.css
+++ b/packages/react/src/recipes/seo/Category/CategoryPage.module.css
@@ -33,8 +33,8 @@
   background-color: var(--base-color-scale-gray-1);
 }
 
-[data-color-mode='dark'] .navListItemSelected,
-[data-color-mode='dark'] .navListItem:hover {
+:is([data-color-mode='dark'], [data-color-scheme='dark']) .navListItemSelected,
+:is([data-color-mode='dark'], [data-color-scheme='dark']) .navListItem:hover {
   background-color: var(--base-color-scale-gray-6);
 }
 

From d8361a1ba052a63792708981d4bba420cc64ee29 Mon Sep 17 00:00:00 2001
From: Daniel Guillan <danielguillan@github.com>
Date: Thu, 30 Apr 2026 18:12:33 +0200
Subject: [PATCH 08/18] Update token formatter to support data-color-scheme and
 auto mode

---
 .../src/formats/color-mode-attributes.js      | 101 +++++++++++++-----
 1 file changed, 72 insertions(+), 29 deletions(-)

diff --git a/packages/design-tokens/src/formats/color-mode-attributes.js b/packages/design-tokens/src/formats/color-mode-attributes.js
index e109a57667..318caf05af 100644
--- a/packages/design-tokens/src/formats/color-mode-attributes.js
+++ b/packages/design-tokens/src/formats/color-mode-attributes.js
@@ -30,44 +30,32 @@ function colorModeAttributes({dictionary, file, options}) {
     allTokens = [...allTokens].sort(sortByReference(dictionary)) // TODO - add a test for this
   }
 
-  const renderLightMode = () =>
-    `:root, 
-    [data-color-mode=${defaultMode}]  { 
-      ${allTokens
-        .map(createPropertyFormatter({outputReferences, dictionary, format: 'css', formatter: {}, themeable: false}))
-        .filter(function (strVal) {
-          return !!strVal
-        })
-        .join('\n')}
-    }\n`
+  const getColorScheme = mode => (mode.includes('dark') ? 'dark' : 'light')
 
   /**
-   * Returns alternate color mode tokens by replacing the contents of value with said mode
+   * Renders token declarations for a given mode.
+   * Returns an empty string if no tokens exist for the mode.
    */
-  const renderAlternateColorMode = mode => {
-    if (mode === defaultMode) return renderLightMode()
+  const renderTokenDeclarations = mode => {
+    if (mode === defaultMode) {
+      return allTokens
+        .map(createPropertyFormatter({outputReferences, dictionary, format: 'css', formatter: {}, themeable: false}))
+        .filter(Boolean)
+        .join('\n')
+    }
 
     const replaceWithAlternateModeValue = token => {
       if (token.hasOwnProperty(mode)) {
-        return Object.assign({}, token, {
-          value: token[mode],
-        })
+        return Object.assign({}, token, {value: token[mode]})
       }
     }
 
     const newDictionary = JSON.parse(JSON.stringify(dictionary))
-
     newDictionary.allProperties = newDictionary.allProperties.map(replaceWithAlternateModeValue).filter(Boolean)
 
-    // short-circuit if no tokens are found for the supported modes
     if (!newDictionary.allProperties.length) return ''
 
-    const {allTokens: newAllTokens} = newDictionary
-
-    return `
-    [data-color-mode="${mode}"]  {
-    
-    ${newAllTokens
+    return newDictionary.allTokens
       .map(replaceWithAlternateModeValue)
       .filter(Boolean)
       .map(
@@ -79,17 +67,72 @@ function colorModeAttributes({dictionary, file, options}) {
           themeable: false,
         }),
       )
-      .filter(function (strVal) {
-        return !!strVal
-      })
-      .join('\n')}
-      
+      .filter(Boolean)
+      .join('\n')
+  }
+
+  const renderLightMode = () => {
+    const declarations = renderTokenDeclarations(defaultMode)
+    return `:root, 
+    [data-color-mode="${defaultMode}"],
+    [data-color-scheme="${defaultMode}"] { 
+      ${declarations}
     }\n`
   }
+
+  /**
+   * Returns alternate color mode tokens by replacing the contents of value with said mode
+   */
+  const renderAlternateColorMode = mode => {
+    if (mode === defaultMode) return renderLightMode()
+
+    const declarations = renderTokenDeclarations(mode)
+    if (!declarations) return ''
+
+    const colorScheme = getColorScheme(mode)
+
+    return `
+    :is([data-color-mode="${mode}"], [data-color-scheme="${colorScheme}"]) {
+      ${declarations}
+    }\n`
+  }
+
+  /**
+   * Renders auto mode media query blocks so that tokens respond to
+   * prefers-color-scheme when data-color-mode="auto" is set (e.g. by Primer React).
+   */
+  const renderAutoMode = () => {
+    const lightDeclarations = renderTokenDeclarations(defaultMode)
+    const darkDeclarations = renderTokenDeclarations('dark')
+
+    let output = ''
+
+    if (lightDeclarations) {
+      output += `
+      @media (prefers-color-scheme: light) {
+        [data-color-mode="auto"] {
+          ${lightDeclarations}
+        }
+      }\n`
+    }
+
+    if (darkDeclarations) {
+      output += `
+      @media (prefers-color-scheme: dark) {
+        [data-color-mode="auto"] {
+          ${darkDeclarations}
+        }
+      }\n`
+    }
+
+    return output
+  }
+
   const template = `
       ${fileHeader({file})}
  
     ${supportedModes.map(mode => renderAlternateColorMode(mode)).join('')}
+    ${renderAutoMode()}
     
     \n`
 

From 9d135bc6d9d1ce985cb7596823b2dd733ba2e1e1 Mon Sep 17 00:00:00 2001
From: Daniel Guillan <danielguillan@github.com>
Date: Thu, 30 Apr 2026 20:15:22 +0200
Subject: [PATCH 09/18] Add changeset

---
 .changeset/lazy-wolves-win.md | 6 ++++++
 1 file changed, 6 insertions(+)
 create mode 100644 .changeset/lazy-wolves-win.md

diff --git a/.changeset/lazy-wolves-win.md b/.changeset/lazy-wolves-win.md
new file mode 100644
index 0000000000..dd0f987ce0
--- /dev/null
+++ b/.changeset/lazy-wolves-win.md
@@ -0,0 +1,6 @@
+---
+'@primer/react-brand': minor
+'@primer/brand-primitives': patch
+---
+
+`ThemeProvider` now supports derivative color modes. You can pass modes like `"dark_dimmed"` or `"light_high_contrast"` and the right light or dark color tokens will apply. No new themes are added; derivative modes inherit from the existing `light` and `dark` token sets.

From 28bcbc078f72d22ad872c209a7f980944d9485a2 Mon Sep 17 00:00:00 2001
From: Daniel Guillan <danielguillan@github.com>
Date: Thu, 30 Apr 2026 22:18:54 +0200
Subject: [PATCH 10/18] Cleanup

---
 .../src/formats/color-mode-attributes.js      | 109 ++++++------------
 .../src/formats/color-mode-attributes.test.js |  14 ++-
 2 files changed, 46 insertions(+), 77 deletions(-)

diff --git a/packages/design-tokens/src/formats/color-mode-attributes.js b/packages/design-tokens/src/formats/color-mode-attributes.js
index 318caf05af..6b015ba851 100644
--- a/packages/design-tokens/src/formats/color-mode-attributes.js
+++ b/packages/design-tokens/src/formats/color-mode-attributes.js
@@ -30,32 +30,51 @@ function colorModeAttributes({dictionary, file, options}) {
     allTokens = [...allTokens].sort(sortByReference(dictionary)) // TODO - add a test for this
   }
 
-  const getColorScheme = mode => (mode.includes('dark') ? 'dark' : 'light')
+  const renderLightMode = () =>
+    `:root, 
+    [data-color-mode=${defaultMode}],
+    [data-color-scheme="light"] { 
+      ${allTokens
+        .map(createPropertyFormatter({outputReferences, dictionary, format: 'css', formatter: {}, themeable: false}))
+        .filter(function (strVal) {
+          return !!strVal
+        })
+        .join('\n')}
+    }\n`
 
   /**
-   * Renders token declarations for a given mode.
-   * Returns an empty string if no tokens exist for the mode.
+   * Returns alternate color mode tokens by replacing the contents of value with said mode
    */
-  const renderTokenDeclarations = mode => {
-    if (mode === defaultMode) {
-      return allTokens
-        .map(createPropertyFormatter({outputReferences, dictionary, format: 'css', formatter: {}, themeable: false}))
-        .filter(Boolean)
-        .join('\n')
-    }
+  const renderAlternateColorMode = mode => {
+    if (mode === defaultMode) return renderLightMode()
 
     const replaceWithAlternateModeValue = token => {
       if (token.hasOwnProperty(mode)) {
-        return Object.assign({}, token, {value: token[mode]})
+        return Object.assign({}, token, {
+          value: token[mode],
+        })
       }
     }
 
     const newDictionary = JSON.parse(JSON.stringify(dictionary))
+
     newDictionary.allProperties = newDictionary.allProperties.map(replaceWithAlternateModeValue).filter(Boolean)
 
+    // short-circuit if no tokens are found for the supported modes
     if (!newDictionary.allProperties.length) return ''
 
-    return newDictionary.allTokens
+    const {allTokens: newAllTokens} = newDictionary
+
+    let selector = `[data-color-mode="${mode}"]`
+    // Only add data-color-scheme for base dark mode
+    if (mode === 'dark') {
+      selector = `[data-color-mode="${mode}"], [data-color-scheme="dark"]`
+    }
+
+    return `
+    ${selector}  {
+    
+    ${newAllTokens
       .map(replaceWithAlternateModeValue)
       .filter(Boolean)
       .map(
@@ -67,72 +86,18 @@ function colorModeAttributes({dictionary, file, options}) {
           themeable: false,
         }),
       )
-      .filter(Boolean)
-      .join('\n')
-  }
-
-  const renderLightMode = () => {
-    const declarations = renderTokenDeclarations(defaultMode)
-    return `:root, 
-    [data-color-mode="${defaultMode}"],
-    [data-color-scheme="${defaultMode}"] { 
-      ${declarations}
-    }\n`
-  }
-
-  /**
-   * Returns alternate color mode tokens by replacing the contents of value with said mode
-   */
-  const renderAlternateColorMode = mode => {
-    if (mode === defaultMode) return renderLightMode()
-
-    const declarations = renderTokenDeclarations(mode)
-    if (!declarations) return ''
-
-    const colorScheme = getColorScheme(mode)
-
-    return `
-    :is([data-color-mode="${mode}"], [data-color-scheme="${colorScheme}"]) {
-      ${declarations}
+      .filter(function (strVal) {
+        return !!strVal
+      })
+      .join('\n')}
+      
     }\n`
   }
 
-  /**
-   * Renders auto mode media query blocks so that tokens respond to
-   * prefers-color-scheme when data-color-mode="auto" is set (e.g. by Primer React).
-   */
-  const renderAutoMode = () => {
-    const lightDeclarations = renderTokenDeclarations(defaultMode)
-    const darkDeclarations = renderTokenDeclarations('dark')
-
-    let output = ''
-
-    if (lightDeclarations) {
-      output += `
-      @media (prefers-color-scheme: light) {
-        [data-color-mode="auto"] {
-          ${lightDeclarations}
-        }
-      }\n`
-    }
-
-    if (darkDeclarations) {
-      output += `
-      @media (prefers-color-scheme: dark) {
-        [data-color-mode="auto"] {
-          ${darkDeclarations}
-        }
-      }\n`
-    }
-
-    return output
-  }
-
   const template = `
       ${fileHeader({file})}
- 
+  
     ${supportedModes.map(mode => renderAlternateColorMode(mode)).join('')}
-    ${renderAutoMode()}
     
     \n`
 
diff --git a/packages/design-tokens/src/formats/color-mode-attributes.test.js b/packages/design-tokens/src/formats/color-mode-attributes.test.js
index 3b7eee9821..22e7b2c1fc 100644
--- a/packages/design-tokens/src/formats/color-mode-attributes.test.js
+++ b/packages/design-tokens/src/formats/color-mode-attributes.test.js
@@ -133,7 +133,8 @@ describe('Design tokens', () => {
 
     const expectedOutput = `
 :root,
-[data-color-mode="light"] {
+[data-color-mode="light"],
+[data-color-scheme="light"] {
   --brand-text-color-example: gray;
 }
 
@@ -141,7 +142,8 @@ describe('Design tokens', () => {
   --brand-text-color-example: black;
 }
 
-[data-color-mode="dark"] {
+[data-color-mode="dark"],
+[data-color-scheme="dark"] {
   --brand-text-color-example: white;
 }
 `.trim()
@@ -460,13 +462,15 @@ describe('Design tokens', () => {
 
     const expectedOutput = `
 :root,
-[data-color-mode="light"] {
+[data-color-mode="light"],
+[data-color-scheme="light"] {
   --base-color-scale-gray-0: #f6f8fa;
   --base-color-scale-gray-1: #eaeef2;
   --base-color-scale-gray-2: #b1bac4;
 }
 
-[data-color-mode="dark"] {
+[data-color-mode="dark"],
+[data-color-scheme="dark"] {
   --base-color-scale-gray-0: #f0f6fc;
   --base-color-scale-gray-1: #c9d1d9;
   --base-color-scale-gray-2: #b1bac4;
@@ -476,7 +480,7 @@ describe('Design tokens', () => {
   --base-color-scale-gray-0: #f0f6fc;
   --base-color-scale-gray-1: #c9d1d9;
   --base-color-scale-gray-2: #b1bac4;
-}    
+}
 `.trim()
 
     // remove timestamp and trim

From 7b494eb7c92635fc304d969059611b239d9ac510 Mon Sep 17 00:00:00 2001
From: Daniel Guillan <danielguillan@github.com>
Date: Thu, 30 Apr 2026 22:35:29 +0200
Subject: [PATCH 11/18] Fixes

---
 packages/react/src/Card/CardSkewEffect.tsx    |  7 ++--
 .../src/MinimalFooter/MinimalFooter.test.tsx  | 12 +++++++
 .../react/src/MinimalFooter/MinimalFooter.tsx |  5 +--
 .../react/src/ThemeProvider/ThemeProvider.tsx | 17 ++-------
 .../FlexTemplate/FlexSection/FlexSection.tsx  |  8 +++--
 .../components/FlexSectionTestimonials.tsx    |  7 ++--
 .../Overview/FlexSuiteAIOverview.tsx          | 35 +++++--------------
 7 files changed, 40 insertions(+), 51 deletions(-)

diff --git a/packages/react/src/Card/CardSkewEffect.tsx b/packages/react/src/Card/CardSkewEffect.tsx
index 43f77404e9..5d196c818a 100644
--- a/packages/react/src/Card/CardSkewEffect.tsx
+++ b/packages/react/src/Card/CardSkewEffect.tsx
@@ -1,7 +1,7 @@
 import React, {useRef, useEffect, PropsWithChildren} from 'react'
 import {clsx} from 'clsx'
 
-import {useTheme} from '../'
+import {getColorScheme, useTheme} from '../'
 import {BaseProps} from '../component-helpers'
 
 import styles from './Card.module.css'
@@ -21,11 +21,12 @@ export const CardSkewEffect = ({
   ...rest
 }: PropsWithChildren<CardSkewEffectProps>) => {
   const {colorMode} = useTheme()
+  const colorScheme = getColorScheme(colorMode)
   const boundingRef = useRef<HTMLDivElement | null>(null)
   const torchRef = useRef<HTMLDivElement | null>(null)
 
   useEffect(() => {
-    if (colorMode === 'light' || disableSkew) return
+    if (colorScheme === 'light' || disableSkew) return
 
     const motionQuery = window.matchMedia('(prefers-reduced-motion: reduce)')
 
@@ -70,7 +71,7 @@ export const CardSkewEffect = ({
       torchElement?.removeEventListener('mousemove', handleMouseMove)
       motionQuery.removeEventListener('change', handleReducedMotionChange)
     }
-  }, [disableSkew, perspective, colorMode])
+  }, [disableSkew, perspective, colorScheme])
 
   return (
     <div ref={boundingRef} className={clsx(styles['Card--skew'], className)} {...rest}>
diff --git a/packages/react/src/MinimalFooter/MinimalFooter.test.tsx b/packages/react/src/MinimalFooter/MinimalFooter.test.tsx
index effe343c6d..9c4e68b7e8 100644
--- a/packages/react/src/MinimalFooter/MinimalFooter.test.tsx
+++ b/packages/react/src/MinimalFooter/MinimalFooter.test.tsx
@@ -298,6 +298,18 @@ describe('MinimalFooter', () => {
     )
   })
 
+  it('uses dark logo fill for derived dark color modes', () => {
+    const {container} = render(
+      <ThemeProvider colorMode="dark_dimmed">
+        <MinimalFooter />
+      </ThemeProvider>,
+    )
+
+    const logo = container.querySelector('a[aria-label="GitHub"] svg')
+
+    expect(logo).toHaveAttribute('fill', 'white')
+  })
+
   it('renders social links with visually hidden text', () => {
     const {getByText} = render(<MinimalFooter socialLinks={['x']} />)
     const hiddenText = getByText('GitHub on X')
diff --git a/packages/react/src/MinimalFooter/MinimalFooter.tsx b/packages/react/src/MinimalFooter/MinimalFooter.tsx
index db8a7936d1..b49f409335 100644
--- a/packages/react/src/MinimalFooter/MinimalFooter.tsx
+++ b/packages/react/src/MinimalFooter/MinimalFooter.tsx
@@ -2,7 +2,7 @@ import React, {PropsWithChildren} from 'react'
 import {clsx} from 'clsx'
 import {LogoGithubIcon} from '@primer/octicons-react'
 
-import {ColorModesEnum, Stack, Text, useTheme} from '../'
+import {getColorScheme, Stack, Text, useTheme} from '../'
 import {BaseProps} from '../component-helpers'
 
 /**
@@ -235,6 +235,7 @@ type SocialLogomarksProps = {
 
 function SocialLogomarks({socialLinks = socialLinkNames, logoHref}: SocialLogomarksProps) {
   const {colorMode} = useTheme()
+  const colorScheme = getColorScheme(colorMode)
 
   return (
     <section className={clsx(styles['Footer__logomarks'])}>
@@ -252,7 +253,7 @@ function SocialLogomarks({socialLinks = socialLinkNames, logoHref}: SocialLogoma
               data-analytics-event='{"category":"Footer","action":"go to home","label":"text:home"}'
               aria-label="GitHub"
             >
-              <LogoGithubIcon fill={colorMode === ColorModesEnum.DARK ? 'white' : 'black'} size="medium" />
+              <LogoGithubIcon fill={colorScheme === 'dark' ? 'white' : 'black'} size="medium" />
             </a>
           </div>
           {socialLinks ? (
diff --git a/packages/react/src/ThemeProvider/ThemeProvider.tsx b/packages/react/src/ThemeProvider/ThemeProvider.tsx
index efddbafa99..8dd814e3ba 100644
--- a/packages/react/src/ThemeProvider/ThemeProvider.tsx
+++ b/packages/react/src/ThemeProvider/ThemeProvider.tsx
@@ -39,16 +39,6 @@ export const ThemeContext = createContext<ThemeContextProps>({
   availableColorModes: Object.values(ColorModesEnum),
 })
 
-/**
- * SSR-safe matchMedia wrapper. Returns undefined when window.matchMedia is unavailable.
- */
-const safeMatchMedia = (query: string): MediaQueryList | undefined => {
-  if (typeof window !== 'undefined' && typeof window.matchMedia === 'function') {
-    return window.matchMedia(query)
-  }
-  return undefined
-}
-
 /**
  * ThemeProvider is used to provide theme-related context to its child components.
  */
@@ -75,16 +65,15 @@ export function ThemeProvider({colorMode = defaultMode, children, ...rest}: Prop
   )
 }
 
-const queryBrowserPreference = () => safeMatchMedia(`(prefers-color-scheme: ${ColorModesEnum.DARK})`)
+const queryBrowserPreference = () => window.matchMedia(`(prefers-color-scheme: ${ColorModesEnum.DARK})`)
 
 const getActiveAutoMode = () => {
-  const mediaQueryList = queryBrowserPreference()
-  return mediaQueryList?.matches ? ColorModesEnum.DARK : ColorModesEnum.LIGHT
+  const mediaQueryList: MediaQueryList = queryBrowserPreference()
+  return mediaQueryList.matches ? ColorModesEnum.DARK : ColorModesEnum.LIGHT
 }
 
 const handleSystemPreferenceChange = callback => {
   const mediaQueryList = queryBrowserPreference()
-  if (!mediaQueryList) return () => {}
   const changeHandler = event => callback(event.matches ? ColorModesEnum.DARK : ColorModesEnum.LIGHT)
   mediaQueryList.addEventListener('change', changeHandler)
   return () => mediaQueryList.removeEventListener('change', changeHandler)
diff --git a/packages/react/src/recipes/FlexTemplate/FlexSection/FlexSection.tsx b/packages/react/src/recipes/FlexTemplate/FlexSection/FlexSection.tsx
index 70d28a412c..0c831d8775 100644
--- a/packages/react/src/recipes/FlexTemplate/FlexSection/FlexSection.tsx
+++ b/packages/react/src/recipes/FlexTemplate/FlexSection/FlexSection.tsx
@@ -26,6 +26,7 @@ import {
   Stack,
   Statistic,
   Text,
+  getColorScheme,
   useTheme,
 } from '../../..'
 
@@ -56,6 +57,7 @@ type FlexSectionProps = {
 
 export function FlexSection({component, className}: FlexSectionProps) {
   const {colorMode} = useTheme()
+  const colorScheme = getColorScheme(colorMode)
   const [selectedSegmentedControlItem, setSelectedSegmentedControlItem] = React.useState(0)
   const {
     breakoutBanner,
@@ -435,9 +437,9 @@ export function FlexSection({component, className}: FlexSectionProps) {
                   align={breakoutBanner.align}
                   backgroundColor={backgroundColor}
                   backgroundImageSrc={{
-                    narrow: colorMode === 'dark' ? darkNarrowBg : lightNarrowBg,
-                    regular: colorMode === 'dark' ? darkWideBg : lightWideBg,
-                    wide: colorMode === 'dark' ? darkWideBg : lightWideBg,
+                    narrow: colorScheme === 'dark' ? darkNarrowBg : lightNarrowBg,
+                    regular: colorScheme === 'dark' ? darkWideBg : lightWideBg,
+                    wide: colorScheme === 'dark' ? darkWideBg : lightWideBg,
                   }}
                   backgroundImagePosition={{
                     narrow: 'bottom',
diff --git a/packages/react/src/recipes/FlexTemplate/FlexSection/components/FlexSectionTestimonials.tsx b/packages/react/src/recipes/FlexTemplate/FlexSection/components/FlexSectionTestimonials.tsx
index 9a8d29e94a..fd28837057 100644
--- a/packages/react/src/recipes/FlexTemplate/FlexSection/components/FlexSectionTestimonials.tsx
+++ b/packages/react/src/recipes/FlexTemplate/FlexSection/components/FlexSectionTestimonials.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import {clsx} from 'clsx'
 
-import {Box, Grid, Image, useTheme} from '../../../..'
+import {Box, Grid, Image, getColorScheme, useTheme} from '../../../..'
 import {ContentfulTestimonials} from './ContentfulTestimonials'
 import type {FlexTemplateTestimonialsConfig} from '../../FlexTemplate.types'
 
@@ -77,6 +77,7 @@ type FlexSectionTestimonialsProps = {
 
 export function FlexSectionTestimonials({testimonials, className}: FlexSectionTestimonialsProps) {
   const {colorMode} = useTheme()
+  const colorScheme = getColorScheme(colorMode)
 
   const variant = testimonials.variant ?? 'minimal'
   const backgroundVariant = testimonials.backgroundImageVariant
@@ -93,14 +94,14 @@ export function FlexSectionTestimonials({testimonials, className}: FlexSectionTe
           marginBlockEnd={{narrow: 'none', wide: set.marginBlockEnd}}
         >
           <Image
-            src={colorMode === 'light' ? startShapeLight : startShapeDark}
+            src={colorScheme === 'light' ? startShapeLight : startShapeDark}
             alt=""
             className={clsx(styles.testimonialBackgroundImageShape, styles.left)}
             width={set.left.width}
             loading="lazy"
           />
           <Image
-            src={colorMode === 'light' ? endShapeLight : endShapeDark}
+            src={colorScheme === 'light' ? endShapeLight : endShapeDark}
             alt=""
             className={clsx(styles.testimonialBackgroundImageShape, styles.right)}
             width={set.right.width}
diff --git a/packages/react/src/recipes/Flexsuite/Overview/FlexSuiteAIOverview.tsx b/packages/react/src/recipes/Flexsuite/Overview/FlexSuiteAIOverview.tsx
index ca06ea09b2..8d27aa6a45 100644
--- a/packages/react/src/recipes/Flexsuite/Overview/FlexSuiteAIOverview.tsx
+++ b/packages/react/src/recipes/Flexsuite/Overview/FlexSuiteAIOverview.tsx
@@ -5,11 +5,11 @@ import React, {useEffect} from 'react'
 import {
   Box,
   Card,
-  ColorModesEnum,
   CTABanner,
   FAQ,
   FAQGroup,
   Grid,
+  getColorScheme,
   Hero,
   Heading,
   InlineLink,
@@ -56,6 +56,7 @@ export function FlexSuiteAIOverviewTemplate({content}: FlexSuiteAIOverviewTempla
   const heroImageRef = React.useRef<HTMLDivElement>(null)
   const riverImageRefs = React.useRef<Array<HTMLDivElement | null>>([])
   const {colorMode} = useTheme()
+  const colorScheme = getColorScheme(colorMode)
 
   useEffect(() => {
     const cleanups: Array<() => void> = []
@@ -128,7 +129,7 @@ export function FlexSuiteAIOverviewTemplate({content}: FlexSuiteAIOverviewTempla
             <Hero.Image
               enableBorder={false}
               position="block-end"
-              src={colorMode === ColorModesEnum.DARK ? renderUI3Dark : renderUI3}
+              src={colorScheme === 'dark' ? renderUI3Dark : renderUI3}
               alt={content.hero.imageAlt}
             />
           </Hero>
@@ -184,14 +185,8 @@ export function FlexSuiteAIOverviewTemplate({content}: FlexSuiteAIOverviewTempla
                 imageBackgroundColor="subtle"
               >
                 <picture>
-                  <source
-                    srcSet={colorMode === ColorModesEnum.DARK ? renderUI3Dark : renderUI3}
-                    media="(max-width: 47.99rem)"
-                  />
-                  <img
-                    src={colorMode === ColorModesEnum.DARK ? renderUI3Dark : renderUI3}
-                    alt={content.rivers[0].imageAlt}
-                  />
+                  <source srcSet={colorScheme === 'dark' ? renderUI3Dark : renderUI3} media="(max-width: 47.99rem)" />
+                  <img src={colorScheme === 'dark' ? renderUI3Dark : renderUI3} alt={content.rivers[0].imageAlt} />
                 </picture>
               </River.Visual>
               <River.Content>
@@ -209,14 +204,8 @@ export function FlexSuiteAIOverviewTemplate({content}: FlexSuiteAIOverviewTempla
                 imageBackgroundColor="subtle"
               >
                 <picture>
-                  <source
-                    srcSet={colorMode === ColorModesEnum.DARK ? renderUI3Dark : renderUI3}
-                    media="(max-width: 47.99rem)"
-                  />
-                  <img
-                    src={colorMode === ColorModesEnum.DARK ? renderUI3Dark : renderUI3}
-                    alt={content.rivers[1].imageAlt}
-                  />
+                  <source srcSet={colorScheme === 'dark' ? renderUI3Dark : renderUI3} media="(max-width: 47.99rem)" />
+                  <img src={colorScheme === 'dark' ? renderUI3Dark : renderUI3} alt={content.rivers[1].imageAlt} />
                 </picture>
               </River.Visual>
               <River.Content>
@@ -234,14 +223,8 @@ export function FlexSuiteAIOverviewTemplate({content}: FlexSuiteAIOverviewTempla
                 imageBackgroundColor="subtle"
               >
                 <picture>
-                  <source
-                    srcSet={colorMode === ColorModesEnum.DARK ? renderUI3Dark : renderUI3}
-                    media="(max-width: 47.99rem)"
-                  />
-                  <img
-                    src={colorMode === ColorModesEnum.DARK ? renderUI3Dark : renderUI3}
-                    alt={content.rivers[2].imageAlt}
-                  />
+                  <source srcSet={colorScheme === 'dark' ? renderUI3Dark : renderUI3} media="(max-width: 47.99rem)" />
+                  <img src={colorScheme === 'dark' ? renderUI3Dark : renderUI3} alt={content.rivers[2].imageAlt} />
                 </picture>
               </River.Visual>
               <River.Content>

From a3820b76b6743499b78b195e16753badeab0a321 Mon Sep 17 00:00:00 2001
From: Daniel Guillan <danielguillan@github.com>
Date: Thu, 30 Apr 2026 22:44:17 +0200
Subject: [PATCH 12/18] Cleanup

---
 packages/design-tokens/src/formats/color-mode-attributes.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/design-tokens/src/formats/color-mode-attributes.js b/packages/design-tokens/src/formats/color-mode-attributes.js
index 6b015ba851..550cd9d202 100644
--- a/packages/design-tokens/src/formats/color-mode-attributes.js
+++ b/packages/design-tokens/src/formats/color-mode-attributes.js
@@ -66,7 +66,7 @@ function colorModeAttributes({dictionary, file, options}) {
     const {allTokens: newAllTokens} = newDictionary
 
     let selector = `[data-color-mode="${mode}"]`
-    // Only add data-color-scheme for base dark mode
+
     if (mode === 'dark') {
       selector = `[data-color-mode="${mode}"], [data-color-scheme="dark"]`
     }
@@ -96,7 +96,7 @@ function colorModeAttributes({dictionary, file, options}) {
 
   const template = `
       ${fileHeader({file})}
-  
+ 
     ${supportedModes.map(mode => renderAlternateColorMode(mode)).join('')}
     
     \n`

From 966eb0a36f3dd7fadce7473cd55a609cd58bdea8 Mon Sep 17 00:00:00 2001
From: Daniel Guillan <danielguillan@github.com>
Date: Mon, 4 May 2026 16:18:26 +0200
Subject: [PATCH 13/18] Remove color-scheme in component scope

---
 packages/react/src/Accordion/Accordion.module.css         | 2 +-
 packages/react/src/Card/Card.stories.shared.module.css    | 2 +-
 packages/react/src/Heading/Heading.module.css             | 2 +-
 packages/react/src/Hero/Hero.stories.module.css           | 4 ++--
 packages/react/src/InlineLink/InlineLink.module.css       | 2 +-
 packages/react/src/Label/Label.module.css                 | 2 +-
 packages/react/src/MinimalFooter/MinimalFooter.module.css | 2 +-
 packages/react/src/SubNav/SubNav.module.css               | 2 +-
 packages/react/src/Text/Text.module.css                   | 2 +-
 packages/react/src/Token/Token.module.css                 | 1 -
 .../FeaturePreviewLevelOne.module.css                     | 4 ++--
 .../FeaturePreviewLevelTwo.module.css                     | 2 +-
 .../Flexsuite/Overview/FlexSuiteAIOverview.module.css     | 4 +---
 .../CategoryPage/CategoryPage.module.css                  | 8 ++++----
 .../SolutionPage/SolutionPage.module.css                  | 8 ++++----
 .../src/recipes/seo/Category/CategoryPage.module.css      | 4 ++--
 16 files changed, 24 insertions(+), 27 deletions(-)

diff --git a/packages/react/src/Accordion/Accordion.module.css b/packages/react/src/Accordion/Accordion.module.css
index be54023e10..9ecb41c0ec 100644
--- a/packages/react/src/Accordion/Accordion.module.css
+++ b/packages/react/src/Accordion/Accordion.module.css
@@ -276,7 +276,7 @@ details[open] > .Accordion__summary.Accordion__summary--default .Accordion__summ
   line-height: var(--brand-text-lineHeight-200);
 }
 
-:is([data-color-mode='dark'], [data-color-scheme='dark']) .Accordion__content {
+[data-color-mode='dark'] .Accordion__content {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: auto;
 }
diff --git a/packages/react/src/Card/Card.stories.shared.module.css b/packages/react/src/Card/Card.stories.shared.module.css
index 434542aedc..01070f8006 100644
--- a/packages/react/src/Card/Card.stories.shared.module.css
+++ b/packages/react/src/Card/Card.stories.shared.module.css
@@ -34,7 +34,7 @@
     var(--brand-color-canvas-default);
 }
 
-:is([data-color-mode='dark'], [data-color-scheme='dark']) .gridColumnArrowHover .gridItem:is(:hover, :focus-within) {
+[data-color-mode='dark'] .gridColumnArrowHover .gridItem:is(:hover, :focus-within) {
   background: linear-gradient(180deg, rgba(242, 245, 243, 0.1) 0%, rgba(242, 245, 243, 0) 100%),
     var(--brand-color-canvas-default);
 }
diff --git a/packages/react/src/Heading/Heading.module.css b/packages/react/src/Heading/Heading.module.css
index 532388a03a..98beabb78d 100644
--- a/packages/react/src/Heading/Heading.module.css
+++ b/packages/react/src/Heading/Heading.module.css
@@ -15,7 +15,7 @@
   --condensed-stretch: 90%;
 }
 
-:is([data-color-mode='dark'], [data-color-scheme='dark']) .Heading {
+[data-color-mode='dark'] .Heading {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
diff --git a/packages/react/src/Hero/Hero.stories.module.css b/packages/react/src/Hero/Hero.stories.module.css
index 43864f2963..02c4930f69 100644
--- a/packages/react/src/Hero/Hero.stories.module.css
+++ b/packages/react/src/Hero/Hero.stories.module.css
@@ -12,10 +12,10 @@
 .heroWithCardsExample {
   --customCardsBackgroundColor: transparent;
 }
-:is([data-color-mode='light'], [data-color-scheme='light']) .heroWithCardsExample {
+[data-color-mode='light'] .heroWithCardsExample {
   --customCardsBackgroundColor: var(--base-color-scale-gray-1);
 }
-:is([data-color-mode='dark'], [data-color-scheme='dark']) .heroWithCardsExample {
+[data-color-mode='dark'] .heroWithCardsExample {
   --customCardsBackgroundColor: var(--base-color-scale-gray-9);
 }
 
diff --git a/packages/react/src/InlineLink/InlineLink.module.css b/packages/react/src/InlineLink/InlineLink.module.css
index 9f0dbd77c9..42224c1adb 100644
--- a/packages/react/src/InlineLink/InlineLink.module.css
+++ b/packages/react/src/InlineLink/InlineLink.module.css
@@ -24,7 +24,7 @@
   color: var(--brand-InlineLink-color-pressed);
 }
 
-:is([data-color-mode='dark'], [data-color-scheme='dark']) .InlineLink {
+[data-color-mode='dark'] .InlineLink {
   -webkit-font-smoothing: subpixel-antialiased;
   -moz-osx-font-smoothing: auto;
 }
diff --git a/packages/react/src/Label/Label.module.css b/packages/react/src/Label/Label.module.css
index 8d9436e1ec..737941a86b 100644
--- a/packages/react/src/Label/Label.module.css
+++ b/packages/react/src/Label/Label.module.css
@@ -32,7 +32,7 @@
   text-align: center;
 }
 
-:is([data-color-mode='dark'], [data-color-scheme='dark']) .Label {
+[data-color-mode='dark'] .Label {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: auto;
 }
diff --git a/packages/react/src/MinimalFooter/MinimalFooter.module.css b/packages/react/src/MinimalFooter/MinimalFooter.module.css
index 49bf2243c1..b3c7b1a0ad 100644
--- a/packages/react/src/MinimalFooter/MinimalFooter.module.css
+++ b/packages/react/src/MinimalFooter/MinimalFooter.module.css
@@ -81,7 +81,7 @@
   height: auto;
 }
 
-:is([data-color-mode='light'], [data-color-scheme='light']) .Footer__social-icon {
+[data-color-mode='light'] .Footer__social-icon {
   filter: brightness(95%) saturate(100%);
 }
 
diff --git a/packages/react/src/SubNav/SubNav.module.css b/packages/react/src/SubNav/SubNav.module.css
index 0903601a22..08a23b4447 100644
--- a/packages/react/src/SubNav/SubNav.module.css
+++ b/packages/react/src/SubNav/SubNav.module.css
@@ -21,7 +21,7 @@
   background-color: var(--brand-SubNav-bgColor);
 }
 
-:is([data-color-mode='dark'], [data-color-scheme='dark']) .SubNav {
+[data-color-mode='dark'] .SubNav {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
diff --git a/packages/react/src/Text/Text.module.css b/packages/react/src/Text/Text.module.css
index 22b4bafa26..f810f2e96b 100644
--- a/packages/react/src/Text/Text.module.css
+++ b/packages/react/src/Text/Text.module.css
@@ -2,7 +2,7 @@
   font-family: var(--brand-body-fontFamily);
 }
 
-:is([data-color-mode='dark'], [data-color-scheme='dark']) .Text--antialiased {
+[data-color-mode='dark'] .Text--antialiased {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: auto;
 }
diff --git a/packages/react/src/Token/Token.module.css b/packages/react/src/Token/Token.module.css
index 9896108d04..25d14997f0 100644
--- a/packages/react/src/Token/Token.module.css
+++ b/packages/react/src/Token/Token.module.css
@@ -26,7 +26,6 @@
   outline: var(--base-size-4) solid var(--brand-color-focus);
   outline-offset: var(--base-size-2);
 }
-
 [data-color-mode='dark'] .Token {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: auto;
diff --git a/packages/react/src/recipes/FeaturePreviewLPs/FeaturePreviewLevelOne/FeaturePreviewLevelOne.module.css b/packages/react/src/recipes/FeaturePreviewLPs/FeaturePreviewLevelOne/FeaturePreviewLevelOne.module.css
index 1d2a581e33..a1b8d55965 100644
--- a/packages/react/src/recipes/FeaturePreviewLPs/FeaturePreviewLevelOne/FeaturePreviewLevelOne.module.css
+++ b/packages/react/src/recipes/FeaturePreviewLPs/FeaturePreviewLevelOne/FeaturePreviewLevelOne.module.css
@@ -7,7 +7,7 @@
   --brand-Hero-regular-padding: var(--brand-Hero-narrow-padding);
 }
 
-:is([data-color-mode='dark'], [data-color-scheme='dark']) .FeaturePreview__trailingSection {
+[data-color-mode='dark'] .FeaturePreview__trailingSection {
   --brand-color-canvas-subtle: var(--base-color-scale-gray-7);
 }
 
@@ -89,7 +89,7 @@
     z-index: 1;
   }
 
-  :is([data-color-mode='dark'], [data-color-scheme='dark']) .FeaturePreview__formContent {
+  [data-color-mode='dark'] .FeaturePreview__formContent {
     background-color: var(--brand-color-canvas-subtle);
   }
 
diff --git a/packages/react/src/recipes/FeaturePreviewLPs/FeaturePreviewLevelTwo/FeaturePreviewLevelTwo.module.css b/packages/react/src/recipes/FeaturePreviewLPs/FeaturePreviewLevelTwo/FeaturePreviewLevelTwo.module.css
index f9999a6edd..29446bb7df 100644
--- a/packages/react/src/recipes/FeaturePreviewLPs/FeaturePreviewLevelTwo/FeaturePreviewLevelTwo.module.css
+++ b/packages/react/src/recipes/FeaturePreviewLPs/FeaturePreviewLevelTwo/FeaturePreviewLevelTwo.module.css
@@ -45,7 +45,7 @@
   --brand-color-canvas-subtle: var(--base-color-scale-gray-1);
 }
 
-:is([data-color-mode='dark'], [data-color-scheme='dark']) .FeaturePreview__trailingSection {
+[data-color-mode='dark'] .FeaturePreview__trailingSection {
   --brand-color-canvas-subtle: var(--base-color-scale-gray-7);
 }
 
diff --git a/packages/react/src/recipes/Flexsuite/Overview/FlexSuiteAIOverview.module.css b/packages/react/src/recipes/Flexsuite/Overview/FlexSuiteAIOverview.module.css
index 93dbf09c95..8b80b579a1 100644
--- a/packages/react/src/recipes/Flexsuite/Overview/FlexSuiteAIOverview.module.css
+++ b/packages/react/src/recipes/Flexsuite/Overview/FlexSuiteAIOverview.module.css
@@ -58,9 +58,7 @@
     var(--brand-color-canvas-default);
 }
 
-:is([data-color-mode='dark'], [data-color-scheme='dark'])
-  .cardGridColumnArrowHover
-  .cardGridItem:is(:hover, :focus-within) {
+[data-color-mode='dark'] .cardGridColumnArrowHover .cardGridItem:is(:hover, :focus-within) {
   background: linear-gradient(180deg, rgba(242, 245, 243, 0.1) 0%, rgba(242, 245, 243, 0) 100%),
     var(--brand-color-canvas-default);
 }
diff --git a/packages/react/src/recipes/SolutionTemplates/CategoryPage/CategoryPage.module.css b/packages/react/src/recipes/SolutionTemplates/CategoryPage/CategoryPage.module.css
index bad9d673e2..e65c32cf74 100644
--- a/packages/react/src/recipes/SolutionTemplates/CategoryPage/CategoryPage.module.css
+++ b/packages/react/src/recipes/SolutionTemplates/CategoryPage/CategoryPage.module.css
@@ -52,19 +52,19 @@
   left: 20%;
 }
 
-:is([data-color-mode='light'], [data-color-scheme='light']) .customHero::before {
+[data-color-mode='light'] .customHero::before {
   background: var(--base-color-scale-blue-2);
 }
 
-:is([data-color-mode='light'], [data-color-scheme='light']) .customHero::after {
+[data-color-mode='light'] .customHero::after {
   background: var(--base-color-scale-purple-2);
 }
 
-:is([data-color-mode='dark'], [data-color-scheme='dark']) .customHero::before {
+[data-color-mode='dark'] .customHero::before {
   background: var(--base-color-scale-blue-5);
 }
 
-:is([data-color-mode='dark'], [data-color-scheme='dark']) .customHero::after {
+[data-color-mode='dark'] .customHero::after {
   background: var(--base-color-scale-purple-5);
 }
 
diff --git a/packages/react/src/recipes/SolutionTemplates/SolutionPage/SolutionPage.module.css b/packages/react/src/recipes/SolutionTemplates/SolutionPage/SolutionPage.module.css
index 22b3dd4450..e934accffd 100644
--- a/packages/react/src/recipes/SolutionTemplates/SolutionPage/SolutionPage.module.css
+++ b/packages/react/src/recipes/SolutionTemplates/SolutionPage/SolutionPage.module.css
@@ -102,18 +102,18 @@
   top: calc(--topOffset - 100px);
 }
 
-:is([data-color-mode='light'], [data-color-scheme='light']) .heroVideoGlow::before {
+[data-color-mode='light'] .heroVideoGlow::before {
   background: var(--base-color-scale-blue-2);
 }
 
-:is([data-color-mode='light'], [data-color-scheme='light']) .heroVideoGlow::after {
+[data-color-mode='light'] .heroVideoGlow::after {
   background: var(--base-color-scale-purple-2);
 }
 
-:is([data-color-mode='dark'], [data-color-scheme='dark']) .heroVideoGlow::before {
+[data-color-mode='dark'] .heroVideoGlow::before {
   background: var(--base-color-scale-blue-7);
 }
 
-:is([data-color-mode='dark'], [data-color-scheme='dark']) .heroVideoGlow::after {
+[data-color-mode='dark'] .heroVideoGlow::after {
   background: var(--base-color-scale-purple-7);
 }
diff --git a/packages/react/src/recipes/seo/Category/CategoryPage.module.css b/packages/react/src/recipes/seo/Category/CategoryPage.module.css
index 11f159f476..b25390e73a 100644
--- a/packages/react/src/recipes/seo/Category/CategoryPage.module.css
+++ b/packages/react/src/recipes/seo/Category/CategoryPage.module.css
@@ -33,8 +33,8 @@
   background-color: var(--base-color-scale-gray-1);
 }
 
-:is([data-color-mode='dark'], [data-color-scheme='dark']) .navListItemSelected,
-:is([data-color-mode='dark'], [data-color-scheme='dark']) .navListItem:hover {
+[data-color-mode='dark'] .navListItemSelected,
+[data-color-mode='dark'] .navListItem:hover {
   background-color: var(--base-color-scale-gray-6);
 }
 

From b68c93c5aa8bf7ef83f8dd606070c255250b4849 Mon Sep 17 00:00:00 2001
From: Daniel Guillan <danielguillan@github.com>
Date: Tue, 5 May 2026 14:47:32 +0200
Subject: [PATCH 14/18] Add ThemeProvider story for derived themes

---
 .../ThemeProvider/ThemeProvider.stories.tsx   | 73 +++++++++++++++++--
 1 file changed, 68 insertions(+), 5 deletions(-)

diff --git a/packages/react/src/ThemeProvider/ThemeProvider.stories.tsx b/packages/react/src/ThemeProvider/ThemeProvider.stories.tsx
index 573460e086..ada711fad6 100644
--- a/packages/react/src/ThemeProvider/ThemeProvider.stories.tsx
+++ b/packages/react/src/ThemeProvider/ThemeProvider.stories.tsx
@@ -1,10 +1,8 @@
 import React from 'react'
 import type {Meta, StoryObj} from '@storybook/react'
 import {SunIcon, MoonIcon} from '@primer/octicons-react'
-import {ThemeProvider} from '.'
-import {useTheme} from '..'
-import {Text} from '../Text'
-
+import {ThemeProvider, type ThemeProviderProps} from '.'
+import {Box, Text, Stack, useTheme} from '..'
 import styles from './ThemeProvider.stories.module.css'
 
 function ActiveColorMode() {
@@ -12,21 +10,45 @@ function ActiveColorMode() {
   return <Text>Active global color mode: {colorMode}</Text>
 }
 
+const providerBoxProps = {
+  backgroundColor: 'default',
+  borderColor: 'default',
+  borderRadius: 'xlarge',
+  borderStyle: 'solid',
+  borderWidth: 'thin',
+  padding: 24,
+} as const
+
 function Container({children}: {children: React.ReactNode}) {
   return <section className={styles['active-color-scheme']}>{children}</section>
 }
 
 function ControlsHint() {
   return (
-    <Text as="p" className={styles.hint}>
+    <Text as="p" variant="muted">
       Hint: Use Storybook Controls to alternate between color modes.
     </Text>
   )
 }
 
+const StorybookColorModes = [
+  'light',
+  'dark',
+  'dark_dimmed',
+  'light_high_contrast',
+  'dark_high_contrast',
+  'auto',
+] satisfies ThemeProviderProps['colorMode'][]
+
 const meta = {
   title: 'Components/ThemeProvider',
   component: ThemeProvider,
+  argTypes: {
+    colorMode: {
+      control: 'select',
+      options: StorybookColorModes,
+    },
+  },
 } satisfies Meta<typeof ThemeProvider>
 
 export default meta
@@ -73,3 +95,44 @@ export const Nested: Story = {
     </div>
   ),
 }
+
+export const DerivedColorModes: Story = {
+  args: {
+    colorMode: 'auto',
+  },
+  render: args => (
+    <Stack gap="normal">
+      <ThemeProvider colorMode={args.colorMode}>
+        <Box {...providerBoxProps}>
+          <Stack gap="normal">
+            <Text>{`Parent provider: ${args.colorMode}`}</Text>
+            <ThemeProvider colorMode="dark_dimmed">
+              <Box {...providerBoxProps}>
+                <Stack gap="normal">
+                  <Text font="hubot-sans">Nested provider: dark_dimmed</Text>
+                  <Stack direction={{narrow: 'vertical', regular: 'horizontal'}} gap="normal">
+                    <ThemeProvider colorMode="light_high_contrast" style={{flex: '1 1 0', display: 'flex'}}>
+                      <Box {...providerBoxProps} style={{minHeight: '12rem', width: '100%'}}>
+                        <Text font="hubot-sans">Sibling provider: light_high_contrast</Text>
+                      </Box>
+                    </ThemeProvider>
+                    <ThemeProvider colorMode="dark_high_contrast" style={{flex: '1 1 0', display: 'flex'}}>
+                      <Box {...providerBoxProps} style={{minHeight: '12rem', width: '100%'}}>
+                        <Text font="hubot-sans">Sibling provider: dark_high_contrast</Text>
+                      </Box>
+                    </ThemeProvider>
+                    <ThemeProvider colorMode="auto" style={{flex: '1 1 0', display: 'flex'}}>
+                      <Box {...providerBoxProps} style={{minHeight: '12rem', width: '100%'}}>
+                        <Text font="hubot-sans">Sibling provider: auto</Text>
+                      </Box>
+                    </ThemeProvider>
+                  </Stack>
+                </Stack>
+              </Box>
+            </ThemeProvider>
+          </Stack>
+        </Box>
+      </ThemeProvider>
+    </Stack>
+  ),
+}

From 8db6c44fb7240353cdaccf148f31b2c1fa178503 Mon Sep 17 00:00:00 2001
From: Daniel Guillan <danielguillan@github.com>
Date: Tue, 5 May 2026 16:44:08 +0200
Subject: [PATCH 15/18] Update snapshots

---
 .../ThemeProvider/ThemeProvider.visual.spec.ts  |  11 +++++++++++
 ...emeProvider-Derived-Color-Modes-1-darwin.png | Bin 0 -> 25213 bytes
 2 files changed, 11 insertions(+)
 create mode 100644 packages/react/src/ThemeProvider/ThemeProvider.visual.spec.ts-snapshots/Visual-Comparison-ThemeProvider-ThemeProvider-Derived-Color-Modes-1-darwin.png

diff --git a/packages/react/src/ThemeProvider/ThemeProvider.visual.spec.ts b/packages/react/src/ThemeProvider/ThemeProvider.visual.spec.ts
index 463eb867c3..25cd46e600 100644
--- a/packages/react/src/ThemeProvider/ThemeProvider.visual.spec.ts
+++ b/packages/react/src/ThemeProvider/ThemeProvider.visual.spec.ts
@@ -26,4 +26,15 @@ test.describe('Visual Comparison: ThemeProvider', () => {
     await page.waitForTimeout(500)
     await expect(page).toHaveScreenshot({fullPage: true})
   })
+
+  test('ThemeProvider / Derived Color Modes', async ({page}) => {
+    await page.goto(
+      'http://localhost:6006/iframe.html?args=&id=components-themeprovider--derived-color-modes&viewMode=story',
+      {waitUntil: 'networkidle'},
+    )
+    await page.locator('body.sb-show-main').waitFor({state: 'visible'})
+
+    await page.waitForTimeout(500)
+    await expect(page).toHaveScreenshot({fullPage: true})
+  })
 })
diff --git a/packages/react/src/ThemeProvider/ThemeProvider.visual.spec.ts-snapshots/Visual-Comparison-ThemeProvider-ThemeProvider-Derived-Color-Modes-1-darwin.png b/packages/react/src/ThemeProvider/ThemeProvider.visual.spec.ts-snapshots/Visual-Comparison-ThemeProvider-ThemeProvider-Derived-Color-Modes-1-darwin.png
new file mode 100644
index 0000000000000000000000000000000000000000..a0c285a1b0402439b0d0be56dccaad094f42be4c
GIT binary patch
literal 25213
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
A^Z)<=

literal 0
HcmV?d00001


From 632456d150e1fcfe3589f304d8902bdacbac181a Mon Sep 17 00:00:00 2001
From: Daniel Guillan <danielguillan@github.com>
Date: Tue, 5 May 2026 18:39:02 +0200
Subject: [PATCH 16/18] Update changeset

---
 .changeset/lazy-wolves-win.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.changeset/lazy-wolves-win.md b/.changeset/lazy-wolves-win.md
index dd0f987ce0..b5e008578c 100644
--- a/.changeset/lazy-wolves-win.md
+++ b/.changeset/lazy-wolves-win.md
@@ -3,4 +3,4 @@
 '@primer/brand-primitives': patch
 ---
 
-`ThemeProvider` now supports derivative color modes. You can pass modes like `"dark_dimmed"` or `"light_high_contrast"` and the right light or dark color tokens will apply. No new themes are added; derivative modes inherit from the existing `light` and `dark` token sets.
+`ThemeProvider` now supports derived color modes. You can pass modes like `"dark_dimmed"` or `"light_high_contrast"` and the right light or dark color tokens will apply. No new themes are added; derived modes inherit from the existing `light` and `dark` token sets.

From a13a336281cc33dc2fae5808b21ee0b5516643ef Mon Sep 17 00:00:00 2001
From: Daniel Guillan <danielguillan@github.com>
Date: Fri, 8 May 2026 18:03:49 +0200
Subject: [PATCH 17/18] Address Copilot feedback

---
 packages/design-tokens/src/formats/color-mode-attributes.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/design-tokens/src/formats/color-mode-attributes.js b/packages/design-tokens/src/formats/color-mode-attributes.js
index 550cd9d202..4ffe41256e 100644
--- a/packages/design-tokens/src/formats/color-mode-attributes.js
+++ b/packages/design-tokens/src/formats/color-mode-attributes.js
@@ -32,7 +32,7 @@ function colorModeAttributes({dictionary, file, options}) {
 
   const renderLightMode = () =>
     `:root, 
-    [data-color-mode=${defaultMode}],
+    [data-color-mode="${defaultMode}]",
     [data-color-scheme="light"] { 
       ${allTokens
         .map(createPropertyFormatter({outputReferences, dictionary, format: 'css', formatter: {}, themeable: false}))

From 9a8794a5168f1befbc4da16ce7a0898f39dcbea7 Mon Sep 17 00:00:00 2001
From: Daniel Guillan <danielguillan@github.com>
Date: Mon, 11 May 2026 16:56:14 +0200
Subject: [PATCH 18/18] Fix

---
 packages/design-tokens/src/formats/color-mode-attributes.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/design-tokens/src/formats/color-mode-attributes.js b/packages/design-tokens/src/formats/color-mode-attributes.js
index 4ffe41256e..94c3b67ad7 100644
--- a/packages/design-tokens/src/formats/color-mode-attributes.js
+++ b/packages/design-tokens/src/formats/color-mode-attributes.js
@@ -32,7 +32,7 @@ function colorModeAttributes({dictionary, file, options}) {
 
   const renderLightMode = () =>
     `:root, 
-    [data-color-mode="${defaultMode}]",
+    [data-color-mode="${defaultMode}"],
     [data-color-scheme="light"] { 
       ${allTokens
         .map(createPropertyFormatter({outputReferences, dictionary, format: 'css', formatter: {}, themeable: false}))