Site Editor: Apply the user's admin color scheme

packages/admin-ui/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Internal
+
+-   Add private `getAdminThemeColors`, which returns the primary and background colors of the active WordPress admin color scheme (for seeding a `ThemeProvider`) ([#78397](https://github.com/WordPress/gutenberg/pull/78397)).
+
 ## 2.1.0 (2026-05-14)
 
 ### Bug Fixes

packages/admin-ui/README.md

@@ -62,6 +62,14 @@ _Parameters_
 -   _props_ `BreadcrumbsProps`:
 -   _props.items_ `BreadcrumbsProps[ 'items' ]`: The breadcrumb items to display.
 
+### getAdminThemeColors
+
+Reads the active WordPress admin color scheme from the `admin-color-*` body class and returns its primary and background colors. Intended to seed a `ThemeProvider` (`color` prop) so the design system matches the user's chosen admin color scheme.
+
+_Returns_
+
+-   `AdminThemeColors | undefined`: The primary and background colors for the active admin color scheme.
+
 ### NavigableRegion
 
 Undocumented declaration.

packages/admin-ui/src/admin-theme-colors/index.ts

@@ -0,0 +1,34 @@
+type AdminThemeColors = {
+	primary: string;
+	bg: string;
+};
+
+const ADMIN_THEME_COLORS = new Map< string, AdminThemeColors >( [
+	[ 'fresh', { primary: '#3858e9', bg: '#25292b' } ],
+	[ 'modern', { primary: '#3858e9', bg: '#222524' } ],
+	[ 'midnight', { primary: '#e14d43', bg: '#3d4042' } ],
+	[ 'coffee', { primary: '#46403c', bg: '#7c726c' } ],
+	[ 'ocean', { primary: '#627c83', bg: '#5f787f' } ],
+	[ 'blue', { primary: '#096484', bg: '#0e7da4' } ],
+	[ 'ectoplasm', { primary: '#523f6d', bg: '#8468ab' } ],
+	[ 'sunrise', { primary: '#dd823b', bg: '#cc4541' } ],
+	[ 'light', { primary: '#0085ba', bg: '#eaeeed' } ],
+] );
+
+/**
+ * Reads the active WordPress admin color scheme from the `admin-color-*` body
+ * class and returns its primary and background colors. Intended to seed a
+ * `ThemeProvider` (`color` prop) so the design system matches the user's chosen
+ * admin color scheme.
+ *
+ * @return The primary and background colors for the active admin color scheme.
+ */
+export function getAdminThemeColors(): AdminThemeColors | undefined {
+	const scheme =
+		document.body.className.match( /admin-color-([\w-]+)/ )?.[ 1 ] ??
+		'fresh';
+
+	return (
+		ADMIN_THEME_COLORS.get( scheme ) ?? ADMIN_THEME_COLORS.get( 'fresh' )
+	);
+}

packages/admin-ui/src/admin-theme-colors/test/index.test.ts

@@ -0,0 +1,15 @@
+/**
+ * Internal dependencies
+ */
+import { getAdminThemeColors } from '../index';
+
+describe( 'getAdminThemeColors', () => {
+	it( 'should return the colors for the admin theme from the body class', () => {
+		document.body.className = 'foo admin-color-coffee bar';
+
+		expect( getAdminThemeColors() ).toEqual( {
+			primary: '#46403c',
+			bg: '#7c726c',
+		} );
+	} );
+} );

packages/admin-ui/src/index.ts

@@ -1,3 +1,4 @@
 export { default as Breadcrumbs } from './breadcrumbs';
 export { default as NavigableRegion } from './navigable-region';
 export { default as Page } from './page';
+export { getAdminThemeColors } from './admin-theme-colors';

packages/boot/src/components/root/index.tsx

@@ -18,7 +18,8 @@ import {
 import { menu } from '@wordpress/icons';
 import { useState, useEffect } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { Page } from '@wordpress/admin-ui';
+import { Page, getAdminThemeColors } from '@wordpress/admin-ui';
+import { privateApis as themePrivateApis } from '@wordpress/theme';
 
 /**
  * Internal dependencies
@@ -30,9 +31,9 @@ import useRouteTitle from '../app/use-route-title';
 import { unlock } from '../../lock-unlock';
 import type { CanvasData } from '../../store/types';
 import './style.scss';
-import { UserThemeProvider } from '../user-theme-provider';
 
 const { useLocation, useMatches, Outlet } = unlock( routePrivateApis );
+const { ThemeProvider } = unlock( themePrivateApis );
 
 export default function Root() {
 	const matches = useMatches();
@@ -57,10 +58,12 @@ export default function Root() {
 		setIsMobileSidebarOpen( false );
 	}, [ location.pathname, isMobileViewport ] );
 
+	const themeColors = getAdminThemeColors();
+
 	return (
 		<SlotFillProvider>
-			<UserThemeProvider isRoot color={ { bg: '#f8f8f8' } }>
-				<UserThemeProvider color={ { bg: '#1d2327' } }>
+			<ThemeProvider isRoot color={ { ...themeColors, bg: '#f8f8f8' } }>
+				<ThemeProvider color={ themeColors }>
 					<div
 						className={ clsx( 'boot-layout', {
 							'has-canvas': !! canvas || canvas === null,
@@ -139,7 +142,9 @@ export default function Root() {
 							</div>
 						) }
 						<div className="boot-layout__surfaces">
-							<UserThemeProvider color={ { bg: '#ffffff' } }>
+							<ThemeProvider
+								color={ { ...themeColors, bg: '#ffffff' } }
+							>
 								<Outlet />
 								{ /* Render Canvas in Root to prevent remounting on route changes */ }
 								{ ( canvas || canvas === null ) && (
@@ -178,11 +183,11 @@ export default function Root() {
 										/>
 									</div>
 								) }
-							</UserThemeProvider>
+							</ThemeProvider>
 						</div>
 					</div>
-				</UserThemeProvider>
-			</UserThemeProvider>
+				</ThemeProvider>
+			</ThemeProvider>
 		</SlotFillProvider>
 	);
 }

packages/boot/src/components/root/single-page.tsx

@@ -9,6 +9,8 @@ import clsx from 'clsx';
 import { privateApis as routePrivateApis } from '@wordpress/route';
 import { SnackbarNotices } from '@wordpress/notices';
 import { SlotFillProvider } from '@wordpress/components';
+import { getAdminThemeColors } from '@wordpress/admin-ui';
+import { privateApis as themePrivateApis } from '@wordpress/theme';
 
 /**
  * Internal dependencies
@@ -19,9 +21,9 @@ import { unlock } from '../../lock-unlock';
 import type { CanvasData } from '../../store/types';
 import './style.scss';
 import useRouteTitle from '../app/use-route-title';
-import { UserThemeProvider } from '../user-theme-provider';
 
 const { useMatches, Outlet } = unlock( routePrivateApis );
+const { ThemeProvider } = unlock( themePrivateApis );
 
 /**
  * Root component for single page mode (no sidebar).
@@ -40,10 +42,12 @@ export default function RootSinglePage() {
 
 	useRouteTitle();
 
+	const themeColors = getAdminThemeColors();
+
 	return (
 		<SlotFillProvider>
-			<UserThemeProvider isRoot color={ { bg: '#f8f8f8' } }>
-				<UserThemeProvider color={ { bg: '#1d2327' } }>
+			<ThemeProvider isRoot color={ { ...themeColors, bg: '#f8f8f8' } }>
+				<ThemeProvider color={ themeColors }>
 					<div
 						className={ clsx(
 							'boot-layout boot-layout--single-page',
@@ -56,7 +60,9 @@ export default function RootSinglePage() {
 						<SavePanel />
 						<SnackbarNotices className="boot-notices__snackbar" />
 						<div className="boot-layout__surfaces">
-							<UserThemeProvider color={ { bg: '#ffffff' } }>
+							<ThemeProvider
+								color={ { ...themeColors, bg: '#ffffff' } }
+							>
 								<Outlet />
 								{ /* Render Canvas in Root to prevent remounting on route changes */ }
 								{ ( canvas || canvas === null ) && (
@@ -69,11 +75,11 @@ export default function RootSinglePage() {
 										/>
 									</div>
 								) }
-							</UserThemeProvider>
+							</ThemeProvider>
 						</div>
 					</div>
-				</UserThemeProvider>
-			</UserThemeProvider>
+				</ThemeProvider>
+			</ThemeProvider>
 		</SlotFillProvider>
 	);
 }

packages/edit-site/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Enhancements
+
+-   The Site Editor now follows the user's admin color scheme ([#78397](https://github.com/WordPress/gutenberg/pull/78397)).
+
 ## 6.46.0 (2026-05-14)
 
 ## 6.45.0 (2026-04-29)

packages/edit-site/package.json

@@ -87,6 +87,7 @@
 		"@wordpress/reusable-blocks": "file:../reusable-blocks",
 		"@wordpress/router": "file:../router",
 		"@wordpress/style-engine": "file:../style-engine",
+		"@wordpress/theme": "file:../theme",
 		"@wordpress/ui": "file:../ui",
 		"@wordpress/url": "file:../url",
 		"@wordpress/viewport": "file:../viewport",