diff --git a/packages/block-editor/src/components/block-list/style.native.scss b/packages/block-editor/src/components/block-list/style.native.scss
index 36be89c4c067c..e1f8e96abc948 100644
--- a/packages/block-editor/src/components/block-list/style.native.scss
+++ b/packages/block-editor/src/components/block-list/style.native.scss
@@ -8,6 +8,10 @@
 	flex: 1;
 }
 
+.listDark {
+	background: #1c1c1e;
+}
+
 .switch {
 	flex-direction: row;
 	justify-content: flex-start;
diff --git a/packages/block-editor/src/components/media-placeholder/styles.native.scss b/packages/block-editor/src/components/media-placeholder/styles.native.scss
index 03c7c73b2edfc..a0b7445debf66 100644
--- a/packages/block-editor/src/components/media-placeholder/styles.native.scss
+++ b/packages/block-editor/src/components/media-placeholder/styles.native.scss
@@ -19,6 +19,10 @@
 	background-color: $background-dark-secondary;
 }
 
+.emptyStateContainerDark {
+	background-color: $background-dark-secondary;
+}
+
 .emptyStateTitle {
 	text-align: center;
 	margin-top: 8;
diff --git a/packages/components/src/index.native.js b/packages/components/src/index.native.js
index c2c52ba08f0e5..431aa41027700 100644
--- a/packages/components/src/index.native.js
+++ b/packages/components/src/index.native.js
@@ -32,3 +32,4 @@ 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/dark-mode/index.native.js b/packages/components/src/mobile/dark-mode/index.native.js
new file mode 100644
index 0000000000000..d2b13020f027f
--- /dev/null
+++ b/packages/components/src/mobile/dark-mode/index.native.js
@@ -0,0 +1,53 @@
+/**
+ * External dependencies
+ */
+import { eventEmitter, initialMode } from 'react-native-dark-mode';
+import React from 'react';
+
+// This was failing on CI
+if ( eventEmitter.setMaxListeners ) {
+	eventEmitter.setMaxListeners( 150 );
+}
+
+export function useStyle( light, dark, theme ) {
+	const finalDark = {
+		...light,
+		...dark,
+	};
+
+	return theme === 'dark' ? finalDark : light;
+}
+
+// This function takes a component...
+export function withTheme( WrappedComponent ) {
+	return class extends React.Component {
+		constructor( props ) {
+			super( props );
+
+			this.onModeChanged = this.onModeChanged.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 );
+			}
+		}
+
+		render() {
+			return <WrappedComponent theme={ this.state.mode } { ...this.props } />;
+		}
+	};
+}