From 4afae151a0974dbba4f60dfe6664a39d5e9aa25d Mon Sep 17 00:00:00 2001
From: Siobhan Bamber <siobhan@automattic.com>
Date: Fri, 20 Oct 2023 14:02:03 +0100
Subject: [PATCH] [RNMobile] Synced Patterns: Ensure title is always visible
 (#55399)

Ensure the title section of Synced Patterns is visible within the editor when a block-based theme is used with a background that contrasts the device's dark/light mode.
---
 .../src/block/edit-title.native.js            | 29 ++++++++++---------
 packages/react-native-editor/CHANGELOG.md     |  1 +
 2 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/packages/block-library/src/block/edit-title.native.js b/packages/block-library/src/block/edit-title.native.js
index 0a574f2f0cfa83..d0c7d981202d99 100644
--- a/packages/block-library/src/block/edit-title.native.js
+++ b/packages/block-library/src/block/edit-title.native.js
@@ -6,7 +6,7 @@ import { Text, View } from 'react-native';
 /**
  * WordPress dependencies
  */
-import { Icon } from '@wordpress/components';
+import { Icon, useGlobalStyles } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { withPreferredColorScheme } from '@wordpress/compose';
 import { help, lock } from '@wordpress/icons';
@@ -17,18 +17,21 @@ import { help, lock } from '@wordpress/icons';
 import styles from './editor.scss';
 
 function EditTitle( { getStylesFromColorScheme, title } ) {
-	const lockIconStyle = getStylesFromColorScheme(
-		styles.lockIcon,
-		styles.lockIconDark
-	);
-	const titleStyle = getStylesFromColorScheme(
-		styles.title,
-		styles.titleDark
-	);
-	const infoIconStyle = getStylesFromColorScheme(
-		styles.infoIcon,
-		styles.infoIconDark
-	);
+	const globalStyles = useGlobalStyles();
+	const baseColors = globalStyles?.baseColors?.color;
+
+	const lockIconStyle = [
+		getStylesFromColorScheme( styles.lockIcon, styles.lockIconDark ),
+		baseColors && { color: baseColors.text },
+	];
+	const titleStyle = [
+		getStylesFromColorScheme( styles.title, styles.titleDark ),
+		baseColors && { color: baseColors.text },
+	];
+	const infoIconStyle = [
+		getStylesFromColorScheme( styles.infoIcon, styles.infoIconDark ),
+		baseColors && { color: baseColors.text },
+	];
 	const separatorStyle = getStylesFromColorScheme(
 		styles.separator,
 		styles.separatorDark
diff --git a/packages/react-native-editor/CHANGELOG.md b/packages/react-native-editor/CHANGELOG.md
index 3c5fe5766720b0..9077664ca60be2 100644
--- a/packages/react-native-editor/CHANGELOG.md
+++ b/packages/react-native-editor/CHANGELOG.md
@@ -10,6 +10,7 @@ For each user feature we should also add a importance categorization label  to i
 -->
 
 ## Unreleased
+-   [*] Synced Patterns: Fix visibility of heading section when used with block based themes in dark mode [#55399]
 -   [*] Classic block: Add option to convert to blocks [#55461]
 
 ## 1.106.0