[RNMobile] DarkMode improvements (WordPress#17309)

* Remove the need to import `useStyle` and pass the theme prop on every instance that `withStyle` is used

* Implement dark-mode refactor on all components

* Fix broken native tests

* Fix default block appender background color on DarkMode

* DarkMode: Make `useStyle` a class function

packages/block-editor/src/components/block-list/style.native.scss

@@ -8,10 +8,6 @@
 	flex: 1;
 }
 
-.listDark {
-	background: #1c1c1e;
-}
-
 .switch {
 	flex-direction: row;
 	justify-content: flex-start;

packages/components/src/mobile/dark-mode/index.native.js

@@ -4,27 +4,18 @@
 import { eventEmitter, initialMode } from 'react-native-dark-mode';
 import React from 'react';
 
-// This was failing on CI
+// Conditional needed to pass UI Tests 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.useStyle = this.useStyle.bind( this );
 
 			this.state = {
 				mode: initialMode,
@@ -46,8 +37,22 @@ export function withTheme( WrappedComponent ) {
 			}
 		}
 
+		useStyle( light, dark ) {
+			const isDarkMode = this.state.mode === 'dark';
+			const finalDark = {
+				...light,
+				...dark,
+			};
+
+			return isDarkMode ? finalDark : light;
+		}
+
 		render() {
-			return <WrappedComponent theme={ this.state.mode } { ...this.props } />;
+			return <WrappedComponent
+				theme={ this.state.mode }
+				useStyle={ this.useStyle }
+				{ ...this.props }
+			/>;
 		}
 	};
 }