diff --git a/packages/components/src/palette-edit/index.tsx b/packages/components/src/palette-edit/index.tsx
index 0732f8015db562..3999b6bb9f7b24 100644
--- a/packages/components/src/palette-edit/index.tsx
+++ b/packages/components/src/palette-edit/index.tsx
@@ -40,6 +40,7 @@ import {
 	DoneButton,
 	RemoveButton,
 	PaletteEditContents,
+	PaletteVariation,
 } from './styles';
 import { NavigableMenu } from '../navigable-container';
 import { DEFAULT_GRADIENT } from '../custom-gradient-picker/constants';
@@ -52,6 +53,8 @@ import type {
 	OptionProps,
 	PaletteEditListViewProps,
 	PaletteEditProps,
+	PaletteEditColorVariation,
+	PaletteEditGradientVariation,
 	PaletteElement,
 } from './types';
 
@@ -353,6 +356,10 @@ function PaletteEditListView< T extends PaletteElement >( {
 }
 
 const EMPTY_ARRAY: Color[] = [];
+const EMPTY_VARIATIONS: (
+	| PaletteEditColorVariation
+	| PaletteEditGradientVariation
+)[] = [];
 
 /**
  * Allows editing a palette of colors or gradients.
@@ -379,6 +386,8 @@ export function PaletteEdit( {
 	colors = EMPTY_ARRAY,
 	onChange,
 	paletteLabel,
+	paletteIcon,
+	paletteVariations = EMPTY_VARIATIONS,
 	paletteLabelHeadingLevel = 2,
 	emptyMessage,
 	canOnlyChangeValues,
@@ -388,6 +397,10 @@ export function PaletteEdit( {
 }: PaletteEditProps ) {
 	const isGradient = !! gradients;
 	const elements = isGradient ? gradients : colors;
+	const variations = paletteVariations.map( ( variation ) => ( {
+		...variation,
+		elements: isGradient ? variation.gradients : variation.colors,
+	} ) );
 	const [ isEditing, setIsEditing ] = useState( false );
 	const [ editingElement, setEditingElement ] = useState<
 		number | null | undefined
@@ -399,6 +412,12 @@ export function PaletteEdit( {
 		! elements[ editingElement ].slug;
 	const elementsLength = elements.length;
 	const hasElements = elementsLength > 0;
+	const hasVariations = variations.some(
+		( variation ) => variation.elements.length > 0
+	);
+	const hasAnyElements = hasElements || hasVariations;
+	const canResetAny =
+		canReset || variations.some( ( variation ) => variation.canReset );
 	const debounceOnChange = useDebounce( onChange, 100 );
 	const onSelectPaletteItem = useCallback(
 		(
@@ -426,10 +445,11 @@ export function PaletteEdit( {
 		<PaletteEditStyles>
 			<HStack>
 				<PaletteHeading level={ paletteLabelHeadingLevel }>
+					{ paletteIcon }
 					{ paletteLabel }
 				</PaletteHeading>
 				<PaletteActionsContainer>
-					{ hasElements && isEditing && (
+					{ hasAnyElements && isEditing && (
 						<DoneButton
 							size="small"
 							onClick={ () => {
@@ -483,10 +503,10 @@ export function PaletteEdit( {
 						/>
 					) }
 
-					{ hasElements &&
+					{ hasAnyElements &&
 						( ! isEditing ||
 							! canOnlyChangeValues ||
-							canReset ) && (
+							canResetAny ) && (
 							<DropdownMenu
 								icon={ moreVertical }
 								label={
@@ -537,7 +557,7 @@ export function PaletteEdit( {
 														  ) }
 												</Button>
 											) }
-											{ canReset && (
+											{ canResetAny && (
 												<Button
 													__next40pxDefaultSize
 													className="components-palette-edit__menu-button"
@@ -546,7 +566,18 @@ export function PaletteEdit( {
 														setEditingElement(
 															null
 														);
-														onChange();
+														if ( canReset ) {
+															onChange();
+														}
+														variations.forEach(
+															( variation ) => {
+																if (
+																	variation.canReset
+																) {
+																	variation.onChange();
+																}
+															}
+														);
 														onClose();
 													} }
 												>
@@ -622,6 +653,53 @@ export function PaletteEdit( {
 						) ) }
 				</PaletteEditContents>
 			) }
+			{ variations.map(
+				( variation ) =>
+					variation.elements.length > 0 && (
+						<PaletteVariation key={ variation.paletteLabel }>
+							<PaletteHeading level={ paletteLabelHeadingLevel }>
+								{ variation.paletteIcon }
+								{ variation.paletteLabel }
+							</PaletteHeading>
+							<PaletteEditContents>
+								{ isEditing && (
+									<PaletteEditListView<
+										( typeof variation.elements )[ number ]
+									>
+										canOnlyChangeValues={
+											canOnlyChangeValues
+										}
+										elements={ variation.elements }
+										// @ts-expect-error The variation type matches the parent palette type.
+										onChange={ variation.onChange }
+										slugPrefix={ slugPrefix }
+										isGradient={ isGradient }
+										popoverProps={ popoverProps }
+										addColorRef={ addColorRef }
+									/>
+								) }
+								{ ! isEditing && isGradient && (
+									<GradientPicker
+										gradients={
+											variation.elements as Gradient[]
+										}
+										onChange={ () => {} }
+										clearable={ false }
+										disableCustomGradients
+									/>
+								) }
+								{ ! isEditing && ! isGradient && (
+									<ColorPalette
+										colors={ variation.elements as Color[] }
+										onChange={ () => {} }
+										clearable={ false }
+										disableCustomColors
+									/>
+								) }
+							</PaletteEditContents>
+						</PaletteVariation>
+					)
+			) }
 			{ ! hasElements && emptyMessage && (
 				<PaletteEditContents>{ emptyMessage }</PaletteEditContents>
 			) }
diff --git a/packages/components/src/palette-edit/styles.ts b/packages/components/src/palette-edit/styles.ts
index 329f30f5d0bcec..1293becdf0e68c 100644
--- a/packages/components/src/palette-edit/styles.ts
+++ b/packages/components/src/palette-edit/styles.ts
@@ -50,9 +50,15 @@ export const NameContainer = styled.div`
 `;
 
 export const PaletteHeading = styled( Heading )`
+	align-items: center;
+	display: flex;
+	gap: ${ space( 1 ) };
 	text-transform: uppercase;
 	line-height: ${ space( 6 ) };
 	font-weight: ${ CONFIG.fontWeightEmphasis };
+	svg {
+		flex-shrink: 0;
+	}
 	&&& {
 		font-size: 11px;
 		margin-bottom: 0;
@@ -68,6 +74,10 @@ export const PaletteEditContents = styled( View )`
 	margin-top: ${ space( 2 ) };
 `;
 
+export const PaletteVariation = styled( View )`
+	margin-top: ${ space( 4 ) };
+`;
+
 export const PaletteEditStyles = styled( View )`
 	&&& {
 		.components-button.has-icon {
diff --git a/packages/components/src/palette-edit/test/index.tsx b/packages/components/src/palette-edit/test/index.tsx
index 7f3a0335eb6814..cba874338f3e76 100644
--- a/packages/components/src/palette-edit/test/index.tsx
+++ b/packages/components/src/palette-edit/test/index.tsx
@@ -183,6 +183,112 @@ describe( 'PaletteEdit', () => {
 		expect( paletteLabel ).toBeVisible();
 	} );
 
+	it( 'shows an icon before the heading label', () => {
+		render(
+			<PaletteEdit
+				{ ...defaultProps }
+				colors={ colors }
+				paletteIcon={ <span data-testid="palette-icon" /> }
+			/>
+		);
+
+		expect(
+			screen.getByRole( 'heading', {
+				level: 2,
+				name: 'Test label',
+			} )
+		).toBeVisible();
+		expect( screen.getByTestId( 'palette-icon' ) ).toBeVisible();
+	} );
+
+	it( 'edits related palette variations from the same options menu', async () => {
+		const variationColors = [
+			{ color: '#ffffff', name: 'Primary', slug: 'primary' },
+		];
+
+		render(
+			<PaletteEdit
+				{ ...defaultProps }
+				colors={ colors }
+				canOnlyChangeValues
+				paletteVariations={ [
+					{
+						colors: variationColors,
+						onChange: noop,
+						paletteLabel: 'Dark palette',
+					},
+				] }
+			/>
+		);
+
+		expect(
+			screen.getAllByRole( 'button', { name: 'Color options' } )
+		).toHaveLength( 1 );
+
+		await click(
+			screen.getByRole( 'button', {
+				name: 'Color options',
+			} )
+		);
+		await click(
+			screen.getByRole( 'button', {
+				name: 'Show details',
+			} )
+		);
+
+		expect(
+			screen.getByRole( 'heading', {
+				level: 2,
+				name: 'Dark palette',
+			} )
+		).toBeVisible();
+		expect(
+			screen.getAllByRole( 'button', { name: 'Edit: Primary' } )
+		).toHaveLength( 2 );
+	} );
+
+	it( 'resets the base palette and its variations together', async () => {
+		const onChange = jest.fn();
+		const onVariationChange = jest.fn();
+
+		render(
+			<PaletteEdit
+				{ ...defaultProps }
+				colors={ colors }
+				onChange={ onChange }
+				canReset
+				paletteVariations={ [
+					{
+						canReset: true,
+						colors: [
+							{
+								color: '#ffffff',
+								name: 'Primary',
+								slug: 'primary',
+							},
+						],
+						onChange: onVariationChange,
+						paletteLabel: 'Dark palette',
+					},
+				] }
+			/>
+		);
+
+		await click(
+			screen.getByRole( 'button', {
+				name: 'Color options',
+			} )
+		);
+		await click(
+			screen.getByRole( 'button', {
+				name: 'Reset colors',
+			} )
+		);
+
+		expect( onChange ).toHaveBeenCalledWith();
+		expect( onVariationChange ).toHaveBeenCalledWith();
+	} );
+
 	it( 'shows heading label with custom heading level', () => {
 		render(
 			<PaletteEdit
diff --git a/packages/components/src/palette-edit/types.ts b/packages/components/src/palette-edit/types.ts
index fbe9f363a5b24e..7931a94b97f7ec 100644
--- a/packages/components/src/palette-edit/types.ts
+++ b/packages/components/src/palette-edit/types.ts
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { Key, MouseEventHandler } from 'react';
+import type { Key, MouseEventHandler, ReactNode } from 'react';
 
 /**
  * Internal dependencies
@@ -47,6 +47,10 @@ export type BasePaletteEdit = {
 	 * A heading label for the palette.
 	 */
 	paletteLabel: string;
+	/**
+	 * An optional icon displayed before the palette label.
+	 */
+	paletteIcon?: ReactNode;
 	/**
 	 * The label's heading level.
 	 *
@@ -68,6 +72,54 @@ export type BasePaletteEdit = {
 	>;
 };
 
+export type PaletteEditColorVariation = {
+	/**
+	 * Whether this variation can be reset.
+	 */
+	canReset?: boolean;
+	/**
+	 * The colors in this variation.
+	 */
+	colors: Color[];
+	gradients?: never;
+	/**
+	 * Runs on changing the variation.
+	 */
+	onChange: ( values?: Color[] ) => void;
+	/**
+	 * An optional icon displayed before the variation label.
+	 */
+	paletteIcon?: ReactNode;
+	/**
+	 * A heading label for the variation.
+	 */
+	paletteLabel: string;
+};
+
+export type PaletteEditGradientVariation = {
+	/**
+	 * Whether this variation can be reset.
+	 */
+	canReset?: boolean;
+	colors?: never;
+	/**
+	 * The gradients in this variation.
+	 */
+	gradients: Gradient[];
+	/**
+	 * Runs on changing the variation.
+	 */
+	onChange: ( values?: Gradient[] ) => void;
+	/**
+	 * An optional icon displayed before the variation label.
+	 */
+	paletteIcon?: ReactNode;
+	/**
+	 * A heading label for the variation.
+	 */
+	paletteLabel: string;
+};
+
 type PaletteEditColors = {
 	/**
 	 * The colors in the palette.
@@ -78,6 +130,10 @@ type PaletteEditColors = {
 	 */
 	onChange: ( values?: Color[] ) => void;
 	gradients?: never;
+	/**
+	 * Related color variations edited from the same palette controls.
+	 */
+	paletteVariations?: PaletteEditColorVariation[];
 };
 
 type PaletteEditGradients = {
@@ -90,6 +146,10 @@ type PaletteEditGradients = {
 	 */
 	onChange: ( values?: Gradient[] ) => void;
 	colors?: never;
+	/**
+	 * Related gradient variations edited from the same palette controls.
+	 */
+	paletteVariations?: PaletteEditGradientVariation[];
 };
 
 export type PaletteEditProps = BasePaletteEdit &
diff --git a/packages/global-styles-engine/src/core/render.tsx b/packages/global-styles-engine/src/core/render.tsx
index 4c232f5382e143..6e1006f1c366d5 100644
--- a/packages/global-styles-engine/src/core/render.tsx
+++ b/packages/global-styles-engine/src/core/render.tsx
@@ -64,6 +64,8 @@ interface PresetsByOrigin {
 	[ origin: string ]: any[];
 }
 
+type ColorScheme = 'light' | 'dark';
+
 /**
  * CSS class configuration
  */
@@ -301,17 +303,36 @@ function getPresetsSvgFilters(
 			metadata.path,
 			{}
 		) as PresetsByOrigin;
-		return [ 'default', 'theme' ]
+		const basePresets = [ 'default', 'theme' ]
 			.filter( ( origin ) => presetByOrigin[ origin ] )
-			.flatMap( ( origin ) =>
-				presetByOrigin[ origin ].map( ( preset: any ) =>
-					getDuotoneFilter(
-						`wp-duotone-${ preset.slug }`,
-						preset.colors
+			.flatMap( ( origin ) => presetByOrigin[ origin ] );
+		const baseSlugs = new Set(
+			basePresets.map( ( preset: any ) => preset.slug )
+		);
+		const baseFilters = basePresets
+			.map( ( preset: any ) =>
+				getDuotoneFilter( `wp-duotone-${ preset.slug }`, preset.colors )
+			)
+			.join( '' );
+		const schemeFilters = ( [ 'light', 'dark' ] as ColorScheme[] )
+			.flatMap( ( scheme ) =>
+				getMergedPresetCollection(
+					getValueFromObjectPath(
+						blockPresets,
+						[ 'color', scheme, 'duotone' ],
+						[]
 					)
 				)
+					.filter( ( preset: any ) => baseSlugs.has( preset.slug ) )
+					.map( ( preset: any ) =>
+						getDuotoneFilter(
+							`wp-duotone-${ preset.slug }--${ scheme }`,
+							preset.colors
+						)
+					)
 			)
 			.join( '' );
+		return baseFilters + schemeFilters;
 	} );
 }
 
@@ -1367,6 +1388,16 @@ export const getNodesWithSettings = (
 				presets = setImmutably( presets, path, value );
 			}
 		} );
+		( [ 'light', 'dark' ] as ColorScheme[] ).forEach( ( scheme ) => {
+			const value = getValueFromObjectPath(
+				treeToPickFrom,
+				[ 'color', scheme ],
+				false
+			);
+			if ( value !== false ) {
+				presets = setImmutably( presets, [ 'color', scheme ], value );
+			}
+		} );
 		return presets;
 	};
 
@@ -1485,6 +1516,76 @@ function getPresetVarDeclarations(
 	return declarations;
 }
 
+function getMergedPresetCollection( collection: any ): any[] {
+	if ( Array.isArray( collection ) ) {
+		return collection;
+	}
+	if ( ! collection || typeof collection !== 'object' ) {
+		return [];
+	}
+
+	const presetsBySlug = new Map< string, any >();
+	for ( const origin of [ 'default', 'theme', 'custom' ] ) {
+		for ( const preset of collection[ origin ] ?? [] ) {
+			presetsBySlug.set( preset.slug, preset );
+		}
+	}
+	return Array.from( presetsBySlug.values() );
+}
+
+function getSchemePresetVarDeclarations(
+	presets: Record< string, any >,
+	scheme: ColorScheme,
+	{ path, valueKey, valueFunc, cssVarInfix }: PresetMetadata,
+	mergedSettings: GlobalStylesConfig[ 'settings' ]
+): string[] {
+	if ( path[ 0 ] !== 'color' ) {
+		return [];
+	}
+
+	const presetType = path.at( -1 );
+	if ( ! presetType ) {
+		return [];
+	}
+
+	const basePresets = getMergedPresetCollection(
+		getValueFromObjectPath( presets, path, [] )
+	);
+	const baseSlugs = new Set(
+		basePresets.map( ( preset: any ) => preset.slug )
+	);
+	const schemePresets = getMergedPresetCollection(
+		getValueFromObjectPath( presets, [ 'color', scheme, presetType ], [] )
+	);
+
+	return schemePresets
+		.filter( ( preset: any ) => baseSlugs.has( preset.slug ) )
+		.map( ( preset: any ) => {
+			const slug = kebabCase( preset.slug );
+			let value: string | number | null | undefined;
+			if ( presetType === 'duotone' ) {
+				value = `url( '#wp-duotone-${ slug }--${ scheme }' )`;
+			} else if ( valueKey && ! valueFunc ) {
+				value = preset[ valueKey ];
+			} else if ( valueFunc ) {
+				value = valueFunc( preset, mergedSettings );
+			}
+			return `--wp--preset--${ cssVarInfix }--${ slug }: ${ value }`;
+		} );
+}
+
+function getSchemeScopedSelector(
+	selector: string,
+	condition: string
+): string {
+	if ( selector.startsWith( ROOT_CSS_PROPERTIES_SELECTOR ) ) {
+		return `${ ROOT_CSS_PROPERTIES_SELECTOR }${ condition }${ selector.slice(
+			ROOT_CSS_PROPERTIES_SELECTOR.length
+		) }`;
+	}
+	return `html${ condition } ${ selector }`;
+}
+
 export const generateCustomProperties = (
 	tree: GlobalStylesConfig,
 	blockSelectors: BlockSelectors
@@ -1540,6 +1641,47 @@ export const generateCustomProperties = (
 				ruleset += `${ ruleSelector }{${ declarations.join( ';' ) };}`;
 			}
 		}
+
+		for ( const scheme of [ 'light', 'dark' ] as ColorScheme[] ) {
+			const opposite = scheme === 'dark' ? 'light' : 'dark';
+			const schemeVarsBySelector: Record< string, string[] > = {};
+
+			for ( const metadata of PRESET_METADATA ) {
+				const declarations = getSchemePresetVarDeclarations(
+					presets,
+					scheme,
+					metadata,
+					tree.settings
+				);
+				if ( declarations.length === 0 ) {
+					continue;
+				}
+
+				const target = resolveFeatureSelector(
+					featureSelectors,
+					metadata.path[ 0 ],
+					defaultSelector
+				);
+				schemeVarsBySelector[ target ] ??= [];
+				schemeVarsBySelector[ target ].push( ...declarations );
+			}
+
+			for ( const [ ruleSelector, declarations ] of Object.entries(
+				schemeVarsBySelector
+			) ) {
+				const declarationList = `${ declarations.join( ';' ) };`;
+				const automaticSelector = getSchemeScopedSelector(
+					ruleSelector,
+					`:not([data-scheme="${ opposite }"])`
+				);
+				const forcedSelector = getSchemeScopedSelector(
+					ruleSelector,
+					`[data-scheme="${ scheme }"]`
+				);
+				ruleset += `@media (prefers-color-scheme: ${ scheme }){${ automaticSelector }{${ declarationList }}}`;
+				ruleset += `${ forcedSelector }{${ declarationList }}`;
+			}
+		}
 	}
 
 	return ruleset;
diff --git a/packages/global-styles-engine/src/settings/get-setting.ts b/packages/global-styles-engine/src/settings/get-setting.ts
index c9f287c9592c67..5e8880dfed0a5f 100644
--- a/packages/global-styles-engine/src/settings/get-setting.ts
+++ b/packages/global-styles-engine/src/settings/get-setting.ts
@@ -25,6 +25,7 @@ const VALID_SETTINGS = [
 	'color.custom',
 	'color.customDuotone',
 	'color.customGradient',
+	'color.dark',
 	'color.defaultDuotone',
 	'color.defaultGradients',
 	'color.defaultPalette',
@@ -32,6 +33,7 @@ const VALID_SETTINGS = [
 	'color.gradients',
 	'color.heading',
 	'color.link',
+	'color.light',
 	'color.palette',
 	'color.text',
 	'custom',
diff --git a/packages/global-styles-engine/src/test/render.test.ts b/packages/global-styles-engine/src/test/render.test.ts
index 97ae2dde69dac4..c9b21af9d3ac5c 100644
--- a/packages/global-styles-engine/src/test/render.test.ts
+++ b/packages/global-styles-engine/src/test/render.test.ts
@@ -393,6 +393,53 @@ describe( 'global styles renderer', () => {
 				':root{--wp--preset--color--white: white;--wp--preset--color--black: black;--wp--preset--color--white-2-black: value;--wp--custom--white-2-black: value;--wp--custom--font-primary: value;--wp--custom--line-height--body: 1.7;--wp--custom--line-height--heading: 1.3;}h1,h2,h3,h4,h5,h6{--wp--preset--font-size--small: 12px;--wp--preset--font-size--medium: 23px;}'
 			);
 		} );
+
+		it( 'should output live color scheme preset variables', () => {
+			const tree: GlobalStylesConfig = {
+				settings: {
+					color: {
+						palette: {
+							theme: [
+								{
+									name: 'Base',
+									slug: 'base',
+									color: '#ffffff',
+								},
+							],
+						},
+						dark: {
+							palette: [
+								{
+									name: 'Base',
+									slug: 'base',
+									color: '#111111',
+								},
+								{
+									name: 'Scheme only',
+									slug: 'scheme-only',
+									color: '#222222',
+								},
+							],
+						},
+					},
+				},
+			};
+
+			const ruleset = generateCustomProperties( tree, {} );
+
+			expect( ruleset ).toContain(
+				':root{--wp--preset--color--base: #ffffff;}'
+			);
+			expect( ruleset ).toContain(
+				'@media (prefers-color-scheme: dark){:root:not([data-scheme="light"]){--wp--preset--color--base: #111111;}}'
+			);
+			expect( ruleset ).toContain(
+				':root[data-scheme="dark"]{--wp--preset--color--base: #111111;}'
+			);
+			expect( ruleset ).not.toContain(
+				'--wp--preset--color--scheme-only'
+			);
+		} );
 	} );
 
 	describe( 'transformToStyles', () => {
@@ -1616,6 +1663,15 @@ describe( 'global styles renderer', () => {
 								},
 							],
 						},
+						dark: {
+							duotone: [
+								{
+									slug: 'midnight',
+									name: 'Midnight',
+									colors: [ '#111111', '#eeeeee' ],
+								},
+							],
+						},
 					},
 				},
 				styles: {},
@@ -1642,6 +1698,9 @@ describe( 'global styles renderer', () => {
 			expect( svgStyle.assets.join( '' ) ).toContain(
 				'wp-duotone-midnight'
 			);
+			expect( svgStyle.assets.join( '' ) ).toContain(
+				'wp-duotone-midnight--dark'
+			);
 		} );
 	} );
 
diff --git a/packages/global-styles-engine/src/types.ts b/packages/global-styles-engine/src/types.ts
index 9112042a63b19b..f82baf5408d831 100644
--- a/packages/global-styles-engine/src/types.ts
+++ b/packages/global-styles-engine/src/types.ts
@@ -51,6 +51,16 @@ export interface Duotone extends BasePreset {
 	colors: string[];
 }
 
+export type ColorSchemePreset< T extends BasePreset > = Omit< T, 'name' > & {
+	name?: string;
+};
+
+export interface ColorSchemeSettings {
+	palette?: ColorSchemePreset< Color >[];
+	gradients?: ColorSchemePreset< Gradient >[];
+	duotone?: ColorSchemePreset< Duotone >[];
+}
+
 /**
  * Palette collection for a specific origin (theme, custom, default)
  */
@@ -225,6 +235,8 @@ export interface GlobalStylesSettings {
 		defaultPalette?: boolean;
 		defaultGradients?: boolean;
 		defaultDuotone?: boolean;
+		light?: ColorSchemeSettings;
+		dark?: ColorSchemeSettings;
 	};
 	custom?: Record<
 		string,
diff --git a/packages/global-styles-ui/src/color-palette-panel.tsx b/packages/global-styles-ui/src/color-palette-panel.tsx
index f72c29da219d86..2d85734bf2b564 100644
--- a/packages/global-styles-ui/src/color-palette-panel.tsx
+++ b/packages/global-styles-ui/src/color-palette-panel.tsx
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import type { Color } from '@wordpress/global-styles-engine';
+import type { Color, ColorSchemePreset } from '@wordpress/global-styles-engine';
 import { useViewportMatch } from '@wordpress/compose';
 import {
 	__experimentalPaletteEdit as PaletteEdit,
@@ -16,6 +16,12 @@ import { shuffle } from '@wordpress/icons';
  */
 import { useSetting, useColorRandomizer } from './hooks';
 import ColorVariations from './variations/variations-color';
+import {
+	addBasePresetNames,
+	flattenSchemePresets,
+	SchemePaletteIcon,
+	type SchemePresetCollection,
+} from './color-scheme-palette';
 
 const mobilePopoverProps = { placement: 'bottom-start' as const, offset: 8 };
 
@@ -46,6 +52,29 @@ export default function ColorPalettePanel( { name }: ColorPalettePanelProps ) {
 		'color.palette.custom',
 		name
 	);
+	const [ lightColors, setLightColors ] = useSetting<
+		SchemePresetCollection< ColorSchemePreset< Color > >
+	>( 'color.light.palette', name );
+	const [ userLightColors ] = useSetting<
+		SchemePresetCollection< ColorSchemePreset< Color > >
+	>( 'color.light.palette', name, 'user' );
+	const [ darkColors, setDarkColors ] = useSetting<
+		SchemePresetCollection< ColorSchemePreset< Color > >
+	>( 'color.dark.palette', name );
+	const [ userDarkColors ] = useSetting<
+		SchemePresetCollection< ColorSchemePreset< Color > >
+	>( 'color.dark.palette', name, 'user' );
+
+	const namedLightColors = addBasePresetNames(
+		flattenSchemePresets( lightColors ),
+		themeColors
+	);
+	const namedDarkColors = addBasePresetNames(
+		flattenSchemePresets( darkColors ),
+		themeColors
+	);
+	const hasLightColors = namedLightColors.length > 0;
+	const hasDarkColors = namedDarkColors.length > 0;
 
 	const [ defaultPaletteEnabled ] = useSetting< boolean >(
 		'color.defaultPalette',
@@ -68,6 +97,36 @@ export default function ColorPalettePanel( { name }: ColorPalettePanelProps ) {
 						onChange={ setThemeColors }
 						paletteLabel={ __( 'Theme' ) }
 						paletteLabelHeadingLevel={ 3 }
+						paletteVariations={ [
+							...( hasLightColors
+								? [
+										{
+											canReset:
+												userLightColors !== undefined,
+											colors: namedLightColors,
+											onChange: setLightColors,
+											paletteIcon: (
+												<SchemePaletteIcon scheme="light" />
+											),
+											paletteLabel: __( 'Light palette' ),
+										},
+								  ]
+								: [] ),
+							...( hasDarkColors
+								? [
+										{
+											canReset:
+												userDarkColors !== undefined,
+											colors: namedDarkColors,
+											onChange: setDarkColors,
+											paletteIcon: (
+												<SchemePaletteIcon scheme="dark" />
+											),
+											paletteLabel: __( 'Dark palette' ),
+										},
+								  ]
+								: [] ),
+						] }
 						popoverProps={ popoverProps }
 					/>
 				) }
diff --git a/packages/global-styles-ui/src/color-scheme-palette.tsx b/packages/global-styles-ui/src/color-scheme-palette.tsx
new file mode 100644
index 00000000000000..bd3054c9c22e47
--- /dev/null
+++ b/packages/global-styles-ui/src/color-scheme-palette.tsx
@@ -0,0 +1,53 @@
+/**
+ * WordPress dependencies
+ */
+import { Icon, moon, sun } from '@wordpress/icons';
+
+export type ColorScheme = 'light' | 'dark';
+
+type PresetWithOptionalName = {
+	name?: string;
+	slug: string;
+};
+
+export type SchemePresetCollection< T > =
+	| T[]
+	| {
+			theme?: T[];
+			custom?: T[];
+			default?: T[];
+	  };
+
+export function SchemePaletteIcon( { scheme }: { scheme: ColorScheme } ) {
+	return <Icon icon={ scheme === 'light' ? sun : moon } size={ 20 } />;
+}
+
+export function flattenSchemePresets< T >(
+	presets?: SchemePresetCollection< T >
+): T[] {
+	if ( ! presets ) {
+		return [];
+	}
+	if ( Array.isArray( presets ) ) {
+		return presets;
+	}
+	return [
+		...( presets.theme ?? [] ),
+		...( presets.custom ?? [] ),
+		...( presets.default ?? [] ),
+	];
+}
+
+export function addBasePresetNames<
+	T extends PresetWithOptionalName,
+	U extends { name: string; slug: string },
+>( presets: T[], basePresets?: U[] ): ( T & { name: string } )[] {
+	const baseNames = new Map(
+		basePresets?.map( ( { name, slug } ) => [ slug, name ] )
+	);
+
+	return presets.map( ( preset ) => ( {
+		...preset,
+		name: preset.name ?? baseNames.get( preset.slug ) ?? preset.slug,
+	} ) );
+}
diff --git a/packages/global-styles-ui/src/duotone-palette-panel.tsx b/packages/global-styles-ui/src/duotone-palette-panel.tsx
new file mode 100644
index 00000000000000..3f289f09f061e5
--- /dev/null
+++ b/packages/global-styles-ui/src/duotone-palette-panel.tsx
@@ -0,0 +1,135 @@
+/**
+ * WordPress dependencies
+ */
+import type {
+	ColorSchemePreset,
+	Duotone,
+} from '@wordpress/global-styles-engine';
+import { DuotonePicker } from '@wordpress/components';
+import { __, sprintf } from '@wordpress/i18n';
+import { Stack } from '@wordpress/ui';
+
+/**
+ * Internal dependencies
+ */
+import { useSetting } from './hooks';
+import { Subtitle } from './subtitle';
+import {
+	addBasePresetNames,
+	flattenSchemePresets,
+	SchemePaletteIcon,
+	type ColorScheme,
+	type SchemePresetCollection,
+} from './color-scheme-palette';
+
+interface DuotonePalettePanelProps {
+	name?: string;
+}
+
+interface DuotonePaletteProps {
+	duotones: Duotone[];
+	label: string;
+	scheme?: ColorScheme;
+}
+
+function DuotonePalette( { duotones, label, scheme }: DuotonePaletteProps ) {
+	return (
+		<Stack direction="column" gap="sm">
+			<Subtitle level={ 3 }>
+				{ scheme && <SchemePaletteIcon scheme={ scheme } /> }
+				{ label }
+			</Subtitle>
+			<DuotonePicker
+				aria-label={
+					scheme
+						? sprintf(
+								// translators: %s: palette label, e.g. "Dark duotone".
+								__( '%s palette' ),
+								label
+						  )
+						: __( 'Theme duotone palette' )
+				}
+				duotonePalette={ duotones }
+				disableCustomDuotone
+				disableCustomColors
+				clearable={ false }
+				unsetable={ false }
+				onChange={ () => {} }
+				colorPalette={ [] }
+			/>
+		</Stack>
+	);
+}
+
+export default function DuotonePalettePanel( {
+	name,
+}: DuotonePalettePanelProps ) {
+	const [ customDuotones ] = useSetting< Duotone[] >(
+		'color.duotone.custom',
+		name
+	);
+	const [ defaultDuotones ] = useSetting< Duotone[] >(
+		'color.duotone.default',
+		name
+	);
+	const [ themeDuotones ] = useSetting< Duotone[] >(
+		'color.duotone.theme',
+		name
+	);
+	const [ defaultDuotoneEnabled ] = useSetting< boolean >(
+		'color.defaultDuotone',
+		name
+	);
+	const duotonePalette = [
+		...( customDuotones ?? [] ),
+		...( themeDuotones ?? [] ),
+		...( defaultDuotones && defaultDuotoneEnabled ? defaultDuotones : [] ),
+	];
+
+	const [ lightDuotones ] = useSetting<
+		SchemePresetCollection< ColorSchemePreset< Duotone > >
+	>( 'color.light.duotone', name );
+	const [ darkDuotones ] = useSetting<
+		SchemePresetCollection< ColorSchemePreset< Duotone > >
+	>( 'color.dark.duotone', name );
+
+	const namedLightDuotones = addBasePresetNames(
+		flattenSchemePresets( lightDuotones ),
+		themeDuotones
+	);
+	const namedDarkDuotones = addBasePresetNames(
+		flattenSchemePresets( darkDuotones ),
+		themeDuotones
+	);
+	const hasLightDuotones = namedLightDuotones.length > 0;
+	const hasDarkDuotones = namedDarkDuotones.length > 0;
+
+	return (
+		<Stack
+			direction="column"
+			gap="lg"
+			className="global-styles-ui-duotone-palette-panel"
+		>
+			{ duotonePalette.length > 0 && (
+				<DuotonePalette
+					duotones={ duotonePalette }
+					label={ __( 'Theme' ) }
+				/>
+			) }
+			{ hasLightDuotones && (
+				<DuotonePalette
+					duotones={ namedLightDuotones }
+					label={ __( 'Light duotone' ) }
+					scheme="light"
+				/>
+			) }
+			{ hasDarkDuotones && (
+				<DuotonePalette
+					duotones={ namedDarkDuotones }
+					label={ __( 'Dark duotone' ) }
+					scheme="dark"
+				/>
+			) }
+		</Stack>
+	);
+}
diff --git a/packages/global-styles-ui/src/gradients-palette-panel.tsx b/packages/global-styles-ui/src/gradients-palette-panel.tsx
index 6950317f7397d9..981a970f23a705 100644
--- a/packages/global-styles-ui/src/gradients-palette-panel.tsx
+++ b/packages/global-styles-ui/src/gradients-palette-panel.tsx
@@ -5,22 +5,26 @@ import { useViewportMatch } from '@wordpress/compose';
 import {
 	__experimentalVStack as VStack,
 	__experimentalPaletteEdit as PaletteEdit,
-	__experimentalSpacer as Spacer,
-	DuotonePicker,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import type { Gradient } from '@wordpress/global-styles-engine';
+import type {
+	ColorSchemePreset,
+	Gradient,
+} from '@wordpress/global-styles-engine';
 
 /**
  * Internal dependencies
  */
-import { Subtitle } from './subtitle';
 import { useSetting } from './hooks';
+import {
+	addBasePresetNames,
+	flattenSchemePresets,
+	SchemePaletteIcon,
+	type SchemePresetCollection,
+} from './color-scheme-palette';
 
 const mobilePopoverProps = { placement: 'bottom-start' as const, offset: 8 };
 
-const noop = () => {};
-
 interface GradientPalettePanelProps {
 	name?: string;
 }
@@ -50,23 +54,35 @@ export default function GradientPalettePanel( {
 		'color.gradients.custom',
 		name
 	);
+	const [ lightGradients, setLightGradients ] = useSetting<
+		SchemePresetCollection< ColorSchemePreset< Gradient > >
+	>( 'color.light.gradients', name );
+	const [ userLightGradients ] = useSetting<
+		SchemePresetCollection< ColorSchemePreset< Gradient > >
+	>( 'color.light.gradients', name, 'user' );
+	const [ darkGradients, setDarkGradients ] = useSetting<
+		SchemePresetCollection< ColorSchemePreset< Gradient > >
+	>( 'color.dark.gradients', name );
+	const [ userDarkGradients ] = useSetting<
+		SchemePresetCollection< ColorSchemePreset< Gradient > >
+	>( 'color.dark.gradients', name, 'user' );
+
+	const namedLightGradients = addBasePresetNames(
+		flattenSchemePresets( lightGradients ),
+		themeGradients
+	);
+	const namedDarkGradients = addBasePresetNames(
+		flattenSchemePresets( darkGradients ),
+		themeGradients
+	);
+	const hasLightGradients = namedLightGradients.length > 0;
+	const hasDarkGradients = namedDarkGradients.length > 0;
 
 	const [ defaultPaletteEnabled ] = useSetting< boolean >(
 		'color.defaultGradients',
 		name
 	);
 
-	const [ customDuotone ] = useSetting( 'color.duotone.custom' ) || [];
-	const [ defaultDuotone ] = useSetting( 'color.duotone.default' ) || [];
-	const [ themeDuotone ] = useSetting( 'color.duotone.theme' ) || [];
-	const [ defaultDuotoneEnabled ] = useSetting( 'color.defaultDuotone' );
-
-	const duotonePalette = [
-		...( customDuotone || [] ),
-		...( themeDuotone || [] ),
-		...( defaultDuotone && defaultDuotoneEnabled ? defaultDuotone : [] ),
-	];
-
 	const isMobileViewport = useViewportMatch( 'small', '<' );
 	const popoverProps = isMobileViewport ? mobilePopoverProps : undefined;
 
@@ -83,6 +99,36 @@ export default function GradientPalettePanel( {
 					onChange={ setThemeGradients }
 					paletteLabel={ __( 'Theme' ) }
 					paletteLabelHeadingLevel={ 3 }
+					paletteVariations={ [
+						...( hasLightGradients
+							? [
+									{
+										canReset:
+											userLightGradients !== undefined,
+										gradients: namedLightGradients,
+										onChange: setLightGradients,
+										paletteIcon: (
+											<SchemePaletteIcon scheme="light" />
+										),
+										paletteLabel: __( 'Light gradients' ),
+									},
+							  ]
+							: [] ),
+						...( hasDarkGradients
+							? [
+									{
+										canReset:
+											userDarkGradients !== undefined,
+										gradients: namedDarkGradients,
+										onChange: setDarkGradients,
+										paletteIcon: (
+											<SchemePaletteIcon scheme="dark" />
+										),
+										paletteLabel: __( 'Dark gradients' ),
+									},
+							  ]
+							: [] ),
+					] }
 					popoverProps={ popoverProps }
 				/>
 			) }
@@ -107,20 +153,6 @@ export default function GradientPalettePanel( {
 				slugPrefix="custom-"
 				popoverProps={ popoverProps }
 			/>
-			{ !! duotonePalette && !! duotonePalette.length && (
-				<div>
-					<Subtitle level={ 3 }>{ __( 'Duotone' ) }</Subtitle>
-					<Spacer margin={ 3 } />
-					<DuotonePicker
-						duotonePalette={ duotonePalette }
-						disableCustomDuotone
-						disableCustomColors
-						clearable={ false }
-						onChange={ noop }
-						colorPalette={ [] }
-					/>
-				</div>
-			) }
 		</VStack>
 	);
 }
diff --git a/packages/global-styles-ui/src/preview-styles.tsx b/packages/global-styles-ui/src/preview-styles.tsx
index a8ecff8d64d102..f90ee695f52d06 100644
--- a/packages/global-styles-ui/src/preview-styles.tsx
+++ b/packages/global-styles-ui/src/preview-styles.tsx
@@ -15,6 +15,7 @@ import { useStylesPreviewColors } from './preview-hooks';
 import TypographyExample from './typography-example';
 import HighlightedColors from './highlighted-colors';
 import PreviewWrapper from './preview-wrapper';
+import SchemePreviewIndicator from './scheme-preview-indicator';
 
 const firstFrameVariants = {
 	start: {
@@ -189,6 +190,9 @@ function PreviewStyles( {
 					</VStack>
 				</motion.div>
 			) }
+			{ ( { ratio, key } ) => (
+				<SchemePreviewIndicator key={ key } ratio={ ratio } />
+			) }
 		</PreviewWrapper>
 	);
 }
diff --git a/packages/global-styles-ui/src/scheme-preview-indicator.tsx b/packages/global-styles-ui/src/scheme-preview-indicator.tsx
new file mode 100644
index 00000000000000..794a5fcdfc477f
--- /dev/null
+++ b/packages/global-styles-ui/src/scheme-preview-indicator.tsx
@@ -0,0 +1,98 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { Icon, moon, sun } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import { useSetting } from './hooks';
+import {
+	flattenSchemePresets,
+	type SchemePresetCollection,
+} from './color-scheme-palette';
+
+type SchemeSettings = Partial<
+	Record<
+		'palette' | 'gradients' | 'duotone',
+		SchemePresetCollection< unknown >
+	>
+>;
+
+export function hasSchemePresets( scheme?: SchemeSettings ): boolean {
+	const presetTypes: ( keyof SchemeSettings )[] = [
+		'palette',
+		'gradients',
+		'duotone',
+	];
+	return presetTypes.some(
+		( presetType ) =>
+			flattenSchemePresets( scheme?.[ presetType ] ).length > 0
+	);
+}
+
+export default function SchemePreviewIndicator( { ratio }: { ratio: number } ) {
+	const [ lightScheme ] = useSetting< SchemeSettings >(
+		'color.light',
+		undefined,
+		'base'
+	);
+	const [ darkScheme ] = useSetting< SchemeSettings >(
+		'color.dark',
+		undefined,
+		'base'
+	);
+
+	const schemes = [
+		...( hasSchemePresets( lightScheme )
+			? [
+					{
+						icon: sun,
+						label: __( 'Light color scheme available' ),
+					},
+			  ]
+			: [] ),
+		...( hasSchemePresets( darkScheme )
+			? [
+					{
+						icon: moon,
+						label: __( 'Dark color scheme available' ),
+					},
+			  ]
+			: [] ),
+	];
+
+	if ( schemes.length === 0 ) {
+		return null;
+	}
+
+	const badgeSize = Math.max( 16, Math.min( 24, 20 * ratio ) );
+	const inset = Math.max( 4, Math.min( 8, 6 * ratio ) );
+
+	return (
+		<div
+			className="global-styles-ui-preview__scheme-indicators"
+			style={ {
+				bottom: inset,
+				gap: Math.max( 2, 3 * ratio ),
+				insetInlineEnd: inset,
+			} }
+		>
+			{ schemes.map( ( scheme ) => (
+				<span
+					key={ scheme.label }
+					aria-label={ scheme.label }
+					className="global-styles-ui-preview__scheme-indicator"
+					role="img"
+					style={ {
+						height: badgeSize,
+						width: badgeSize,
+					} }
+				>
+					<Icon icon={ scheme.icon } size={ badgeSize - 6 } />
+				</span>
+			) ) }
+		</div>
+	);
+}
diff --git a/packages/global-styles-ui/src/screen-color-palette.tsx b/packages/global-styles-ui/src/screen-color-palette.tsx
index 1a67126f3aff95..a29d0be3d23f6e 100644
--- a/packages/global-styles-ui/src/screen-color-palette.tsx
+++ b/packages/global-styles-ui/src/screen-color-palette.tsx
@@ -10,6 +10,7 @@ import { Tabs } from '@wordpress/ui';
 import { ScreenHeader } from './screen-header';
 import ColorPalettePanel from './color-palette-panel';
 import GradientPalettePanel from './gradients-palette-panel';
+import DuotonePalettePanel from './duotone-palette-panel';
 
 function ScreenColorPalette( { name }: { name?: string } ) {
 	return (
@@ -27,6 +28,7 @@ function ScreenColorPalette( { name }: { name?: string } ) {
 						<Tabs.Tab value="gradient">
 							{ __( 'Gradient' ) }
 						</Tabs.Tab>
+						<Tabs.Tab value="duotone">{ __( 'Duotone' ) }</Tabs.Tab>
 					</Tabs.List>
 				</div>
 				<Tabs.Panel value="color" tabIndex={ -1 }>
@@ -35,6 +37,9 @@ function ScreenColorPalette( { name }: { name?: string } ) {
 				<Tabs.Panel value="gradient" tabIndex={ -1 }>
 					<GradientPalettePanel name={ name } />
 				</Tabs.Panel>
+				<Tabs.Panel value="duotone" tabIndex={ -1 }>
+					<DuotonePalettePanel name={ name } />
+				</Tabs.Panel>
 			</Tabs.Root>
 		</>
 	);
diff --git a/packages/global-styles-ui/src/style.scss b/packages/global-styles-ui/src/style.scss
index 69a3eb9a8d27e9..cfc7e2afe13039 100644
--- a/packages/global-styles-ui/src/style.scss
+++ b/packages/global-styles-ui/src/style.scss
@@ -10,6 +10,7 @@
 .global-styles-ui-preview__wrapper {
 	max-width: 100%;
 	display: block;
+	position: relative;
 	width: 100%;
 
 	&.is-hoverable {
@@ -17,6 +18,22 @@
 	}
 }
 
+.global-styles-ui-preview__scheme-indicators {
+	display: flex;
+	position: absolute;
+	z-index: 1;
+}
+
+.global-styles-ui-preview__scheme-indicator {
+	align-items: center;
+	background: rgba(colors.$white, 0.9);
+	border-radius: 50%;
+	box-shadow: inset 0 0 0 1px rgba(colors.$black, 0.1);
+	color: colors.$gray-900;
+	display: flex;
+	justify-content: center;
+}
+
 .global-styles-ui-typography-preview {
 	display: flex;
 	align-items: center;
@@ -269,6 +286,18 @@
 }
 
 .global-styles-ui-color-palette-panel,
-.global-styles-ui-gradient-palette-panel {
+.global-styles-ui-gradient-palette-panel,
+.global-styles-ui-duotone-palette-panel {
 	padding: variables.$grid-unit-20;
 }
+
+.global-styles-ui-duotone-palette-panel .global-styles-ui-subtitle {
+	align-items: center;
+	display: flex;
+	gap: variables.$grid-unit-05;
+	line-height: variables.$grid-unit-30;
+}
+
+.global-styles-ui-duotone-palette-panel .components-circular-option-picker > .components-spacer {
+	display: none;
+}
diff --git a/packages/global-styles-ui/src/test/color-scheme-palette.spec.ts b/packages/global-styles-ui/src/test/color-scheme-palette.spec.ts
new file mode 100644
index 00000000000000..d34bbb266fdb93
--- /dev/null
+++ b/packages/global-styles-ui/src/test/color-scheme-palette.spec.ts
@@ -0,0 +1,47 @@
+/**
+ * Internal dependencies
+ */
+import {
+	addBasePresetNames,
+	flattenSchemePresets,
+} from '../color-scheme-palette';
+
+describe( 'flattenSchemePresets', () => {
+	it( 'returns an inline scheme palette unchanged', () => {
+		const presets = [ { slug: 'base', color: '#fff' } ];
+
+		expect( flattenSchemePresets( presets ) ).toEqual( presets );
+	} );
+
+	it( 'flattens an origin-keyed scheme palette', () => {
+		expect(
+			flattenSchemePresets( {
+				theme: [ { slug: 'base', color: '#fff' } ],
+				custom: [ { slug: 'accent', color: '#f00' } ],
+			} )
+		).toEqual( [
+			{ slug: 'base', color: '#fff' },
+			{ slug: 'accent', color: '#f00' },
+		] );
+	} );
+} );
+
+describe( 'addBasePresetNames', () => {
+	it( 'uses the matching base preset name when a scheme omits it', () => {
+		expect(
+			addBasePresetNames(
+				[ { slug: 'base', color: '#111' } ],
+				[ { slug: 'base', name: 'Base', color: '#fff' } ]
+			)
+		).toEqual( [ { slug: 'base', name: 'Base', color: '#111' } ] );
+	} );
+
+	it( 'preserves a scheme-specific name', () => {
+		expect(
+			addBasePresetNames(
+				[ { slug: 'base', name: 'Night base', color: '#111' } ],
+				[ { slug: 'base', name: 'Base', color: '#fff' } ]
+			)
+		).toEqual( [ { slug: 'base', name: 'Night base', color: '#111' } ] );
+	} );
+} );
diff --git a/packages/global-styles-ui/src/test/duotone-palette-panel.spec.tsx b/packages/global-styles-ui/src/test/duotone-palette-panel.spec.tsx
new file mode 100644
index 00000000000000..803202e442e734
--- /dev/null
+++ b/packages/global-styles-ui/src/test/duotone-palette-panel.spec.tsx
@@ -0,0 +1,91 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+
+/**
+ * Internal dependencies
+ */
+import DuotonePalettePanel from '../duotone-palette-panel';
+import { GlobalStylesProvider } from '../provider';
+
+describe( 'DuotonePalettePanel', () => {
+	it( 'shows theme and scheme duotones with the same read-only controls', () => {
+		render(
+			<GlobalStylesProvider
+				value={ {
+					settings: {
+						color: {
+							dark: {
+								duotone: [
+									{
+										slug: 'portrait',
+										name: 'Portrait',
+										colors: [ '#222', '#ddd' ],
+									},
+								],
+							},
+						},
+					},
+					styles: {},
+				} }
+				baseValue={ {
+					settings: {
+						color: {
+							palette: {
+								theme: [
+									{
+										slug: 'base',
+										name: 'Base',
+										color: '#fff',
+									},
+								],
+							},
+							duotone: {
+								theme: [
+									{
+										slug: 'portrait',
+										name: 'Portrait',
+										colors: [ '#111', '#eee' ],
+									},
+								],
+							},
+							dark: {
+								duotone: [
+									{
+										slug: 'portrait',
+										name: 'Portrait',
+										colors: [ '#000', '#fff' ],
+									},
+								],
+							},
+						},
+					},
+					styles: {},
+				} }
+				onChange={ () => {} }
+			>
+				<DuotonePalettePanel />
+			</GlobalStylesProvider>
+		);
+
+		expect( screen.getByText( 'Theme' ) ).toBeVisible();
+		expect(
+			screen.getByRole( 'listbox', {
+				name: 'Theme duotone palette',
+			} )
+		).toBeVisible();
+		expect(
+			screen.getByRole( 'listbox', {
+				name: 'Dark duotone palette',
+			} )
+		).toBeVisible();
+		expect( screen.queryByText( 'Light duotone' ) ).not.toBeInTheDocument();
+		expect(
+			screen.queryByRole( 'button', { name: 'Edit Portrait' } )
+		).not.toBeInTheDocument();
+		expect(
+			screen.queryByRole( 'button', { name: 'Reset Dark duotone' } )
+		).not.toBeInTheDocument();
+	} );
+} );
diff --git a/packages/global-styles-ui/src/test/scheme-preview-indicator.spec.tsx b/packages/global-styles-ui/src/test/scheme-preview-indicator.spec.tsx
new file mode 100644
index 00000000000000..409aca88062f7e
--- /dev/null
+++ b/packages/global-styles-ui/src/test/scheme-preview-indicator.spec.tsx
@@ -0,0 +1,85 @@
+/**
+ * WordPress dependencies
+ */
+import { render, screen } from '@testing-library/react';
+
+/**
+ * Internal dependencies
+ */
+import { GlobalStylesContext } from '../context';
+import SchemePreviewIndicator, {
+	hasSchemePresets,
+} from '../scheme-preview-indicator';
+
+const renderIndicator = ( colorSettings: Record< string, unknown > ) => {
+	const base = {
+		settings: {
+			color: colorSettings,
+		},
+		styles: {},
+	};
+
+	return render(
+		<GlobalStylesContext.Provider
+			value={ {
+				base,
+				merged: base,
+				onChange: jest.fn(),
+				user: { settings: {}, styles: {} },
+			} }
+		>
+			<SchemePreviewIndicator ratio={ 1 } />
+		</GlobalStylesContext.Provider>
+	);
+};
+
+describe( 'hasSchemePresets', () => {
+	it( 'detects flat and origin-keyed scheme presets', () => {
+		expect(
+			hasSchemePresets( {
+				palette: [ { slug: 'base' } ],
+			} )
+		).toBe( true );
+		expect(
+			hasSchemePresets( {
+				gradients: {
+					theme: [ { slug: 'signal' } ],
+				},
+			} )
+		).toBe( true );
+		expect( hasSchemePresets( {} ) ).toBe( false );
+	} );
+} );
+
+describe( 'SchemePreviewIndicator', () => {
+	it( 'shows an indicator for each theme-provided alternative', () => {
+		renderIndicator( {
+			light: {
+				palette: [ { slug: 'base', color: '#ffffff' } ],
+			},
+			dark: {
+				duotone: {
+					theme: [
+						{
+							slug: 'portrait',
+							colors: [ '#000000', '#ffffff' ],
+						},
+					],
+				},
+			},
+		} );
+
+		expect(
+			screen.getByLabelText( 'Light color scheme available' )
+		).toBeVisible();
+		expect(
+			screen.getByLabelText( 'Dark color scheme available' )
+		).toBeVisible();
+	} );
+
+	it( 'does not render when the theme has no alternative', () => {
+		const { container } = renderIndicator( {} );
+
+		expect( container ).toBeEmptyDOMElement();
+	} );
+} );
diff --git a/packages/icons/src/library/moon.svg b/packages/icons/src/library/moon.svg
new file mode 100644
index 00000000000000..e6bde071a86a79
--- /dev/null
+++ b/packages/icons/src/library/moon.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+	<path d="M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401" />
+</svg>
diff --git a/packages/icons/src/library/sun.svg b/packages/icons/src/library/sun.svg
new file mode 100644
index 00000000000000..05d65e869457c2
--- /dev/null
+++ b/packages/icons/src/library/sun.svg
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+	<circle cx="12" cy="12" r="4" />
+	<path d="M12 2v2" />
+	<path d="M12 20v2" />
+	<path d="m4.93 4.93 1.41 1.41" />
+	<path d="m17.66 17.66 1.41 1.41" />
+	<path d="M2 12h2" />
+	<path d="M20 12h2" />
+	<path d="m6.34 17.66-1.41 1.41" />
+	<path d="m19.07 4.93-1.41 1.41" />
+</svg>
diff --git a/packages/icons/src/manifest.json b/packages/icons/src/manifest.json
index 71b1a6fb861109..00fed827a844dd 100644
--- a/packages/icons/src/manifest.json
+++ b/packages/icons/src/manifest.json
@@ -1003,6 +1003,12 @@
 		"filePath": "library/mobile.svg",
 		"public": true
 	},
+	{
+		"slug": "moon",
+		"label": "Moon",
+		"filePath": "library/moon.svg",
+		"public": true
+	},
 	{
 		"slug": "more",
 		"label": "More",
@@ -1554,6 +1560,12 @@
 		"label": "Subscript",
 		"filePath": "library/subscript.svg"
 	},
+	{
+		"slug": "sun",
+		"label": "Sun",
+		"filePath": "library/sun.svg",
+		"public": true
+	},
 	{
 		"slug": "superscript",
 		"label": "Superscript",
diff --git a/packages/icons/src/manifest.php b/packages/icons/src/manifest.php
index d2eb04cff14e9f..b3ec36533b11a3 100644
--- a/packages/icons/src/manifest.php
+++ b/packages/icons/src/manifest.php
@@ -221,6 +221,10 @@
 		'label'    => _x( 'Mobile', 'icon label', 'gutenberg' ),
 		'filePath' => 'library/mobile.svg',
 	),
+	'moon'                => array(
+		'label'    => _x( 'Moon', 'icon label', 'gutenberg' ),
+		'filePath' => 'library/moon.svg',
+	),
 	'more-horizontal'     => array(
 		'label'    => _x( 'More Horizontal', 'icon label', 'gutenberg' ),
 		'filePath' => 'library/more-horizontal.svg',
@@ -325,6 +329,10 @@
 		'label'    => _x( 'Styles', 'icon label', 'gutenberg' ),
 		'filePath' => 'library/styles.svg',
 	),
+	'sun'                 => array(
+		'label'    => _x( 'Sun', 'icon label', 'gutenberg' ),
+		'filePath' => 'library/sun.svg',
+	),
 	'symbol'              => array(
 		'label'    => _x( 'Symbol', 'icon label', 'gutenberg' ),
 		'filePath' => 'library/symbol.svg',