[RNMobile] DarkMode improvements

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

@@ -1,6 +1,5 @@
 
 .blockListAppender {
-	background-color: $white;
 	padding-left: 16;
 	padding-right: 16;
 	padding-top: 12;

packages/block-editor/src/components/block-list/index.native.js

@@ -12,7 +12,7 @@ import { __ } from '@wordpress/i18n';
 import { withDispatch, withSelect } from '@wordpress/data';
 import { compose } from '@wordpress/compose';
 import { createBlock, isUnmodifiedDefaultBlock } from '@wordpress/blocks';
-import { KeyboardAwareFlatList, ReadableContentView, useStyle, withTheme } from '@wordpress/components';
+import { KeyboardAwareFlatList, ReadableContentView, withTheme } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -83,7 +83,7 @@ export class BlockList extends Component {
 					innerRef={ this.scrollViewInnerRef }
 					extraScrollHeight={ innerToolbarHeight + 10 }
 					keyboardShouldPersistTaps="always"
-					style={ useStyle( styles.list, styles.listDark, this.context ) }
+					style={ styles.list }
 					data={ blockClientIds }
 					extraData={ [ isFullyBordered ] }
 					keyExtractor={ identity }
@@ -113,7 +113,7 @@ export class BlockList extends Component {
 	}
 
 	renderItem( { item: clientId, index } ) {
-		const blockHolderFocusedStyle = useStyle( styles.blockHolderFocused, styles.blockHolderFocusedDark, this.props.theme );
+		const blockHolderFocusedStyle = this.props.useStyle( styles.blockHolderFocused, styles.blockHolderFocusedDark );
 		const { shouldShowBlockAtIndex, shouldShowInsertionPoint } = this.props;
 		return (
 			<ReadableContentView>
@@ -133,8 +133,8 @@ export class BlockList extends Component {
 	}
 
 	renderAddBlockSeparator() {
-		const lineStyle = useStyle( styles.lineStyleAddHere, styles.lineStyleAddHereDark, this.props.theme );
-		const labelStyle = useStyle( styles.labelStyleAddHere, styles.labelStyleAddHereDark, this.props.theme );
+		const lineStyle = this.props.useStyle( styles.lineStyleAddHere, styles.lineStyleAddHereDark );
+		const labelStyle = this.props.useStyle( styles.labelStyleAddHere, styles.labelStyleAddHereDark );
 		return (
 			<View style={ styles.containerStyleAddHere } >
 				<View style={ lineStyle }></View>

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/block-editor/src/components/inserter/index.native.js

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Dropdown, ToolbarButton, Dashicon, withTheme, useStyle } from '@wordpress/components';
+import { Dropdown, ToolbarButton, Dashicon, withTheme } from '@wordpress/components';
 import { Component } from '@wordpress/element';
 import { withSelect } from '@wordpress/data';
 import { compose } from '@wordpress/compose';
@@ -56,9 +56,9 @@ class Inserter extends Component {
 		const {
 			disabled,
 			renderToggle = defaultRenderToggle,
-			theme,
+			useStyle,
 		} = this.props;
-		const style = useStyle( styles.addBlockButton, styles.addBlockButtonDark, theme );
+		const style = useStyle( styles.addBlockButton, styles.addBlockButtonDark );
 		return renderToggle( { onToggle, isOpen, disabled, style } );
 	}
 

packages/block-editor/src/components/inserter/menu.native.js

@@ -14,7 +14,7 @@ import {
 } from '@wordpress/blocks';
 import { withDispatch, withSelect } from '@wordpress/data';
 import { withInstanceId, compose } from '@wordpress/compose';
-import { BottomSheet, Icon, withTheme, useStyle } from '@wordpress/components';
+import { BottomSheet, Icon, withTheme } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -61,11 +61,12 @@ export class InserterMenu extends Component {
 	}
 
 	render() {
+		const { useStyle } = this.props;
 		const numberOfColumns = this.calculateNumberOfColumns();
 		const bottomPadding = styles.contentBottomPadding;
-		const modalIconWrapperStyle = useStyle( styles.modalIconWrapper, styles.modalIconWrapperDark, this.props.theme );
-		const modalIconStyle = useStyle( styles.modalIcon, styles.modalIconDark, this.props.theme );
-		const modalItemLabelStyle = useStyle( styles.modalItemLabel, styles.modalItemLabelDark, this.props.theme );
+		const modalIconWrapperStyle = useStyle( styles.modalIconWrapper, styles.modalIconWrapperDark );
+		const modalIconStyle = useStyle( styles.modalIcon, styles.modalIconDark );
+		const modalItemLabelStyle = useStyle( styles.modalItemLabel, styles.modalItemLabelDark );
 
 		return (
 			<BottomSheet

packages/block-editor/src/components/media-placeholder/index.native.js

@@ -8,15 +8,15 @@ import { View, Text, TouchableWithoutFeedback } from 'react-native';
  */
 import { __, sprintf } from '@wordpress/i18n';
 import { MediaUpload, MEDIA_TYPE_IMAGE, MEDIA_TYPE_VIDEO } from '@wordpress/block-editor';
-import { withTheme, useStyle } from '@wordpress/components';
+import { withTheme } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
 import styles from './styles.scss';
 
 function MediaPlaceholder( props ) {
-	const { allowedTypes = [], labels = {}, icon, onSelect, theme } = props;
+	const { allowedTypes = [], labels = {}, icon, onSelect, useStyle } = props;
 
 	const isOneType = allowedTypes.length === 1;
 	const isImage = isOneType && allowedTypes.includes( MEDIA_TYPE_IMAGE );
@@ -48,8 +48,8 @@ function MediaPlaceholder( props ) {
 		accessibilityHint = __( 'Double tap to select a video' );
 	}
 
-	const emptyStateContainerStyle = useStyle( styles.emptyStateContainer, styles.emptyStateContainerDark, theme );
-	const emptyStateTitleStyle = useStyle( styles.emptyStateTitle, styles.emptyStateTitleDark, theme );
+	const emptyStateContainerStyle = useStyle( styles.emptyStateContainer, styles.emptyStateContainerDark );
+	const emptyStateTitleStyle = useStyle( styles.emptyStateTitle, styles.emptyStateTitleDark );
 
 	return (
 		<MediaUpload

packages/block-editor/src/components/warning/index.native.js

@@ -6,23 +6,23 @@ import { View, Text } from 'react-native';
 /**
  * WordPress dependencies
  */
-import { Icon, withTheme, useStyle } from '@wordpress/components';
+import { Icon, withTheme } from '@wordpress/components';
 import { normalizeIconObject } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
  */
 import styles from './style.scss';
 
-function Warning( { title, message, icon, iconClass, theme, ...viewProps } ) {
+function Warning( { title, message, icon, iconClass, theme, useStyle, ...viewProps } ) {
 	icon = icon && normalizeIconObject( icon );
 	const internalIconClass = 'warning-icon' + '-' + theme;
-	const titleStyle = useStyle( styles.title, styles.titleDark, theme );
-	const messageStyle = useStyle( styles.message, styles.messageDark, theme );
+	const titleStyle = useStyle( styles.title, styles.titleDark );
+	const messageStyle = useStyle( styles.message, styles.messageDark );
 
 	return (
 		<View
-			style={ useStyle( styles.container, styles.containerDark, theme ) }
+			style={ useStyle( styles.container, styles.containerDark ) }
 			{ ...viewProps }
 		>
 			{ icon && (

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, useStyle } from '@wordpress/components';
+import { withTheme } from '@wordpress/components';
 
 /**
  * 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, theme } = props;
-	const codeStyle = useStyle( styles.blockCode, styles.blockCodeDark, theme );
-	const placeholderStyle = useStyle( styles.placeholder, styles.placeholderDark, theme );
+	const { attributes, setAttributes, style, onFocus, onBlur, useStyle } = props;
+	const codeStyle = useStyle( styles.blockCode, styles.blockCodeDark );
+	const placeholderStyle = useStyle( styles.placeholder, styles.placeholderDark );
 
 	return (
 		<View>

packages/block-library/src/image/edit.native.js

@@ -20,7 +20,6 @@ import {
 	Toolbar,
 	ToolbarButton,
 	withTheme,
-	useStyle,
 } from '@wordpress/components';
 
 import {
@@ -195,12 +194,11 @@ class ImageEdit extends React.Component {
 	}
 
 	getIcon( isRetryIcon ) {
-		const iconStyle = useStyle( styles.icon, styles.iconDark, this.props.theme );
-
 		if ( isRetryIcon ) {
 			return <Icon icon={ SvgIconRetry } { ...styles.iconRetry } />;
 		}
 
+		const iconStyle = this.props.useStyle( styles.icon, styles.iconDark );
 		return <Icon icon={ SvgIcon } { ...iconStyle } />;
 	}
 

packages/block-library/src/missing/edit.native.js

@@ -6,7 +6,7 @@ import { View, Text } from 'react-native';
 /**
  * WordPress dependencies
  */
-import { Icon, withTheme, useStyle } from '@wordpress/components';
+import { Icon, withTheme } from '@wordpress/components';
 import { coreBlocks } from '@wordpress/block-library';
 import { normalizeIconObject } from '@wordpress/blocks';
 import { Component } from '@wordpress/element';
@@ -20,17 +20,17 @@ import styles from './style.scss';
 export class UnsupportedBlockEdit extends Component {
 	render() {
 		const { originalName } = this.props.attributes;
-		const theme = this.props.theme;
+		const { useStyle, theme } = this.props;
 		const blockType = coreBlocks[ originalName ];
 
 		const title = blockType ? blockType.settings.title : __( 'Unsupported' );
-		const titleStyle = useStyle( styles.unsupportedBlockMessage, styles.unsupportedBlockMessageDark, theme );
+		const titleStyle = useStyle( styles.unsupportedBlockMessage, styles.unsupportedBlockMessageDark );
 
 		const icon = blockType ? normalizeIconObject( blockType.settings.icon ) : 'admin-plugins';
-		const iconStyle = useStyle( styles.unsupportedBlockIcon, styles.unsupportedBlockIconDark, theme );
+		const iconStyle = useStyle( styles.unsupportedBlockIcon, styles.unsupportedBlockIconDark );
 		const iconClassName = 'unsupported-icon' + '-' + theme;
 		return (
-			<View style={ useStyle( styles.unsupportedBlock, styles.unsupportedBlockDark, theme ) }>
+			<View style={ useStyle( styles.unsupportedBlock, styles.unsupportedBlockDark ) }>
 				<Icon className={ iconClassName } icon={ icon && icon.src ? icon.src : icon } color={ iconStyle.color } />
 				<Text style={ titleStyle }>{ title }</Text>
 			</View>

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, useStyle } from '@wordpress/components';
+import { withTheme } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -26,11 +26,13 @@ export class MoreEdit extends Component {
 	}
 
 	render() {
-		const { customText } = this.props.attributes;
+		const { attributes, useStyle } = this.props;
+		const { customText } = attributes;
 		const { defaultText } = this.state;
+
 		const content = customText || defaultText;
-		const textStyle = useStyle( styles.moreText, styles.moreTextDark, this.props.theme );
-		const lineStyle = useStyle( styles.moreLine, styles.moreLineDark, this.props.theme );
+		const textStyle = useStyle( styles.moreText, styles.moreTextDark );
+		const lineStyle = useStyle( styles.moreLine, styles.moreLineDark );
 
 		return (
 			<View>

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, useStyle } from '@wordpress/components';
+import { withTheme } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
 import styles from './editor.scss';
 
-export function NextPageEdit( { attributes, isSelected, onFocus, theme } ) {
+export function NextPageEdit( { attributes, isSelected, onFocus, useStyle } ) {
 	const { customText = __( 'Page break' ) } = attributes;
 	const accessibilityTitle = attributes.customText || '';
 	const accessibilityState = isSelected ? [ 'selected' ] : [];
-	const textStyle = useStyle( styles.nextpageText, styles.nextpageTextDark, theme );
-	const lineStyle = useStyle( styles.nextpageLine, styles.nextpageLineDark, theme );
+	const textStyle = useStyle( styles.nextpageText, styles.nextpageTextDark );
+	const lineStyle = useStyle( styles.nextpageLine, styles.nextpageLineDark );
 
 	return (
 		<View

packages/block-library/src/video/edit.native.js

@@ -21,7 +21,6 @@ import {
 	Toolbar,
 	ToolbarButton,
 	withTheme,
-	useStyle,
 } from '@wordpress/components';
 
 import {
@@ -150,12 +149,11 @@ class VideoEdit extends React.Component {
 	}
 
 	getIcon( isRetryIcon, isMediaPlaceholder ) {
-		const iconStyle = useStyle( style.icon, style.iconDark, this.props.theme );
-
 		if ( isRetryIcon ) {
 			return <Icon icon={ SvgIconRetry } { ...style.icon } />;
 		}
 
+		const iconStyle = this.props.useStyle( style.icon, style.iconDark );
 		return <Icon icon={ SvgIcon } { ...( ! isMediaPlaceholder ? style.iconUploading : iconStyle ) } />;
 	}
 

packages/components/src/mobile/bottom-sheet/cell.native.js

@@ -16,8 +16,7 @@ import { __, _x, sprintf } from '@wordpress/i18n';
  */
 import styles from './styles.scss';
 import platformStyles from './cellStyles.scss';
-// `useStyle as getStyle`: Hack to avoid lint thinking this is a React Hook
-import { withTheme, useStyle as getStyle } from '../dark-mode';
+import { withTheme } from '../dark-mode';
 
 class BottomSheetCell extends Component {
 	constructor( props ) {
@@ -50,14 +49,14 @@ class BottomSheetCell extends Component {
 			editable = true,
 			separatorType,
 			style = {},
-			theme,
+			useStyle,
 			...valueProps
 		} = this.props;
 
 		const showValue = value !== undefined;
 		const isValueEditable = editable && onChangeValue !== undefined;
-		const cellLabelStyle = getStyle( styles.cellLabel, styles.cellTextDark, theme );
-		const cellLabelCenteredStyle = getStyle( styles.cellLabelCentered, styles.cellTextDark, theme );
+		const cellLabelStyle = useStyle( styles.cellLabel, styles.cellTextDark );
+		const cellLabelCenteredStyle = useStyle( styles.cellLabelCentered, styles.cellTextDark );
 		const defaultLabelStyle = showValue || icon !== undefined ? cellLabelStyle : cellLabelCenteredStyle;
 		const drawSeparator = ( separatorType && separatorType !== 'none' ) || separatorStyle === undefined;
 
@@ -81,8 +80,8 @@ class BottomSheetCell extends Component {
 
 		const separatorStyle = () => {
 			//eslint-disable-next-line @wordpress/no-unused-vars-before-return
-			const defaultSeparatorStyle = getStyle( styles.separator, styles.separatorDark, theme );
-			const cellSeparatorStyle = getStyle( styles.cellSeparator, styles.cellSeparatorDark, theme );
+			const defaultSeparatorStyle = this.props.useStyle( styles.separator, styles.separatorDark );
+			const cellSeparatorStyle = this.props.useStyle( styles.cellSeparator, styles.cellSeparatorDark );
 			const leftMarginStyle = { ...cellSeparatorStyle, ...platformStyles.separatorMarginLeft };
 			switch ( separatorType ) {
 				case 'leftMargin':
@@ -98,7 +97,7 @@ class BottomSheetCell extends Component {
 
 		const getValueComponent = () => {
 			const styleRTL = I18nManager.isRTL && styles.cellValueRTL;
-			const cellValueStyle = getStyle( styles.cellValue, styles.cellTextDark, theme );
+			const cellValueStyle = this.props.useStyle( styles.cellValue, styles.cellTextDark );
 			const finalStyle = { ...cellValueStyle, ...valueStyle, ...styleRTL };
 
 			// To be able to show the `middle` ellipsizeMode on editable cells
@@ -151,7 +150,7 @@ class BottomSheetCell extends Component {
 				);
 		};
 
-		const iconStyle = getStyle( styles.icon, styles.iconDark, theme );
+		const iconStyle = useStyle( styles.icon, styles.iconDark );
 
 		return (
 			<TouchableOpacity

packages/components/src/mobile/bottom-sheet/index.native.js

@@ -19,7 +19,7 @@ import Cell from './cell';
 import PickerCell from './picker-cell';
 import SwitchCell from './switch-cell';
 import KeyboardAvoidingView from './keyboard-avoiding-view';
-import { withTheme, useStyle } from '../dark-mode';
+import { withTheme } from '../dark-mode';
 
 class BottomSheet extends Component {
 	constructor() {
@@ -64,7 +64,7 @@ class BottomSheet extends Component {
 			hideHeader,
 			style = {},
 			contentStyle = {},
-			theme,
+			useStyle,
 		} = this.props;
 
 		const panResponder = PanResponder.create( {
@@ -120,7 +120,7 @@ class BottomSheet extends Component {
 			},
 		};
 
-		const backgroundStyle = useStyle( styles.background, styles.backgroundDark, theme );
+		const backgroundStyle = useStyle( styles.background, styles.backgroundDark );
 
 		return (
 			<Modal