Mobile - HTML mode - use theme styles (#35515)

WordPress · Oct 13, 2021 · cf02f3a · cf02f3a
1 parent a2d95f7
commit cf02f3a
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 11 deletions.
diff --git a/packages/components/src/mobile/html-text-input/index.native.js b/packages/components/src/mobile/html-text-input/index.native.js
@@ -73,23 +73,30 @@ export class HTMLTextInput extends Component {
 	}
 
 	render() {
-		const { getStylesFromColorScheme } = this.props;
-		const htmlStyle = getStylesFromColorScheme(
-			styles.htmlView,
-			styles.htmlViewDark
-		);
-		const placeholderStyle = getStylesFromColorScheme(
-			styles.placeholder,
-			styles.placeholderDark
-		);
+		const { getStylesFromColorScheme, style } = this.props;
+		const titleStyle = [
+			styles.htmlViewTitle,
+			style?.text && { color: style.text },
+		];
+		const htmlStyle = [
+			getStylesFromColorScheme( styles.htmlView, styles.htmlViewDark ),
+			style?.text && { color: style.text },
+		];
+		const placeholderStyle = {
+			...getStylesFromColorScheme(
+				styles.placeholder,
+				styles.placeholderDark
+			),
+			...( style?.text && { color: style.text } ),
+		};
 		return (
 			<HTMLInputContainer parentHeight={ this.props.parentHeight }>
 				<TextInput
 					autoCorrect={ false }
 					accessibilityLabel="html-view-title"
 					textAlignVertical="center"
 					numberOfLines={ 1 }
-					style={ styles.htmlViewTitle }
+					style={ titleStyle }
 					value={ this.props.title }
 					placeholder={ __( 'Add title' ) }
 					placeholderTextColor={ placeholderStyle.color }

diff --git a/packages/edit-post/src/components/layout/index.native.js b/packages/edit-post/src/components/layout/index.native.js
@@ -91,7 +91,13 @@ class Layout extends Component {
 	}
 
 	renderHTML() {
-		return <HTMLTextInput parentHeight={ this.state.rootViewHeight } />;
+		const { globalStyles } = this.props;
+		return (
+			<HTMLTextInput
+				parentHeight={ this.state.rootViewHeight }
+				style={ globalStyles }
+			/>
+		);
 	}
 
 	renderVisual() {