From 998ab262ea758bd513983a4da3b70cef6ec008c2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateo=20Guzm=C3=A1n?= <info@mateoguzman.net>
Date: Mon, 11 Nov 2024 10:58:56 -0800
Subject: [PATCH] fix(rn-tester): pixel ratio example inputs not fully visible
 in dark mode (#47526)

Summary:
Found this small dark mode issue when navigating into the `PixelRatioExamples`

## Changelog:

[INTERNAL] [FIXED] - Fixing dark mode inputs for `PixelRatio` examples

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

Test Plan:
| Before  | After |
  | ---------- | ---------- |
  | ![Screenshot_1731090926](https://github.com/user-attachments/assets/9e20c44e-0152-4760-a436-3272b452a6a2) | ![Screenshot_1731090971](https://github.com/user-attachments/assets/17d038a8-b383-4c96-a30d-c7d213cc6f97) |

Reviewed By: lunaleaps

Differential Revision: D65735837

Pulled By: Abbondanzo

fbshipit-source-id: 5b0dc6d0ae45778723a92581cef00ce7ec4c56f1
---
 .../js/examples/PixelRatio/PixelRatioExample.js     | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/packages/rn-tester/js/examples/PixelRatio/PixelRatioExample.js b/packages/rn-tester/js/examples/PixelRatio/PixelRatioExample.js
index 15d5ec154ee..a2954aa0e40 100644
--- a/packages/rn-tester/js/examples/PixelRatio/PixelRatioExample.js
+++ b/packages/rn-tester/js/examples/PixelRatio/PixelRatioExample.js
@@ -11,10 +11,12 @@
 'use strict';
 
 import RNTesterText from '../../components/RNTesterText';
+import {RNTesterThemeContext} from '../../components/RNTesterTheme';
 import React, {useState} from 'react';
 import {Button, PixelRatio, StyleSheet, TextInput, View} from 'react-native';
 
 function LayoutSizeToPixel() {
+  const theme = React.useContext(RNTesterThemeContext);
   const [layoutDPSize, setLayoutDPSize] = useState<number>(0);
   const pixelSize = PixelRatio.getPixelSizeForLayoutSize(
     layoutDPSize ? layoutDPSize : 0,
@@ -33,7 +35,10 @@ function LayoutSizeToPixel() {
             Layout Size(dp):{' '}
           </RNTesterText>
           <TextInput
-            style={styles.input}
+            style={[
+              styles.input,
+              {color: theme.LabelColor, borderColor: theme.SeparatorColor},
+            ]}
             value={layoutDPSize ? layoutDPSize.toString() : ''}
             keyboardType={'numeric'}
             onChangeText={handleDPInputChange}
@@ -49,6 +54,7 @@ function LayoutSizeToPixel() {
 }
 
 function RoundToNearestPixel() {
+  const theme = React.useContext(RNTesterThemeContext);
   const [layoutDPSizeText, setLayoutDPSizeText] = useState('');
   const layoutDPSize = parseFloat(layoutDPSizeText);
 
@@ -68,7 +74,10 @@ function RoundToNearestPixel() {
             Layout Size(dp):{' '}
           </RNTesterText>
           <TextInput
-            style={styles.input}
+            style={[
+              styles.input,
+              {color: theme.LabelColor, borderColor: theme.SeparatorColor},
+            ]}
             value={layoutDPSizeText ? layoutDPSizeText.toString() : ''}
             keyboardType={'numeric'}
             onChangeText={handleDPInputChange}