Refactor PlayerSettingsScreen to integrate ThemeContext for dynamic theming

This update modifies the PlayerSettingsScreen component to utilize the ThemeContext, allowing for dynamic theming throughout the settings interface. Styles have been adjusted to reflect the current theme colors, enhancing visual consistency and user experience. Key changes include the removal of the isDarkMode prop, updates to text colors, and background settings, ensuring a cohesive interface that adapts to different themes.

src/screens/PlayerSettingsScreen.tsx

@@ -6,14 +6,13 @@ import {
   ScrollView,
   SafeAreaView,
   Platform,
-  useColorScheme,
   TouchableOpacity,
   StatusBar,
 } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
 import { useSettings, AppSettings } from '../hooks/useSettings';
-import { colors } from '../styles/colors';
 import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
+import { useTheme } from '../contexts/ThemeContext';
 
 const ANDROID_STATUSBAR_HEIGHT = StatusBar.currentHeight || 0;
 
@@ -21,7 +20,6 @@ interface SettingItemProps {
   title: string;
   description?: string;
   icon: string;
-  isDarkMode: boolean;
   isSelected: boolean;
   onPress: () => void;
   isLast?: boolean;
@@ -31,67 +29,69 @@ const SettingItem: React.FC<SettingItemProps> = ({
   title,
   description,
   icon,
-  isDarkMode,
   isSelected,
   onPress,
   isLast,
-}) => (
+}) => {
-  <TouchableOpacity
+  const { currentTheme } = useTheme();
-    onPress={onPress}
+  
-    activeOpacity={0.7}
+  return (
-    style={[
+    <TouchableOpacity
-      styles.settingItem,
+      onPress={onPress}
-      !isLast && styles.settingItemBorder,
+      activeOpacity={0.7}
-      { borderBottomColor: isDarkMode ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.05)' },
+      style={[
-    ]}
+        styles.settingItem,
-  >
+        !isLast && styles.settingItemBorder,
-    <View style={styles.settingContent}>
+        { borderBottomColor: 'rgba(255,255,255,0.08)' },
-      <View style={[
+      ]}
-        styles.settingIconContainer,
+    >
-        { backgroundColor: isDarkMode ? 'rgba(255,255,255,0.1)' : 'rgba(0,0,0,0.05)' }
+      <View style={styles.settingContent}>
-      ]}>
+        <View style={[
-        <MaterialIcons
+          styles.settingIconContainer,
-          name={icon}
+          { backgroundColor: 'rgba(255,255,255,0.1)' }
-          size={20}
+        ]}>
-          color={colors.primary}
+          <MaterialIcons
-        />
+            name={icon}
-      </View>
+            size={20}
-      <View style={styles.settingText}>
+            color={currentTheme.colors.primary}
-        <Text
+          />
-          style={[
+        </View>
-            styles.settingTitle,
+        <View style={styles.settingText}>
-            { color: isDarkMode ? colors.highEmphasis : colors.textDark },
-          ]}
-        >
-          {title}
-        </Text>
-        {description && (
           <Text
             style={[
-              styles.settingDescription,
+              styles.settingTitle,
-              { color: isDarkMode ? colors.mediumEmphasis : colors.textMutedDark },
+              { color: currentTheme.colors.text },
             ]}
           >
-            {description}
+            {title}
           </Text>
+          {description && (
+            <Text
+              style={[
+                styles.settingDescription,
+                { color: currentTheme.colors.textMuted },
+              ]}
+            >
+              {description}
+            </Text>
+          )}
+        </View>
+        {isSelected && (
+          <MaterialIcons
+            name="check"
+            size={24}
+            color={currentTheme.colors.primary}
+            style={styles.checkIcon}
+          />
         )}
       </View>
-      {isSelected && (
+    </TouchableOpacity>
-        <MaterialIcons
+  );
-          name="check"
+};
-          size={24}
-          color={colors.primary}
-          style={styles.checkIcon}
-        />
-      )}
-    </View>
-  </TouchableOpacity>
-);
 
 const PlayerSettingsScreen: React.FC = () => {
   const { settings, updateSetting } = useSettings();
-  const systemColorScheme = useColorScheme();
+  const { currentTheme } = useTheme();
-  const isDarkMode = systemColorScheme === 'dark' || settings.enableDarkMode;
   const navigation = useNavigation();
 
   const playerOptions = [
@@ -144,13 +144,13 @@ const PlayerSettingsScreen: React.FC = () => {
     <SafeAreaView
       style={[
         styles.container,
-        { backgroundColor: isDarkMode ? colors.darkBackground : '#F2F2F7' },
+        { backgroundColor: currentTheme.colors.darkBackground },
       ]}
     >
       <StatusBar
         translucent
         backgroundColor="transparent"
-        barStyle={isDarkMode ? "light-content" : "dark-content"}
+        barStyle="light-content"
       />
 
       <View style={styles.header}>
@@ -162,13 +162,13 @@ const PlayerSettingsScreen: React.FC = () => {
           <MaterialIcons
             name="arrow-back"
             size={24}
-            color={isDarkMode ? colors.highEmphasis : colors.textDark}
+            color={currentTheme.colors.text}
           />
         </TouchableOpacity>
         <Text
           style={[
             styles.headerTitle,
-            { color: isDarkMode ? colors.highEmphasis : colors.textDark },
+            { color: currentTheme.colors.text },
           ]}
         >
           Video Player
@@ -183,7 +183,7 @@ const PlayerSettingsScreen: React.FC = () => {
           <Text
             style={[
               styles.sectionTitle,
-              { color: isDarkMode ? colors.mediumEmphasis : colors.textMutedDark },
+              { color: currentTheme.colors.textMuted },
             ]}
           >
             PLAYER SELECTION
@@ -192,9 +192,7 @@ const PlayerSettingsScreen: React.FC = () => {
             style={[
               styles.card,
               {
-                backgroundColor: isDarkMode
+                backgroundColor: currentTheme.colors.elevation2,
-                  ? colors.elevation2
-                  : colors.white,
               },
             ]}
           >
@@ -204,7 +202,6 @@ const PlayerSettingsScreen: React.FC = () => {
                 title={option.title}
                 description={option.description}
                 icon={option.icon}
-                isDarkMode={isDarkMode}
                 isSelected={
                   Platform.OS === 'ios'
                     ? settings.preferredPlayer === option.id