From 371af3f1c2636e293d99899249485256e764cf3b Mon Sep 17 00:00:00 2001
From: Kacper Rozniata <56474758+krozniata@users.noreply.github.com>
Date: Thu, 11 Jan 2024 11:42:19 -0800
Subject: [PATCH] fix: dark mode in SnapshotExample in RNTester (#41222)

Summary:
This PR fixes issue in `RNTester` causing labels and image background to not be visible in dark mode in `SnapshotExample`

It also fixes issue with description in `Header` not being visible in other components examples when using dark mode

Before & After
<img width="505" alt="image" src="https://github.com/facebook/react-native/assets/56474758/ce87df69-4b79-48a0-b9be-4a7335329b78">

## Changelog:

[INTERNAL] [FIXED] - Fix dark mode in SnapshotExample in RNTester

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

Test Plan:
1. Launch `RNTester` with dark mode enabled
2. Open `Snapshot / Screenshot` example
3. All labels should be visible, image background should have white color

Reviewed By: cortinico

Differential Revision: D52685754

Pulled By: NickGerleman

fbshipit-source-id: 72f79be45d9c65e307553832592563461a64ff1d
---
 .../js/components/RNTesterModuleContainer.js  |  4 +++-
 .../js/examples/Snapshot/SnapshotExample.js   | 23 +++++++++++++------
 2 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/packages/rn-tester/js/components/RNTesterModuleContainer.js b/packages/rn-tester/js/components/RNTesterModuleContainer.js
index f68a5d8ec87ad4..6ab29649a760a2 100644
--- a/packages/rn-tester/js/components/RNTesterModuleContainer.js
+++ b/packages/rn-tester/js/components/RNTesterModuleContainer.js
@@ -139,7 +139,9 @@ function Header(props: {
               : props.theme.BackgroundColor,
         },
       ]}>
-      <Text style={styles.headerDescription}>{props.description}</Text>
+      <Text style={[styles.headerDescription, {color: props.theme.LabelColor}]}>
+        {props.description}
+      </Text>
     </View>
   );
 }
diff --git a/packages/rn-tester/js/examples/Snapshot/SnapshotExample.js b/packages/rn-tester/js/examples/Snapshot/SnapshotExample.js
index e46183beeb676f..eaeb033399f1e8 100644
--- a/packages/rn-tester/js/examples/Snapshot/SnapshotExample.js
+++ b/packages/rn-tester/js/examples/Snapshot/SnapshotExample.js
@@ -11,6 +11,7 @@
 'use strict';
 
 const ScreenshotManager = require('../../../NativeModuleExample/NativeScreenshotManager');
+const {RNTesterThemeContext} = require('../../components/RNTesterTheme');
 const React = require('react');
 const {Alert, Image, StyleSheet, Text, View} = require('react-native');
 
@@ -21,12 +22,21 @@ class ScreenshotExample extends React.Component<{...}, $FlowFixMeState> {
 
   render(): React.Node {
     return (
-      <View style={style.container}>
-        <Text onPress={this.takeScreenshot} style={style.button}>
-          Click to take a screenshot
-        </Text>
-        <Image style={style.image} source={{uri: this.state.uri}} />
-      </View>
+      <RNTesterThemeContext.Consumer>
+        {theme => (
+          <View style={style.container}>
+            <Text
+              onPress={this.takeScreenshot}
+              style={[style.button, {color: theme.LabelColor}]}>
+              Click to take a screenshot
+            </Text>
+            <Image
+              style={[style.image, {backgroundColor: theme.LabelColor}]}
+              source={{uri: this.state.uri}}
+            />
+          </View>
+        )}
+      </RNTesterThemeContext.Consumer>
     );
   }
 
@@ -48,7 +58,6 @@ const style = StyleSheet.create({
   image: {
     flex: 1,
     resizeMode: 'contain',
-    backgroundColor: 'black',
   },
 });