From fa47c27eae3dd2dbf5fab8278960e22577e0c803 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rub=C3=A9n=20Norte?= <rubennorte@meta.com>
Date: Tue, 2 Apr 2024 06:27:05 -0700
Subject: [PATCH] Support dark theme in PerformanceApiExample in RNTester
 (#43705)

Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/43705

Changelog: [internal]

Reviewed By: rshest

Differential Revision: D55477744

fbshipit-source-id: 6960366330343678e493dd54292bda7df5a61e6a
---
 .../Performance/PerformanceApiExample.js      | 37 ++++++++++++++-----
 1 file changed, 28 insertions(+), 9 deletions(-)

diff --git a/packages/rn-tester/js/examples/Performance/PerformanceApiExample.js b/packages/rn-tester/js/examples/Performance/PerformanceApiExample.js
index 08a1629fe19..60b27444e79 100644
--- a/packages/rn-tester/js/examples/Performance/PerformanceApiExample.js
+++ b/packages/rn-tester/js/examples/Performance/PerformanceApiExample.js
@@ -14,7 +14,9 @@ import type MemoryInfo from 'react-native/src/private/webapis/performance/Memory
 import type ReactNativeStartupTiming from 'react-native/src/private/webapis/performance/ReactNativeStartupTiming';
 
 import RNTesterPage from '../../components/RNTesterPage';
+import {RNTesterThemeContext} from '../../components/RNTesterTheme';
 import * as React from 'react';
+import {useContext} from 'react';
 import {Button, StyleSheet, Text, View} from 'react-native';
 import Performance from 'react-native/src/private/webapis/performance/Performance';
 
@@ -22,6 +24,8 @@ const {useState, useCallback} = React;
 const performance = new Performance();
 
 function MemoryExample(): React.Node {
+  const theme = useContext(RNTesterThemeContext);
+
   // Memory API testing
   const [memoryInfo, setMemoryInfo] = useState<?MemoryInfo>(null);
   const onGetMemoryInfo = useCallback(() => {
@@ -34,13 +38,13 @@ function MemoryExample(): React.Node {
       <View style={styles.container}>
         <Button onPress={onGetMemoryInfo} title="Click to update memory info" />
         <View>
-          <Text>
+          <Text style={{color: theme.LabelColor}}>
             {`jsHeapSizeLimit: ${String(memoryInfo?.jsHeapSizeLimit)} bytes`}
           </Text>
-          <Text>
+          <Text style={{color: theme.LabelColor}}>
             {`totalJSHeapSize: ${String(memoryInfo?.totalJSHeapSize)} bytes`}
           </Text>
-          <Text>
+          <Text style={{color: theme.LabelColor}}>
             {`usedJSHeapSize: ${String(memoryInfo?.usedJSHeapSize)} bytes`}
           </Text>
         </View>
@@ -50,6 +54,8 @@ function MemoryExample(): React.Node {
 }
 
 function StartupTimingExample(): React.Node {
+  const theme = useContext(RNTesterThemeContext);
+
   // React Startup Timing API testing
   const [startUpTiming, setStartUpTiming] =
     useState<?ReactNativeStartupTiming>(null);
@@ -66,22 +72,35 @@ function StartupTimingExample(): React.Node {
           title="Click to update React startup timing"
         />
         <View>
-          <Text>{`startTime: ${String(startUpTiming?.startTime)} ms`}</Text>
-          <Text>{`initializeRuntimeStart: ${String(
+          <Text
+            style={{
+              color: theme.LabelColor,
+            }}>{`startTime: ${String(startUpTiming?.startTime)} ms`}</Text>
+          <Text
+            style={{
+              color: theme.LabelColor,
+            }}>{`initializeRuntimeStart: ${String(
             startUpTiming?.initializeRuntimeStart,
           )} ms`}</Text>
-          <Text>
+          <Text style={{color: theme.LabelColor}}>
             {`executeJavaScriptBundleEntryPointStart: ${String(
               startUpTiming?.executeJavaScriptBundleEntryPointStart,
             )} ms`}
           </Text>
-          <Text>{`executeJavaScriptBundleEntryPointEnd: ${String(
+          <Text
+            style={{
+              color: theme.LabelColor,
+            }}>{`executeJavaScriptBundleEntryPointEnd: ${String(
             startUpTiming?.executeJavaScriptBundleEntryPointEnd,
           )} ms`}</Text>
-          <Text>{`initializeRuntimeEnd: ${String(
+          <Text
+            style={{color: theme.LabelColor}}>{`initializeRuntimeEnd: ${String(
             startUpTiming?.initializeRuntimeEnd,
           )} ms`}</Text>
-          <Text>{`endTime: ${String(startUpTiming?.endTime)} ms`}</Text>
+          <Text
+            style={{
+              color: theme.LabelColor,
+            }}>{`endTime: ${String(startUpTiming?.endTime)} ms`}</Text>
         </View>
       </View>
     </RNTesterPage>