diff --git a/packages/block-editor/src/components/block-list/index.native.js b/packages/block-editor/src/components/block-list/index.native.js
index 54b6b62f08c96..0eefa1274378c 100644
--- a/packages/block-editor/src/components/block-list/index.native.js
+++ b/packages/block-editor/src/components/block-list/index.native.js
@@ -10,9 +10,9 @@ import { Text, View, Platform, TouchableWithoutFeedback } from 'react-native';
 import { Component } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { withDispatch, withSelect } from '@wordpress/data';
-import { compose } from '@wordpress/compose';
+import { compose, withPreferredColorScheme } from '@wordpress/compose';
 import { createBlock, isUnmodifiedDefaultBlock } from '@wordpress/blocks';
-import { KeyboardAwareFlatList, ReadableContentView, withTheme } from '@wordpress/components';
+import { KeyboardAwareFlatList, ReadableContentView } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -113,7 +113,7 @@ export class BlockList extends Component {
 	}
 
 	renderItem( { item: clientId, index } ) {
-		const blockHolderFocusedStyle = this.props.useStyle( styles.blockHolderFocused, styles.blockHolderFocusedDark );
+		const blockHolderFocusedStyle = this.props.getStylesFromColorScheme( styles.blockHolderFocused, styles.blockHolderFocusedDark );
 		const { shouldShowBlockAtIndex, shouldShowInsertionPoint } = this.props;
 		return (
 			<ReadableContentView>
@@ -133,8 +133,8 @@ export class BlockList extends Component {
 	}
 
 	renderAddBlockSeparator() {
-		const lineStyle = this.props.useStyle( styles.lineStyleAddHere, styles.lineStyleAddHereDark );
-		const labelStyle = this.props.useStyle( styles.labelStyleAddHere, styles.labelStyleAddHereDark );
+		const lineStyle = this.props.getStylesFromColorScheme( styles.lineStyleAddHere, styles.lineStyleAddHereDark );
+		const labelStyle = this.props.getStylesFromColorScheme( styles.labelStyleAddHere, styles.labelStyleAddHereDark );
 		return (
 			<View style={ styles.containerStyleAddHere } >
 				<View style={ lineStyle }></View>
@@ -216,6 +216,6 @@ export default compose( [
 			replaceBlock,
 		};
 	} ),
-	withTheme,
+	withPreferredColorScheme,
 ] )( BlockList );
 
diff --git a/packages/block-editor/src/components/inserter/index.native.js b/packages/block-editor/src/components/inserter/index.native.js
index b64c460f14bd6..4c06402af3821 100644
--- a/packages/block-editor/src/components/inserter/index.native.js
+++ b/packages/block-editor/src/components/inserter/index.native.js
@@ -2,10 +2,10 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Dropdown, ToolbarButton, Dashicon, withTheme } from '@wordpress/components';
+import { Dropdown, ToolbarButton, Dashicon } from '@wordpress/components';
 import { Component } from '@wordpress/element';
 import { withSelect } from '@wordpress/data';
-import { compose } from '@wordpress/compose';
+import { compose, withPreferredColorScheme } from '@wordpress/compose';
 import { getUnregisteredTypeHandlerName } from '@wordpress/blocks';
 
 /**
@@ -56,9 +56,9 @@ class Inserter extends Component {
 		const {
 			disabled,
 			renderToggle = defaultRenderToggle,
-			useStyle,
+			getStylesFromColorScheme,
 		} = this.props;
-		const style = useStyle( styles.addBlockButton, styles.addBlockButtonDark );
+		const style = getStylesFromColorScheme( styles.addBlockButton, styles.addBlockButtonDark );
 		return renderToggle( { onToggle, isOpen, disabled, style } );
 	}
 
@@ -119,5 +119,5 @@ export default compose( [
 			items: inserterItems.filter( ( { name } ) => name !== getUnregisteredTypeHandlerName() ),
 		};
 	} ),
-	withTheme,
+	withPreferredColorScheme,
 ] )( Inserter );
diff --git a/packages/block-editor/src/components/inserter/menu.native.js b/packages/block-editor/src/components/inserter/menu.native.js
index 9dbf9b5b16271..2a990445b284c 100644
--- a/packages/block-editor/src/components/inserter/menu.native.js
+++ b/packages/block-editor/src/components/inserter/menu.native.js
@@ -13,8 +13,8 @@ import {
 	isUnmodifiedDefaultBlock,
 } from '@wordpress/blocks';
 import { withDispatch, withSelect } from '@wordpress/data';
-import { withInstanceId, compose } from '@wordpress/compose';
-import { BottomSheet, Icon, withTheme } from '@wordpress/components';
+import { withInstanceId, compose, withPreferredColorScheme } from '@wordpress/compose';
+import { BottomSheet, Icon } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -61,12 +61,12 @@ export class InserterMenu extends Component {
 	}
 
 	render() {
-		const { useStyle } = this.props;
+		const { getStylesFromColorScheme } = this.props;
 		const numberOfColumns = this.calculateNumberOfColumns();
 		const bottomPadding = styles.contentBottomPadding;
-		const modalIconWrapperStyle = useStyle( styles.modalIconWrapper, styles.modalIconWrapperDark );
-		const modalIconStyle = useStyle( styles.modalIcon, styles.modalIconDark );
-		const modalItemLabelStyle = useStyle( styles.modalItemLabel, styles.modalItemLabelDark );
+		const modalIconWrapperStyle = getStylesFromColorScheme( styles.modalIconWrapper, styles.modalIconWrapperDark );
+		const modalIconStyle = getStylesFromColorScheme( styles.modalIcon, styles.modalIconDark );
+		const modalItemLabelStyle = getStylesFromColorScheme( styles.modalItemLabel, styles.modalItemLabelDark );
 
 		return (
 			<BottomSheet
@@ -217,5 +217,5 @@ export default compose(
 		};
 	} ),
 	withInstanceId,
-	withTheme,
+	withPreferredColorScheme,
 )( InserterMenu );
diff --git a/packages/block-editor/src/components/media-placeholder/index.native.js b/packages/block-editor/src/components/media-placeholder/index.native.js
index a9a7d50fce11f..3670d6381c5c6 100644
--- a/packages/block-editor/src/components/media-placeholder/index.native.js
+++ b/packages/block-editor/src/components/media-placeholder/index.native.js
@@ -12,7 +12,8 @@ import {
 	MEDIA_TYPE_IMAGE,
 	MEDIA_TYPE_VIDEO,
 } from '@wordpress/block-editor';
-import { Dashicon, withTheme } from '@wordpress/components';
+import { Dashicon } from '@wordpress/components';
+import { withPreferredColorScheme } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -27,7 +28,7 @@ function MediaPlaceholder( props ) {
 		onSelect,
 		isAppender,
 		disableMediaButtons,
-		useStyle,
+		getStylesFromColorScheme,
 	} = props;
 
 	const isOneType = allowedTypes.length === 1;
@@ -60,8 +61,8 @@ function MediaPlaceholder( props ) {
 		accessibilityHint = __( 'Double tap to select a video' );
 	}
 
-	const emptyStateContainerStyle = useStyle( styles.emptyStateContainer, styles.emptyStateContainerDark );
-	const emptyStateTitleStyle = useStyle( styles.emptyStateTitle, styles.emptyStateTitleDark );
+	const emptyStateContainerStyle = getStylesFromColorScheme( styles.emptyStateContainer, styles.emptyStateContainerDark );
+	const emptyStateTitleStyle = getStylesFromColorScheme( styles.emptyStateTitle, styles.emptyStateTitleDark );
 
 	const renderContent = () => {
 		if ( isAppender === undefined || ! isAppender ) {
@@ -129,4 +130,4 @@ function MediaPlaceholder( props ) {
 	);
 }
 
-export default withTheme( MediaPlaceholder );
+export default withPreferredColorScheme( MediaPlaceholder );
diff --git a/packages/block-editor/src/components/warning/index.native.js b/packages/block-editor/src/components/warning/index.native.js
index e6c13b5dd75a9..dc7e83d16509a 100644
--- a/packages/block-editor/src/components/warning/index.native.js
+++ b/packages/block-editor/src/components/warning/index.native.js
@@ -6,7 +6,8 @@ import { View, Text } from 'react-native';
 /**
  * WordPress dependencies
  */
-import { Icon, withTheme } from '@wordpress/components';
+import { Icon } from '@wordpress/components';
+import { withPreferredColorScheme } from '@wordpress/compose';
 import { normalizeIconObject } from '@wordpress/blocks';
 
 /**
@@ -14,15 +15,15 @@ import { normalizeIconObject } from '@wordpress/blocks';
  */
 import styles from './style.scss';
 
-function Warning( { title, message, icon, iconClass, theme, useStyle, ...viewProps } ) {
+function Warning( { title, message, icon, iconClass, preferredColorScheme, getStylesFromColorScheme, ...viewProps } ) {
 	icon = icon && normalizeIconObject( icon );
-	const internalIconClass = 'warning-icon' + '-' + theme;
-	const titleStyle = useStyle( styles.title, styles.titleDark );
-	const messageStyle = useStyle( styles.message, styles.messageDark );
+	const internalIconClass = 'warning-icon' + '-' + preferredColorScheme;
+	const titleStyle = getStylesFromColorScheme( styles.title, styles.titleDark );
+	const messageStyle = getStylesFromColorScheme( styles.message, styles.messageDark );
 
 	return (
 		<View
-			style={ useStyle( styles.container, styles.containerDark ) }
+			style={ getStylesFromColorScheme( styles.container, styles.containerDark ) }
 			{ ...viewProps }
 		>
 			{ icon && (
@@ -43,4 +44,4 @@ function Warning( { title, message, icon, iconClass, theme, useStyle, ...viewPro
 	);
 }
 
-export default withTheme( Warning );
+export default withPreferredColorScheme( Warning );
diff --git a/packages/block-library/src/code/edit.native.js b/packages/block-library/src/code/edit.native.js
index a8afae8f0195b..d8641b2270d20 100644
--- a/packages/block-library/src/code/edit.native.js
+++ b/packages/block-library/src/code/edit.native.js
@@ -8,7 +8,7 @@ import { View } from 'react-native';
  */
 import { PlainText } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
-import { withTheme } from '@wordpress/components';
+import { withPreferredColorScheme } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -23,9 +23,9 @@ import styles from './theme.scss';
 // Note: styling is applied directly to the (nested) PlainText component. Web-side components
 // apply it to the container 'div' but we don't have a proper proposal for cascading styling yet.
 export function CodeEdit( props ) {
-	const { attributes, setAttributes, style, onFocus, onBlur, useStyle } = props;
-	const codeStyle = useStyle( styles.blockCode, styles.blockCodeDark );
-	const placeholderStyle = useStyle( styles.placeholder, styles.placeholderDark );
+	const { attributes, setAttributes, style, onFocus, onBlur, getStylesFromColorScheme } = props;
+	const codeStyle = getStylesFromColorScheme( styles.blockCode, styles.blockCodeDark );
+	const placeholderStyle = getStylesFromColorScheme( styles.placeholder, styles.placeholderDark );
 
 	return (
 		<View>
@@ -47,4 +47,4 @@ export function CodeEdit( props ) {
 	);
 }
 
-export default withTheme( CodeEdit );
+export default withPreferredColorScheme( CodeEdit );
diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js
index eb846520ab53f..db437f11f1703 100644
--- a/packages/block-library/src/image/edit.native.js
+++ b/packages/block-library/src/image/edit.native.js
@@ -19,7 +19,6 @@ import {
 	Icon,
 	Toolbar,
 	ToolbarButton,
-	withTheme,
 } from '@wordpress/components';
 
 import {
@@ -33,6 +32,7 @@ import {
 import { __, sprintf } from '@wordpress/i18n';
 import { isURL } from '@wordpress/url';
 import { doAction, hasAction } from '@wordpress/hooks';
+import { withPreferredColorScheme } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -198,7 +198,7 @@ class ImageEdit extends React.Component {
 			return <Icon icon={ SvgIconRetry } { ...styles.iconRetry } />;
 		}
 
-		const iconStyle = this.props.useStyle( styles.icon, styles.iconDark );
+		const iconStyle = this.props.getStylesFromColorScheme( styles.icon, styles.iconDark );
 		return <Icon icon={ SvgIcon } { ...iconStyle } />;
 	}
 
@@ -371,4 +371,4 @@ class ImageEdit extends React.Component {
 	}
 }
 
-export default withTheme( ImageEdit );
+export default withPreferredColorScheme( ImageEdit );
diff --git a/packages/block-library/src/missing/edit.native.js b/packages/block-library/src/missing/edit.native.js
index 356aa68f0fb33..cd4898a4e8c69 100644
--- a/packages/block-library/src/missing/edit.native.js
+++ b/packages/block-library/src/missing/edit.native.js
@@ -6,7 +6,8 @@ import { View, Text } from 'react-native';
 /**
  * WordPress dependencies
  */
-import { Icon, withTheme } from '@wordpress/components';
+import { Icon } from '@wordpress/components';
+import { withPreferredColorScheme } from '@wordpress/compose';
 import { coreBlocks } from '@wordpress/block-library';
 import { normalizeIconObject } from '@wordpress/blocks';
 import { Component } from '@wordpress/element';
@@ -20,17 +21,17 @@ import styles from './style.scss';
 export class UnsupportedBlockEdit extends Component {
 	render() {
 		const { originalName } = this.props.attributes;
-		const { useStyle, theme } = this.props;
+		const { getStylesFromColorScheme, preferredColorScheme } = this.props;
 		const blockType = coreBlocks[ originalName ];
 
 		const title = blockType ? blockType.settings.title : __( 'Unsupported' );
-		const titleStyle = useStyle( styles.unsupportedBlockMessage, styles.unsupportedBlockMessageDark );
+		const titleStyle = getStylesFromColorScheme( styles.unsupportedBlockMessage, styles.unsupportedBlockMessageDark );
 
 		const icon = blockType ? normalizeIconObject( blockType.settings.icon ) : 'admin-plugins';
-		const iconStyle = useStyle( styles.unsupportedBlockIcon, styles.unsupportedBlockIconDark );
-		const iconClassName = 'unsupported-icon' + '-' + theme;
+		const iconStyle = getStylesFromColorScheme( styles.unsupportedBlockIcon, styles.unsupportedBlockIconDark );
+		const iconClassName = 'unsupported-icon' + '-' + preferredColorScheme;
 		return (
-			<View style={ useStyle( styles.unsupportedBlock, styles.unsupportedBlockDark ) }>
+			<View style={ getStylesFromColorScheme( styles.unsupportedBlock, styles.unsupportedBlockDark ) }>
 				<Icon className={ iconClassName } icon={ icon && icon.src ? icon.src : icon } color={ iconStyle.color } />
 				<Text style={ titleStyle }>{ title }</Text>
 			</View>
@@ -38,4 +39,4 @@ export class UnsupportedBlockEdit extends Component {
 	}
 }
 
-export default withTheme( UnsupportedBlockEdit );
+export default withPreferredColorScheme( UnsupportedBlockEdit );
diff --git a/packages/block-library/src/more/edit.native.js b/packages/block-library/src/more/edit.native.js
index c266512b28783..88908d3f44837 100644
--- a/packages/block-library/src/more/edit.native.js
+++ b/packages/block-library/src/more/edit.native.js
@@ -9,7 +9,7 @@ import Hr from 'react-native-hr';
  */
 import { __ } from '@wordpress/i18n';
 import { Component } from '@wordpress/element';
-import { withTheme } from '@wordpress/components';
+import { withPreferredColorScheme } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -26,13 +26,13 @@ export class MoreEdit extends Component {
 	}
 
 	render() {
-		const { attributes, useStyle } = this.props;
+		const { attributes, getStylesFromColorScheme } = this.props;
 		const { customText } = attributes;
 		const { defaultText } = this.state;
 
 		const content = customText || defaultText;
-		const textStyle = useStyle( styles.moreText, styles.moreTextDark );
-		const lineStyle = useStyle( styles.moreLine, styles.moreLineDark );
+		const textStyle = getStylesFromColorScheme( styles.moreText, styles.moreTextDark );
+		const lineStyle = getStylesFromColorScheme( styles.moreLine, styles.moreLineDark );
 
 		return (
 			<View>
@@ -48,4 +48,4 @@ export class MoreEdit extends Component {
 	}
 }
 
-export default withTheme( MoreEdit );
+export default withPreferredColorScheme( MoreEdit );
diff --git a/packages/block-library/src/nextpage/edit.native.js b/packages/block-library/src/nextpage/edit.native.js
index 37f9c235b7ef6..25591a00269cb 100644
--- a/packages/block-library/src/nextpage/edit.native.js
+++ b/packages/block-library/src/nextpage/edit.native.js
@@ -8,19 +8,19 @@ import Hr from 'react-native-hr';
  * WordPress dependencies
  */
 import { __, sprintf } from '@wordpress/i18n';
-import { withTheme } from '@wordpress/components';
+import { withPreferredColorScheme } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
 import styles from './editor.scss';
 
-export function NextPageEdit( { attributes, isSelected, onFocus, useStyle } ) {
+export function NextPageEdit( { attributes, isSelected, onFocus, getStylesFromColorScheme } ) {
 	const { customText = __( 'Page break' ) } = attributes;
 	const accessibilityTitle = attributes.customText || '';
 	const accessibilityState = isSelected ? [ 'selected' ] : [];
-	const textStyle = useStyle( styles.nextpageText, styles.nextpageTextDark );
-	const lineStyle = useStyle( styles.nextpageLine, styles.nextpageLineDark );
+	const textStyle = getStylesFromColorScheme( styles.nextpageText, styles.nextpageTextDark );
+	const lineStyle = getStylesFromColorScheme( styles.nextpageLine, styles.nextpageLineDark );
 
 	return (
 		<View
@@ -44,4 +44,4 @@ export function NextPageEdit( { attributes, isSelected, onFocus, useStyle } ) {
 	);
 }
 
-export default withTheme( NextPageEdit );
+export default withPreferredColorScheme( NextPageEdit );
diff --git a/packages/block-library/src/video/edit.native.js b/packages/block-library/src/video/edit.native.js
index 39fc0e0d2233d..94dc83b347442 100644
--- a/packages/block-library/src/video/edit.native.js
+++ b/packages/block-library/src/video/edit.native.js
@@ -20,9 +20,8 @@ import {
 	Icon,
 	Toolbar,
 	ToolbarButton,
-	withTheme,
 } from '@wordpress/components';
-
+import { withPreferredColorScheme } from '@wordpress/compose';
 import {
 	Caption,
 	MediaPlaceholder,
@@ -153,7 +152,7 @@ class VideoEdit extends React.Component {
 			return <Icon icon={ SvgIconRetry } { ...style.icon } />;
 		}
 
-		const iconStyle = this.props.useStyle( style.icon, style.iconDark );
+		const iconStyle = this.props.getStylesFromColorScheme( style.icon, style.iconDark );
 		return <Icon icon={ SvgIcon } { ...( ! isMediaPlaceholder ? style.iconUploading : iconStyle ) } />;
 	}
 
@@ -265,4 +264,4 @@ class VideoEdit extends React.Component {
 	}
 }
 
-export default withTheme( VideoEdit );
+export default withPreferredColorScheme( VideoEdit );
diff --git a/packages/components/src/index.native.js b/packages/components/src/index.native.js
index 209507ec96b44..a12d2e8baad21 100644
--- a/packages/components/src/index.native.js
+++ b/packages/components/src/index.native.js
@@ -28,4 +28,3 @@ export { default as KeyboardAvoidingView } from './mobile/keyboard-avoiding-view
 export { default as KeyboardAwareFlatList } from './mobile/keyboard-aware-flat-list';
 export { default as Picker } from './mobile/picker';
 export { default as ReadableContentView } from './mobile/readable-content-view';
-export * from './mobile/dark-mode';
diff --git a/packages/components/src/mobile/bottom-sheet/cell.native.js b/packages/components/src/mobile/bottom-sheet/cell.native.js
index 6a5fc6ba38947..af74a25e2cee8 100644
--- a/packages/components/src/mobile/bottom-sheet/cell.native.js
+++ b/packages/components/src/mobile/bottom-sheet/cell.native.js
@@ -10,13 +10,13 @@ import { isEmpty } from 'lodash';
 import { Dashicon } from '@wordpress/components';
 import { Component } from '@wordpress/element';
 import { __, _x, sprintf } from '@wordpress/i18n';
+import { withPreferredColorScheme } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
 import styles from './styles.scss';
 import platformStyles from './cellStyles.scss';
-import { withTheme } from '../dark-mode';
 
 class BottomSheetCell extends Component {
 	constructor( props ) {
@@ -49,14 +49,14 @@ class BottomSheetCell extends Component {
 			editable = true,
 			separatorType,
 			style = {},
-			useStyle,
+			getStylesFromColorScheme,
 			...valueProps
 		} = this.props;
 
 		const showValue = value !== undefined;
 		const isValueEditable = editable && onChangeValue !== undefined;
-		const cellLabelStyle = useStyle( styles.cellLabel, styles.cellTextDark );
-		const cellLabelCenteredStyle = useStyle( styles.cellLabelCentered, styles.cellTextDark );
+		const cellLabelStyle = getStylesFromColorScheme( styles.cellLabel, styles.cellTextDark );
+		const cellLabelCenteredStyle = getStylesFromColorScheme( styles.cellLabelCentered, styles.cellTextDark );
 		const defaultLabelStyle = showValue || icon !== undefined ? cellLabelStyle : cellLabelCenteredStyle;
 		const drawSeparator = ( separatorType && separatorType !== 'none' ) || separatorStyle === undefined;
 
@@ -80,8 +80,8 @@ class BottomSheetCell extends Component {
 
 		const separatorStyle = () => {
 			//eslint-disable-next-line @wordpress/no-unused-vars-before-return
-			const defaultSeparatorStyle = this.props.useStyle( styles.separator, styles.separatorDark );
-			const cellSeparatorStyle = this.props.useStyle( styles.cellSeparator, styles.cellSeparatorDark );
+			const defaultSeparatorStyle = this.props.getStylesFromColorScheme( styles.separator, styles.separatorDark );
+			const cellSeparatorStyle = this.props.getStylesFromColorScheme( styles.cellSeparator, styles.cellSeparatorDark );
 			const leftMarginStyle = { ...cellSeparatorStyle, ...platformStyles.separatorMarginLeft };
 			switch ( separatorType ) {
 				case 'leftMargin':
@@ -97,7 +97,7 @@ class BottomSheetCell extends Component {
 
 		const getValueComponent = () => {
 			const styleRTL = I18nManager.isRTL && styles.cellValueRTL;
-			const cellValueStyle = this.props.useStyle( styles.cellValue, styles.cellTextDark );
+			const cellValueStyle = this.props.getStylesFromColorScheme( styles.cellValue, styles.cellTextDark );
 			const finalStyle = { ...cellValueStyle, ...valueStyle, ...styleRTL };
 
 			// To be able to show the `middle` ellipsizeMode on editable cells
@@ -150,7 +150,7 @@ class BottomSheetCell extends Component {
 				);
 		};
 
-		const iconStyle = useStyle( styles.icon, styles.iconDark );
+		const iconStyle = getStylesFromColorScheme( styles.icon, styles.iconDark );
 
 		return (
 			<TouchableOpacity
@@ -188,4 +188,4 @@ class BottomSheetCell extends Component {
 	}
 }
 
-export default withTheme( BottomSheetCell );
+export default withPreferredColorScheme( BottomSheetCell );
diff --git a/packages/components/src/mobile/bottom-sheet/index.native.js b/packages/components/src/mobile/bottom-sheet/index.native.js
index 805ddb084c058..f17284b49e730 100644
--- a/packages/components/src/mobile/bottom-sheet/index.native.js
+++ b/packages/components/src/mobile/bottom-sheet/index.native.js
@@ -9,6 +9,7 @@ import SafeArea from 'react-native-safe-area';
  * WordPress dependencies
  */
 import { Component } from '@wordpress/element';
+import { withPreferredColorScheme } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -19,7 +20,6 @@ import Cell from './cell';
 import PickerCell from './picker-cell';
 import SwitchCell from './switch-cell';
 import KeyboardAvoidingView from './keyboard-avoiding-view';
-import { withTheme } from '../dark-mode';
 
 class BottomSheet extends Component {
 	constructor() {
@@ -64,7 +64,7 @@ class BottomSheet extends Component {
 			hideHeader,
 			style = {},
 			contentStyle = {},
-			useStyle,
+			getStylesFromColorScheme,
 		} = this.props;
 
 		const panResponder = PanResponder.create( {
@@ -120,7 +120,7 @@ class BottomSheet extends Component {
 			},
 		};
 
-		const backgroundStyle = useStyle( styles.background, styles.backgroundDark );
+		const backgroundStyle = getStylesFromColorScheme( styles.background, styles.backgroundDark );
 
 		return (
 			<Modal
@@ -164,7 +164,7 @@ function getWidth() {
 	return Math.min( Dimensions.get( 'window' ).width, styles.background.maxWidth );
 }
 
-const ThemedBottomSheet = withTheme( BottomSheet );
+const ThemedBottomSheet = withPreferredColorScheme( BottomSheet );
 
 ThemedBottomSheet.getWidth = getWidth;
 ThemedBottomSheet.Button = Button;
diff --git a/packages/components/src/mobile/dark-mode/index.native.js b/packages/components/src/mobile/dark-mode/index.native.js
deleted file mode 100644
index 44ff4c38a8f64..0000000000000
--- a/packages/components/src/mobile/dark-mode/index.native.js
+++ /dev/null
@@ -1,58 +0,0 @@
-/**
- * External dependencies
- */
-import { eventEmitter, initialMode } from 'react-native-dark-mode';
-import React from 'react';
-
-// Conditional needed to pass UI Tests on CI
-if ( eventEmitter.setMaxListeners ) {
-	eventEmitter.setMaxListeners( 150 );
-}
-
-export function withTheme( WrappedComponent ) {
-	return class extends React.Component {
-		constructor( props ) {
-			super( props );
-
-			this.onModeChanged = this.onModeChanged.bind( this );
-			this.useStyle = this.useStyle.bind( this );
-
-			this.state = {
-				mode: initialMode,
-			};
-		}
-
-		onModeChanged( newMode ) {
-			this.setState( { mode: newMode } );
-		}
-
-		componentDidMount() {
-			this.subscription = eventEmitter.on( 'currentModeChanged', this.onModeChanged );
-		}
-
-		componentWillUnmount() {
-			// Conditional needed to pass UI Tests on CI
-			if ( eventEmitter.removeListener ) {
-				eventEmitter.removeListener( 'currentModeChanged', this.onModeChanged );
-			}
-		}
-
-		useStyle( light, dark ) {
-			const isDarkMode = this.state.mode === 'dark';
-			const finalDark = {
-				...light,
-				...dark,
-			};
-
-			return isDarkMode ? finalDark : light;
-		}
-
-		render() {
-			return <WrappedComponent
-				theme={ this.state.mode }
-				useStyle={ this.useStyle }
-				{ ...this.props }
-			/>;
-		}
-	};
-}
diff --git a/packages/components/src/mobile/html-text-input/index.native.js b/packages/components/src/mobile/html-text-input/index.native.js
index 4032fa5a74b0d..7b7c648216ef3 100644
--- a/packages/components/src/mobile/html-text-input/index.native.js
+++ b/packages/components/src/mobile/html-text-input/index.native.js
@@ -10,12 +10,11 @@ import { Component } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { parse } from '@wordpress/blocks';
 import { withDispatch, withSelect } from '@wordpress/data';
-import { withInstanceId, compose } from '@wordpress/compose';
+import { withInstanceId, compose, withPreferredColorScheme } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
-import { withTheme } from '../dark-mode';
 import HTMLInputContainer from './container';
 import styles from './style.scss';
 
@@ -61,9 +60,9 @@ export class HTMLTextInput extends Component {
 	}
 
 	render() {
-		const { useStyle } = this.props;
-		const htmlStyle = useStyle( styles.htmlView, styles.htmlViewDark );
-		const placeholderStyle = useStyle( styles.placeholder, styles.placeholderDark );
+		const { getStylesFromColorScheme } = this.props;
+		const htmlStyle = getStylesFromColorScheme( styles.htmlView, styles.htmlViewDark );
+		const placeholderStyle = getStylesFromColorScheme( styles.placeholder, styles.placeholderDark );
 		return (
 			<HTMLInputContainer parentHeight={ this.props.parentHeight }>
 				<TextInput
@@ -123,5 +122,5 @@ export default compose( [
 		};
 	} ),
 	withInstanceId,
-	withTheme,
+	withPreferredColorScheme,
 ] )( HTMLTextInput );
diff --git a/packages/components/src/mobile/html-text-input/test/index.native.js b/packages/components/src/mobile/html-text-input/test/index.native.js
index 4a10c0159293d..2481e533a4fad 100644
--- a/packages/components/src/mobile/html-text-input/test/index.native.js
+++ b/packages/components/src/mobile/html-text-input/test/index.native.js
@@ -33,14 +33,14 @@ const findTitleTextInput = ( wrapper ) => {
 	return findTextInputInWrapper( wrapper, { placeholder } );
 };
 
-const useStyle = () => {
+const getStylesFromColorScheme = () => {
 	return { color: 'white' };
 };
 
 describe( 'HTMLTextInput', () => {
 	it( 'HTMLTextInput renders', () => {
 		const wrapper = shallow(
-			<HTMLTextInput useStyle={ useStyle } />
+			<HTMLTextInput getStylesFromColorScheme={ getStylesFromColorScheme } />
 		);
 		expect( wrapper ).toBeTruthy();
 	} );
@@ -51,7 +51,7 @@ describe( 'HTMLTextInput', () => {
 		const wrapper = shallow(
 			<HTMLTextInput
 				onChange={ onChange }
-				useStyle={ useStyle }
+				getStylesFromColorScheme={ getStylesFromColorScheme }
 			/>
 		);
 
@@ -76,7 +76,7 @@ describe( 'HTMLTextInput', () => {
 			<HTMLTextInput
 				onPersist={ onPersist }
 				onChange={ jest.fn() }
-				useStyle={ useStyle }
+				getStylesFromColorScheme={ getStylesFromColorScheme }
 			/>
 		);
 
@@ -107,7 +107,7 @@ describe( 'HTMLTextInput', () => {
 		const wrapper = shallow(
 			<HTMLTextInput
 				editTitle={ editTitle }
-				useStyle={ useStyle }
+				getStylesFromColorScheme={ getStylesFromColorScheme }
 			/>
 		);
 
diff --git a/packages/components/src/toolbar/toolbar-container.native.js b/packages/components/src/toolbar/toolbar-container.native.js
index c92251c38c19c..33fe77d11db4c 100644
--- a/packages/components/src/toolbar/toolbar-container.native.js
+++ b/packages/components/src/toolbar/toolbar-container.native.js
@@ -3,16 +3,20 @@
  */
 import { View } from 'react-native';
 
+/**
+ * WordPress dependencies
+ */
+import { withPreferredColorScheme } from '@wordpress/compose';
+
 /**
  * Internal dependencies
  */
 import styles from './style.scss';
-import { withTheme } from '../mobile/dark-mode';
 
-const ToolbarContainer = ( { useStyle, passedStyle, children } ) => (
-	<View style={ [ useStyle( styles.container, styles.containerDark ), passedStyle ] }>
+const ToolbarContainer = ( { getStylesFromColorScheme, passedStyle, children } ) => (
+	<View style={ [ getStylesFromColorScheme( styles.container, styles.containerDark ), passedStyle ] }>
 		{ children }
 	</View>
 );
 
-export default withTheme( ToolbarContainer );
+export default withPreferredColorScheme( ToolbarContainer );
diff --git a/packages/compose/src/higher-order/with-preferred-color-scheme/index.native.js b/packages/compose/src/higher-order/with-preferred-color-scheme/index.native.js
new file mode 100644
index 0000000000000..3b393c2ecaf5c
--- /dev/null
+++ b/packages/compose/src/higher-order/with-preferred-color-scheme/index.native.js
@@ -0,0 +1,32 @@
+/**
+ * Internal dependencies
+ */
+import createHigherOrderComponent from '../../utils/create-higher-order-component';
+import usePreferredColorScheme from '../../hooks/use-preferred-color-scheme';
+
+const withPreferredColorScheme = createHigherOrderComponent(
+	( WrappedComponent ) => ( props ) => {
+		const colorScheme = usePreferredColorScheme();
+		const isDarkMode = colorScheme === 'dark';
+
+		const getStyles = ( lightStyles, darkStyles ) => {
+			const finalDarkStyles = {
+				...lightStyles,
+				...darkStyles,
+			};
+
+			return isDarkMode ? finalDarkStyles : lightStyles;
+		};
+
+		return (
+			<WrappedComponent
+				preferredColorScheme={ colorScheme }
+				getStylesFromColorScheme={ getStyles }
+				{ ...props }
+			/>
+		);
+	},
+	'withPreferredColorScheme'
+);
+
+export default withPreferredColorScheme;
diff --git a/packages/compose/src/hooks/use-preferred-color-scheme/index.native.js b/packages/compose/src/hooks/use-preferred-color-scheme/index.native.js
new file mode 100644
index 0000000000000..c748b6830e516
--- /dev/null
+++ b/packages/compose/src/hooks/use-preferred-color-scheme/index.native.js
@@ -0,0 +1,13 @@
+/**
+ * External dependencies
+ */
+import { useDarkModeContext } from 'react-native-dark-mode';
+
+/**
+ * Returns the color scheme value when it changes. Possible values: [ 'light', 'dark' ]
+ *
+ * @return {string} return current color scheme.
+ */
+const usePreferredColorScheme = useDarkModeContext;
+
+export default usePreferredColorScheme;
diff --git a/packages/compose/src/index.native.js b/packages/compose/src/index.native.js
new file mode 100644
index 0000000000000..f410b60094d00
--- /dev/null
+++ b/packages/compose/src/index.native.js
@@ -0,0 +1,9 @@
+
+// Web exports
+export * from './index.js';
+
+// Higher-order components
+export { default as withPreferredColorScheme } from './higher-order/with-preferred-color-scheme';
+
+// Hooks
+export { default as usePreferredColorScheme } from './hooks/use-preferred-color-scheme';
diff --git a/packages/edit-post/src/components/header/header-toolbar/index.native.js b/packages/edit-post/src/components/header/header-toolbar/index.native.js
index 5da763a5dd8e5..6f87cc7bfc7df 100644
--- a/packages/edit-post/src/components/header/header-toolbar/index.native.js
+++ b/packages/edit-post/src/components/header/header-toolbar/index.native.js
@@ -7,7 +7,7 @@ import { ScrollView, View } from 'react-native';
 /**
  * WordPress dependencies
  */
-import { compose } from '@wordpress/compose';
+import { compose, withPreferredColorScheme } from '@wordpress/compose';
 import { withSelect, withDispatch } from '@wordpress/data';
 import { withViewportMatch } from '@wordpress/viewport';
 import { __ } from '@wordpress/i18n';
@@ -15,7 +15,7 @@ import {
 	Inserter,
 	BlockToolbar,
 } from '@wordpress/block-editor';
-import { Toolbar, ToolbarButton, withTheme } from '@wordpress/components';
+import { Toolbar, ToolbarButton } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -30,7 +30,7 @@ function HeaderToolbar( {
 	undo,
 	showInserter,
 	showKeyboardHideButton,
-	useStyle,
+	getStylesFromColorScheme,
 	onHideKeyboard,
 } ) {
 	const scrollViewRef = useRef( null );
@@ -39,7 +39,7 @@ function HeaderToolbar( {
 	};
 
 	return (
-		<View style={ useStyle( styles.container, styles.containerDark ) }>
+		<View style={ getStylesFromColorScheme( styles.container, styles.containerDark ) }>
 			<ScrollView
 				ref={ scrollViewRef }
 				onContentSizeChange={ scrollToStart }
@@ -108,5 +108,5 @@ export default compose( [
 		};
 	} ),
 	withViewportMatch( { isLargeViewport: 'medium' } ),
-	withTheme,
+	withPreferredColorScheme,
 ] )( HeaderToolbar );
diff --git a/packages/edit-post/src/components/layout/index.native.js b/packages/edit-post/src/components/layout/index.native.js
index 44bef0e3bec51..44d9a2d51899c 100644
--- a/packages/edit-post/src/components/layout/index.native.js
+++ b/packages/edit-post/src/components/layout/index.native.js
@@ -10,8 +10,8 @@ import { sendNativeEditorDidLayout } from 'react-native-gutenberg-bridge';
  */
 import { Component } from '@wordpress/element';
 import { withSelect } from '@wordpress/data';
-import { compose } from '@wordpress/compose';
-import { HTMLTextInput, KeyboardAvoidingView, ReadableContentView, withTheme } from '@wordpress/components';
+import { compose, withPreferredColorScheme } from '@wordpress/compose';
+import { HTMLTextInput, KeyboardAvoidingView, ReadableContentView } from '@wordpress/components';
 import { AutosaveMonitor } from '@wordpress/editor';
 
 /**
@@ -100,7 +100,7 @@ class Layout extends Component {
 	render() {
 		const {
 			mode,
-			useStyle,
+			getStylesFromColorScheme,
 		} = this.props;
 
 		const isHtmlView = mode === 'text';
@@ -116,9 +116,9 @@ class Layout extends Component {
 		};
 
 		return (
-			<SafeAreaView style={ useStyle( styles.container, styles.containerDark ) } onLayout={ this.onRootViewLayout }>
+			<SafeAreaView style={ getStylesFromColorScheme( styles.container, styles.containerDark ) } onLayout={ this.onRootViewLayout }>
 				<AutosaveMonitor />
-				<View style={ useStyle( styles.background, styles.backgroundDark ) }>
+				<View style={ getStylesFromColorScheme( styles.background, styles.backgroundDark ) }>
 					{ isHtmlView ? this.renderHTML() : this.renderVisual() }
 				</View>
 				<View style={ { flex: 0, flexBasis: marginBottom, height: marginBottom } } />
@@ -148,5 +148,5 @@ export default compose( [
 			mode: getEditorMode(),
 		};
 	} ),
-	withTheme,
+	withPreferredColorScheme,
 ] )( Layout );
diff --git a/packages/edit-post/src/components/visual-editor/index.native.js b/packages/edit-post/src/components/visual-editor/index.native.js
index 1d8c7dbc094af..44d7c2902cef4 100644
--- a/packages/edit-post/src/components/visual-editor/index.native.js
+++ b/packages/edit-post/src/components/visual-editor/index.native.js
@@ -4,10 +4,10 @@
 import { Component } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { withDispatch, withSelect } from '@wordpress/data';
-import { compose } from '@wordpress/compose';
+import { compose, withPreferredColorScheme } from '@wordpress/compose';
 import { BlockList } from '@wordpress/block-editor';
 import { PostTitle } from '@wordpress/editor';
-import { ReadableContentView, withTheme } from '@wordpress/components';
+import { ReadableContentView } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -20,9 +20,9 @@ class VisualEditor extends Component {
 			editTitle,
 			setTitleRef,
 			title,
-			useStyle,
+			getStylesFromColorScheme,
 		} = this.props;
-		const blockHolderFocusedStyle = useStyle( styles.blockHolderFocused, styles.blockHolderFocusedDark );
+		const blockHolderFocusedStyle = getStylesFromColorScheme( styles.blockHolderFocused, styles.blockHolderFocusedDark );
 		return (
 			<ReadableContentView>
 				<PostTitle
@@ -83,5 +83,5 @@ export default compose( [
 			},
 		};
 	} ),
-	withTheme,
+	withPreferredColorScheme,
 ] )( VisualEditor );
diff --git a/packages/format-library/src/link/test/modal.native.js b/packages/format-library/src/link/test/modal.native.js
index 44153ea3a4018..9d84f9f903ffb 100644
--- a/packages/format-library/src/link/test/modal.native.js
+++ b/packages/format-library/src/link/test/modal.native.js
@@ -53,8 +53,7 @@ describe( 'LinksUI', () => {
 
 		// Simulate user typing on the URL Cell.
 		const bottomSheet = wrapper.dive().find( 'BottomSheet' ).first();
-		// withTheme is type "_class", we search for it and dive into BottomSheetCell
-		const cell = bottomSheet.dive().find( '_class' ).first().dive();
+		const cell = bottomSheet.dive().find( 'WithPreferredColorScheme(BottomSheetCell)' ).first().dive();
 
 		cell.simulate( 'changeValue', 'wordpress.com' );
 
diff --git a/packages/rich-text/src/component/index.native.js b/packages/rich-text/src/component/index.native.js
index 9c3e44440dfd5..206680d3c8766 100644
--- a/packages/rich-text/src/component/index.native.js
+++ b/packages/rich-text/src/component/index.native.js
@@ -14,13 +14,12 @@ import memize from 'memize';
  * WordPress dependencies
  */
 import { Component } from '@wordpress/element';
-import { compose } from '@wordpress/compose';
+import { compose, withPreferredColorScheme } from '@wordpress/compose';
 import { withSelect } from '@wordpress/data';
 import { childrenBlock } from '@wordpress/blocks';
 import { decodeEntities } from '@wordpress/html-entities';
 import { BACKSPACE } from '@wordpress/keycodes';
 import { isURL } from '@wordpress/url';
-import { withTheme } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -771,7 +770,7 @@ export class RichText extends Component {
 			style,
 			__unstableIsSelected: isSelected,
 			children,
-			useStyle,
+			getStylesFromColorScheme,
 		} = this.props;
 
 		const record = this.getRecord();
@@ -782,7 +781,7 @@ export class RichText extends Component {
 			minHeight = style.minHeight;
 		}
 
-		const placeholderStyle = useStyle( styles.richTextPlaceholder, styles.richTextPlaceholderDark );
+		const placeholderStyle = getStylesFromColorScheme( styles.richTextPlaceholder, styles.richTextPlaceholderDark );
 
 		const {
 			color: defaultPlaceholderTextColor,
@@ -792,7 +791,7 @@ export class RichText extends Component {
 			color: defaultColor,
 			textDecorationColor: defaultTextDecorationColor,
 			fontFamily: defaultFontFamily,
-		} = useStyle( styles.richText, styles.richTextDark );
+		} = getStylesFromColorScheme( styles.richText, styles.richTextDark );
 
 		let selection = null;
 		if ( this.needsSelectionUpdate ) {
@@ -821,7 +820,7 @@ export class RichText extends Component {
 			this.firedAfterTextChanged = false;
 		}
 
-		const dynamicStyle = useStyle( style, styles.richTextDark );
+		const dynamicStyle = getStylesFromColorScheme( style, styles.richTextDark );
 
 		return (
 			<View>
@@ -884,5 +883,5 @@ export default compose( [
 	withSelect( ( select ) => ( {
 		formatTypes: select( 'core/rich-text' ).getFormatTypes(),
 	} ) ),
-	withTheme,
+	withPreferredColorScheme,
 ] )( RichText );
diff --git a/packages/rich-text/src/component/test/index.native.js b/packages/rich-text/src/component/test/index.native.js
index c4ff0da2b2f41..6b2bc12f855ff 100644
--- a/packages/rich-text/src/component/test/index.native.js
+++ b/packages/rich-text/src/component/test/index.native.js
@@ -8,7 +8,7 @@ import { shallow } from 'enzyme';
  */
 import { RichText } from '../index';
 
-const useStyle = () => {
+const getStylesFromColorScheme = () => {
 	return { color: 'white' };
 };
 
@@ -44,7 +44,7 @@ describe( 'RichText Native', () => {
 			} }
 			formatTypes={ [] }
 			onSelectionChange={ jest.fn() }
-			useStyle={ useStyle }
+			getStylesFromColorScheme={ getStylesFromColorScheme }
 		/> );
 
 		const event = {
diff --git a/test/native/setup.js b/test/native/setup.js
index f34947ed9958c..dd59faa5fe000 100644
--- a/test/native/setup.js
+++ b/test/native/setup.js
@@ -24,10 +24,7 @@ jest.mock( 'react-native-gutenberg-bridge', () => {
 
 jest.mock( 'react-native-dark-mode', () => {
 	return {
-		eventEmitter: {
-			on: jest.fn(),
-		},
-		initialMode: 'light',
+		useDarkModeContext: () => 'light',
 	};
 } );