[RNMobile] Certain elements become invisible when device's dark/light mode contrasts with editor's background

[SiobhyB]

Description

There are certain elements of the editor that are not visible in cases where the editor background is the opposite to the device's dark/light mode setting. That is, if the editor's background is white and the device has dark mode enabled, some elements will be invisible and vice versa.

Examples include:

• The quote block's side border.
• The heading text for synced patterns (reusable blocks).

Step-by-step reproduction instructions

1. Ensure dark mode is enabled on your device.
2. Activate a theme with support for global styles. For example, Byrne.
3. While in the site's /wp-admin area in a browser, navigate to the site editor (Appearance → Editor) and select a style with a white background.
4. In the app, navigate to the editor for any of the site's posts or pages.
5. Verify that the editor's background is white.
6. Add a Quote block to the editor.
7. Next, add a Synced Pattern.

Expected behaviour

I expected for there to be a clear indication that the quote block has been added, with some styling that distinguishes it from other blocks. I also expected to be able to view any text that was included as part of the Synced Pattern.

Actual behaviour

The text in the quote block appears slightly indented, but there are no clear visual indicators that sets the block apart. Setting the device back to light mode makes the block's border visible.

In addition, the heading text in the Synced Pattern is not readable.

Potentially related to wordpress-mobile/gutenberg-mobile#4468.

Screenshots or screen recording (optional)

Quote block

Expected	Actual

Synced Pattern

Expected	Actual

Device information

• Device: Pixel 6
• Operating system: Android 13
• WordPress app version: Tested with 22.4 (latest version at time of writing) and could also replicate in 22.2

[dcalhoun]

A couple of other issues relate to this as well: #37203, #54328.