Dark mode support for RCTPerfMonitor

[gorhom]

Summary

Hi There 👋,

While I'm developing on iOS with dark appearance enabled, i notice that Pref Monitor view doesn't support dark mode yet, so here is the PR to fix it :)

Changelog

[iOS] [Fixed] - Fix Pref Monitor in dark appearance

Test Plan

Run any React Native app on iOS > Turn on dark appearance

Before

After

[analysis-bot]

RNTester (Android/hermes/arm64-v8a): 3289088 bytes
RNTester (Android/hermes/armeabi-v7a): 3129344 bytes
RNTester (Android/hermes/x86): 3461120 bytes
RNTester (Android/hermes/x86_64): 3424256 bytes
RNTester (Android/jsc/arm64-v8a): 4446208 bytes
RNTester (Android/jsc/armeabi-v7a): 4268032 bytes
RNTester (Android/jsc/x86): 4358144 bytes
RNTester (Android/jsc/x86_64): 4644864 bytes

[analysis-bot]

RNTester.app (iOS): 10657792 bytes

[hramos]

This might work well in Dark Mode, but I suspect it breaks Light Mode. Can you use semantic colors instead? Here's a quick guide I've referred to in the past: https://nshipster.com/dark-mode/

[gorhom]

hi @hramos , thanks for taking a time to review this.

by reverting my commits and add systemBackgroundColor to the root container

if (@available(iOS 13.0, *)) {
  _container.backgroundColor = UIColor.systemBackgroundColor;
}

i got this :

is this okay ?

[gorhom]

hi @hramos , i have reverted my previous commits and only set the root container of RCTPerfMonitor background to UIColor.systemBackgroundColor, and this is how it looks in

Light

Dark

[analysis-bot]

RNTester (Android/hermes/arm64-v8a): 3289088 bytes
RNTester (Android/hermes/armeabi-v7a): 3129344 bytes
RNTester (Android/hermes/x86): 3461120 bytes
RNTester (Android/hermes/x86_64): 3424256 bytes
RNTester (Android/jsc/arm64-v8a): 4446208 bytes
RNTester (Android/jsc/armeabi-v7a): 4268032 bytes
RNTester (Android/jsc/x86): 4358144 bytes
RNTester (Android/jsc/x86_64): 4644864 bytes

[analysis-bot]

RNTester.app (iOS): 10657792 bytes

[facebook-github-bot]

@PeteTheHeat has imported this pull request. If you are a Facebook employee, you can view this diff on Phabricator.

[PeteTheHeat]

This looks good! Thanks for the PR.

[facebook-github-bot]

@PeteTheHeat has imported this pull request. If you are a Facebook employee, you can view this diff on Phabricator.

[PeteTheHeat]

Although this probably breaks anything pre iOS13. When I land it, I'll add another background color for that.

[gorhom]

@PeteTheHeat thanks for taking a time to review this :)

about worrying about breaking pre iOS 13, i think it should be fine since wrapped the background colour with available(iOS 13.0, *) annotation if-condition. Also pre iOS 13 has only light mode.

[PeteTheHeat]

But that line adding white background color was important. After this diff, on iOS 12, the background color will be transparent. I'm thinking:

if (@available(iOS 13.0, *)) { _container.backgroundColor = UIColor.systemBackgroundColor; } else { _container.backgroundColor = UIColor.whiteColor; }

[gorhom]

@PeteTheHeat , ohh yeah sure i will push it right now

[analysis-bot]

RNTester (Android/hermes/arm64-v8a): 3289088 bytes
RNTester (Android/hermes/armeabi-v7a): 3129344 bytes
RNTester (Android/hermes/x86): 3461120 bytes
RNTester (Android/hermes/x86_64): 3424256 bytes
RNTester (Android/jsc/arm64-v8a): 4446208 bytes
RNTester (Android/jsc/armeabi-v7a): 4268032 bytes
RNTester (Android/jsc/x86): 4358144 bytes
RNTester (Android/jsc/x86_64): 4644864 bytes

[analysis-bot]

RNTester.app (iOS): 10657792 bytes

[react-native-bot]

This pull request was successfully merged by @gorhom in 576ddfb.

^{When will my fix make it into a release? | Upcoming Releases}