diff --git a/NewArch/src/ComponentListPage.tsx b/NewArch/src/ComponentListPage.tsx
index 3d75af68..7da34549 100644
--- a/NewArch/src/ComponentListPage.tsx
+++ b/NewArch/src/ComponentListPage.tsx
@@ -1,13 +1,13 @@
 'use strict';
 import {StyleSheet, View, Text, ScrollView, PlatformColor} from 'react-native';
 import React from 'react';
-import {useIsFocused} from './Navigation';
+import {useIsFocused, useTheme} from './Navigation';
 import RNGalleryList, {RNGalleryCategories} from './RNGalleryList';
 import {ScreenWrapper} from './components/ScreenWrapper';
 import {HomeComponentTile} from './components/ControlItem';
 import {usePageFocusManagement} from './hooks/usePageFocusManagement';
 
-const createStyles = () =>
+const createStyles = (colors: any) =>
   StyleSheet.create({
     container: {
       padding: 10,
@@ -26,6 +26,7 @@ const createStyles = () =>
       marginTop: 30,
       marginBottom: 10,
       fontSize: 20,
+      color: colors.text,
     },
     heading: {
       marginTop: 30,
@@ -53,7 +54,8 @@ const ListOfComponents = ({
   items,
   firstTileRef,
 }: ListOfComponentsProps) => {
-  const styles = createStyles();
+  const {colors} = useTheme();
+  const styles = createStyles(colors);
   return (
     <View
       accessibilityLabel={heading + 'components'}
@@ -112,7 +114,8 @@ type ComponentListPageProps = {
 };
 const ComponentListPage = ({route, navigation}: ComponentListPageProps) => {
   const firstTileRef = usePageFocusManagement(navigation);
-  const styles = createStyles();
+  const {colors} = useTheme();
+  const styles = createStyles(colors);
   const isScreenFocused = useIsFocused();
 
   const category = route.params?.category;
diff --git a/NewArch/src/Navigation.tsx b/NewArch/src/Navigation.tsx
index fc90d731..d2cc8bfc 100644
--- a/NewArch/src/Navigation.tsx
+++ b/NewArch/src/Navigation.tsx
@@ -9,6 +9,23 @@ import {
   useAnimatedValue,
 } from 'react-native';
 import type { PropsWithChildren } from 'react';
+import { ThemeContext } from './themes/Theme';
+import LightTheme from './themes/LightTheme';
+import DarkTheme from './themes/DarkTheme';
+import HighContrastTheme from './themes/HighContrastTheme';
+import useHighContrastState from './hooks/useHighContrastState';
+
+type Theme = {
+  dark: boolean;
+  colors: {
+    primary: string;
+    background: string;
+    card: string;
+    text: string;
+    border: string;
+    notification: string;
+  };
+};
 
 type NavigationAction = {
   type: string,
@@ -42,8 +59,10 @@ type RouteType = {
   params: any,
 }
 
-type NavigationContainerProps = PropsWithChildren<{}>;
-const NavigationContainer = ({children}: NavigationContainerProps) => {
+type NavigationContainerProps = PropsWithChildren<{
+  theme?: Theme;
+}>;
+const NavigationContainer = ({children, theme}: NavigationContainerProps) => {
   const [currentScreen, setCurrentScreen] = useState('Home');
   const [routes, setRoutes] = useState<RouteType[]>([{name: 'Home', key: 'Home', params: {}}]);
   const [parameters, setParameters] = useState({} as any);
@@ -324,14 +343,20 @@ const useIsFocused = () => {
 };
 
 const useTheme = () => {
-  return {colors: {
-    primary: '#0066cc',
-    background: '#FFFFFF',
-    card: '#FFFFFF',
-    text: '#505050',
-    border: '#E6E6E6',
-    notification: 'rgb(255, 59, 48)',
-  }};
+  const themeMode = React.useContext(ThemeContext);
+  const isHighContrast = useHighContrastState();
+  
+  // Return the appropriate theme based on the context and high contrast state
+  if (isHighContrast) {
+    return HighContrastTheme;
+  }
+  
+  if (themeMode === 'dark') {
+    return DarkTheme;
+  }
+  
+  // Default to light theme
+  return LightTheme;
 };
 
 const Theme = {
@@ -358,3 +383,4 @@ const DrawerActions = {
 };
 
 export { NavigationContainer, StackNavigator, StackScreen, createNativeStackNavigator, createDrawerNavigator, getDrawerStatusFromState, useIsFocused, useTheme, Theme, useNavigation, DrawerActions };
+export type { Theme };
diff --git a/NewArch/src/examples/ClipboardExamplePage.tsx b/NewArch/src/examples/ClipboardExamplePage.tsx
index e9f090d0..cfdb9be9 100644
--- a/NewArch/src/examples/ClipboardExamplePage.tsx
+++ b/NewArch/src/examples/ClipboardExamplePage.tsx
@@ -5,9 +5,11 @@ import {Example} from '../components/Example';
 import {Page} from '../components/Page';
 import Clipboard from '@react-native-clipboard/clipboard';
 import {usePageFocusManagement} from '../hooks/usePageFocusManagement';
+import {useTheme} from '../Navigation';
 
 export const ClipboardExamplePage: React.FunctionComponent<{navigation?: any}> = ({navigation}) => {
   const firstClipboardButtonRef = usePageFocusManagement(navigation);
+  const {colors} = useTheme();
   const [textToCopy, setTextToCopy] = useState(
     'This text will be copied to the clipboard',
   );
@@ -65,6 +67,15 @@ export const ClipboardExamplePage: React.FunctionComponent<{navigation?: any}> =
             accessibilityLabel="Example set text to copy"
             value={textToCopy}
             onChangeText={setTextToCopy}
+            style={{
+              color: colors.text,
+              backgroundColor: colors.card,
+              borderColor: colors.border,
+              borderWidth: 1,
+              borderRadius: 4,
+              padding: 8,
+              minWidth: 200,
+            }}
           />
         </View>
       </Example>
@@ -87,7 +98,7 @@ export const ClipboardExamplePage: React.FunctionComponent<{navigation?: any}> =
               );
             }}
           />
-          <Text>{textFromClipboard}</Text>
+          <Text style={{color: colors.text}}>{textFromClipboard}</Text>
         </View>
       </Example>
     </Page>
diff --git a/NewArch/src/examples/PressableExamplePage.tsx b/NewArch/src/examples/PressableExamplePage.tsx
index 82866c15..07aec23b 100644
--- a/NewArch/src/examples/PressableExamplePage.tsx
+++ b/NewArch/src/examples/PressableExamplePage.tsx
@@ -93,7 +93,7 @@ export const PressableExamplePage: React.FunctionComponent<{navigation?: any}> =
         <Pressable
           ref={firstPressableRef}
           accessibilityRole="button"
-          accessibilityLabel={'example pressable'}
+          accessibilityLabel={'Press me'}
           accessibilityHint={
             'click me to change text from Pressed to Press Me'
           }
@@ -113,7 +113,7 @@ export const PressableExamplePage: React.FunctionComponent<{navigation?: any}> =
       <Example title="A disabled Pressable component." code={example2jsx}>
         <Pressable
           accessibilityRole="button"
-          accessibilityLabel={'example disabled pressable'}
+          accessibilityLabel={'Disabled Pressable'}
           style={{
             width: 140,
             height: 50,
@@ -140,7 +140,7 @@ export const PressableExamplePage: React.FunctionComponent<{navigation?: any}> =
       <Example title="A Pressable component with counter." code={example3jsx}>
         <Pressable
           accessibilityRole="button"
-          accessibilityLabel={'example pressable with a counter'}
+          accessibilityLabel={'Press me'}
           accessibilityHint={'click me to increase the example counter'}
           onPress={() => {
             setTimesPressed((current) => current + 1);
@@ -180,7 +180,7 @@ export const PressableExamplePage: React.FunctionComponent<{navigation?: any}> =
         code={example4jsx}>
         <Pressable
           accessibilityRole="button"
-          accessibilityLabel={'example pressable with event feedback'}
+          accessibilityLabel={'Most recent event: press'}
           accessibilityHint={
             'click me to see the diffrent events (press, pressIn, pressOut, longPress)'
           }
diff --git a/NewArch/src/examples/TouchableWithoutFeedbackExamplePage.tsx b/NewArch/src/examples/TouchableWithoutFeedbackExamplePage.tsx
index db31b8e0..96b0d8a6 100644
--- a/NewArch/src/examples/TouchableWithoutFeedbackExamplePage.tsx
+++ b/NewArch/src/examples/TouchableWithoutFeedbackExamplePage.tsx
@@ -67,7 +67,7 @@ export const TouchableWithoutFeedbackExamplePage: React.FunctionComponent<{
             url: 'https://github.com/microsoft/react-native-windows/blob/main/vnext/src/Libraries/Components/Touchable/TouchableWithoutFeedback.windows.js',
           },
         ]}>
-        <Text style={{fontWeight: 'bold'}}>{pressableMsg}</Text>
+        <Text style={{fontWeight: 'bold', color: colors.text}}>{pressableMsg}</Text>
         <Example title="A simple TouchableWithoutFeedback." code={example1jsx}>
           <TouchableWithoutFeedback
             ref={firstTouchableWithoutFeedbackRef}
@@ -84,7 +84,7 @@ export const TouchableWithoutFeedbackExamplePage: React.FunctionComponent<{
             accessibilityLabel={'colored example TouchableWithoutFeedback'}
             onPress={() => {}}
             onAccessibilityTap={() => {}}>
-            <Text style={{color: 'green'}}>TouchableWithoutFeedback</Text>
+            <Text style={{color: colors.text}}>TouchableWithoutFeedback</Text>
           </TouchableWithoutFeedback>
         </Example>
         <Example
diff --git a/NewArch/src/examples/VirtualizedListExamplePage.tsx b/NewArch/src/examples/VirtualizedListExamplePage.tsx
index 796c7f2d..08433617 100644
--- a/NewArch/src/examples/VirtualizedListExamplePage.tsx
+++ b/NewArch/src/examples/VirtualizedListExamplePage.tsx
@@ -207,11 +207,15 @@ export const VirtualizedListExamplePage: React.FunctionComponent<{navigation?: a
       padding: 5,
       paddingHorizontal: 10,
       marginVertical: 3,
-      backgroundColor: PlatformColor('TextFillColorPrimary'),
+      backgroundColor: colors.primary,
     },
     title: {
       fontSize: 20,
-      color: PlatformColor('TextFillColorPrimary'),
+      color: colors.text,
+    },
+    titleSelected: {
+      fontSize: 20,
+      color: colors.background,
     },
   });
 
@@ -246,7 +250,7 @@ export const VirtualizedListExamplePage: React.FunctionComponent<{navigation?: a
         onAccessibilityTap={() => {
           setSelectedIndex(item.index);
         }}>
-        <Text style={styles.title}>{item.title}</Text>
+        <Text style={item.index === selectedIndex ? styles.titleSelected : styles.title}>{item.title}</Text>
       </TouchableHighlight>
     );
   };
@@ -267,7 +271,7 @@ export const VirtualizedListExamplePage: React.FunctionComponent<{navigation?: a
           }
         }}>
         <View style={styles.item}>
-          <Text style={styles.title}>{item.title}</Text>
+          <Text style={getList.includes(item.index) ? styles.titleSelected : styles.title}>{item.title}</Text>
         </View>
       </TouchableHighlight>
     ) : (
@@ -285,7 +289,7 @@ export const VirtualizedListExamplePage: React.FunctionComponent<{navigation?: a
         onAccessibilityTap={() => {
           setSelectedIndex2(item.index);
         }}>
-        <Text style={styles.title}>{item.title}</Text>
+        <Text style={item.index === selectedIndex2 ? styles.titleSelected : styles.title}>{item.title}</Text>
       </TouchableHighlight>
     );
   };
@@ -369,10 +373,10 @@ export const VirtualizedListExamplePage: React.FunctionComponent<{navigation?: a
             />
           </View>
           <View style={styles.selectionContainer}>
-            <Text>Selection Support</Text>
+            <Text style={{color: colors.text}}>Selection Support</Text>
             <Pressable
               accessibilityRole="button"
-              accessibilityLabel={'selection support pressable'}
+              accessibilityLabel={'Selection Support: Multiple'}
               accessibilityHint={'click me to change selection support'}
               onPress={() => {
                 if (selectedSupport === 'Single') {
@@ -381,8 +385,16 @@ export const VirtualizedListExamplePage: React.FunctionComponent<{navigation?: a
                   setSelectedSupport('Single');
                 }
               }}
+              style={{
+                backgroundColor: colors.card,
+                borderColor: colors.border,
+                borderWidth: 1,
+                borderRadius: 4,
+                padding: 8,
+                marginTop: 8,
+              }}
             >
-              <Text>
+              <Text style={{color: colors.text}}>
                 Selection Support: {selectedSupport}
               </Text>
             </Pressable>