added localization to themescreen.

src/i18n/locales/ar.json

@@ -1193,5 +1193,35 @@
         "repo_format_hint": "التنسيق: https://raw.githubusercontent.com/username/repo/refs/heads/branch",
         "cancel": "إلغاء",
         "add": "إضافة"
+    },
+    "theme": {
+        "title": "سمات التطبيق",
+        "select_theme": "اختر السمة",
+        "create_custom": "إنشاء سمة مخصصة",
+        "options": "خيارات",
+        "use_dominant_color": "استخدام اللون المهيمن من العمل الفني",
+        "categories": {
+            "all": "كل السمات",
+            "dark": "سمات داكنة",
+            "colorful": "ملونة",
+            "custom": "سماتي"
+        },
+        "editor": {
+            "theme_name_placeholder": "اسم السمة",
+            "save": "حفظ",
+            "primary": "أساسي",
+            "secondary": "ثانوي",
+            "background": "خلفية",
+            "invalid_name_title": "اسم غير صالح",
+            "invalid_name_msg": "يرجى إدخال اسم سمة صالح"
+        },
+        "alerts": {
+            "delete_title": "حذف السمة",
+            "delete_msg": "هل أنت متأكد أنك تريد حذف \"{{name}}\"؟",
+            "ok": "حسناً",
+            "delete": "حذف",
+            "cancel": "إلغاء",
+            "back": "إعدادات"
+        }
     }
 }

src/i18n/locales/en.json

@@ -1193,5 +1193,35 @@
         "repo_format_hint": "Format: https://raw.githubusercontent.com/username/repo/refs/heads/branch",
         "cancel": "Cancel",
         "add": "Add"
+    },
+    "theme": {
+        "title": "App Themes",
+        "select_theme": "SELECT THEME",
+        "create_custom": "Create Custom Theme",
+        "options": "OPTIONS",
+        "use_dominant_color": "Use Dominant Color from Artwork",
+        "categories": {
+            "all": "All Themes",
+            "dark": "Dark Themes",
+            "colorful": "Colorful",
+            "custom": "My Themes"
+        },
+        "editor": {
+            "theme_name_placeholder": "Theme name",
+            "save": "Save",
+            "primary": "Primary",
+            "secondary": "Secondary",
+            "background": "Background",
+            "invalid_name_title": "Invalid Name",
+            "invalid_name_msg": "Please enter a valid theme name"
+        },
+        "alerts": {
+            "delete_title": "Delete Theme",
+            "delete_msg": "Are you sure you want to delete \"{{name}}\"?",
+            "ok": "OK",
+            "delete": "Delete",
+            "cancel": "Cancel",
+            "back": "Settings"
+        }
     }
 }

src/i18n/locales/es.json

@@ -1193,5 +1193,35 @@
         "repo_format_hint": "Formato: https://raw.githubusercontent.com/usuario/repo/rama",
         "cancel": "Cancelar",
         "add": "Añadir"
+    },
+    "theme": {
+        "title": "Temas de la App",
+        "select_theme": "SELECCIONAR TEMA",
+        "create_custom": "Crear Tema Personalizado",
+        "options": "OPCIONES",
+        "use_dominant_color": "Usar Color Dominante del Arte",
+        "categories": {
+            "all": "Todos los Temas",
+            "dark": "Temas Oscuros",
+            "colorful": "Coloridos",
+            "custom": "Mis Temas"
+        },
+        "editor": {
+            "theme_name_placeholder": "Nombre del tema",
+            "save": "Guardar",
+            "primary": "Primario",
+            "secondary": "Secundario",
+            "background": "Fondo",
+            "invalid_name_title": "Nombre Inválido",
+            "invalid_name_msg": "Por favor ingresa un nombre válido"
+        },
+        "alerts": {
+            "delete_title": "Eliminar Tema",
+            "delete_msg": "¿Estás seguro de que quieres eliminar \"{{name}}\"?",
+            "ok": "OK",
+            "delete": "Eliminar",
+            "cancel": "Cancelar",
+            "back": "Ajustes"
+        }
     }
 }

src/i18n/locales/fr.json

@@ -1193,5 +1193,35 @@
         "repo_format_hint": "Format : https://raw.githubusercontent.com/utilisateur/repo/refs/heads/branche",
         "cancel": "Annuler",
         "add": "Ajouter"
+    },
+    "theme": {
+        "title": "Thèmes de l'App",
+        "select_theme": "SÉLECTIONNER UN THÈME",
+        "create_custom": "Créer un Thème Personnalisé",
+        "options": "OPTIONS",
+        "use_dominant_color": "Utiliser la Couleur Dominante de l'Image",
+        "categories": {
+            "all": "Tous les Thèmes",
+            "dark": "Thèmes Sombres",
+            "colorful": "Colorés",
+            "custom": "Mes Thèmes"
+        },
+        "editor": {
+            "theme_name_placeholder": "Nom du thème",
+            "save": "Enregistrer",
+            "primary": "Primaire",
+            "secondary": "Secondaire",
+            "background": "Arrière-plan",
+            "invalid_name_title": "Nom Invalide",
+            "invalid_name_msg": "Veuillez entrer un nom de thème valide"
+        },
+        "alerts": {
+            "delete_title": "Supprimer le Thème",
+            "delete_msg": "Êtes-vous sûr de vouloir supprimer \"{{name}}\" ?",
+            "ok": "OK",
+            "delete": "Supprimer",
+            "cancel": "Annuler",
+            "back": "Paramètres"
+        }
     }
 }

src/i18n/locales/it.json

@@ -1193,5 +1193,35 @@
 		"repo_format_hint": "Formato: https://raw.githubusercontent.com/user/repo/refs/heads/branch",
 		"cancel": "Annulla",
 		"add": "Aggiungi"
+	},
+	"theme": {
+		"title": "Temi App",
+		"select_theme": "SELEZIONA TEMA",
+		"create_custom": "Crea Tema Personalizado",
+		"options": "OPZIONI",
+		"use_dominant_color": "Usa Colore Dominante dalla Copertina",
+		"categories": {
+			"all": "Tutti i Temi",
+			"dark": "Temi Scuri",
+			"colorful": "Colorati",
+			"custom": "I Miei Temi"
+		},
+		"editor": {
+			"theme_name_placeholder": "Nome tema",
+			"save": "Salva",
+			"primary": "Primario",
+			"secondary": "Secondario",
+			"background": "Sfondo",
+			"invalid_name_title": "Nome Non Valido",
+			"invalid_name_msg": "Inserisci un nome valido per il tema"
+		},
+		"alerts": {
+			"delete_title": "Elimina Tema",
+			"delete_msg": "Sei sicuro di voler eliminare \"{{name}}\"?",
+			"ok": "OK",
+			"delete": "Elimina",
+			"cancel": "Annulla",
+			"back": "Impostazioni"
+		}
 	}
 }

src/i18n/locales/pt.json

@@ -1159,5 +1159,35 @@
         "repo_format_hint": "Formato: https://raw.githubusercontent.com/username/repo/refs/heads/branch",
         "cancel": "Cancelar",
         "add": "Adicionar"
+    },
+    "theme": {
+        "title": "Temas do App",
+        "select_theme": "SELECIONAR TEMA",
+        "create_custom": "Criar Tema Personalizado",
+        "options": "OPÇÕES",
+        "use_dominant_color": "Usar Cor Dominante da Arte",
+        "categories": {
+            "all": "Todos os Temas",
+            "dark": "Temas Escuros",
+            "colorful": "Coloridos",
+            "custom": "Meus Temas"
+        },
+        "editor": {
+            "theme_name_placeholder": "Nome do tema",
+            "save": "Salvar",
+            "primary": "Primário",
+            "secondary": "Secundário",
+            "background": "Fundo",
+            "invalid_name_title": "Nome Inválido",
+            "invalid_name_msg": "Por favor insira um nome válido"
+        },
+        "alerts": {
+            "delete_title": "Excluir Tema",
+            "delete_msg": "Tem certeza que deseja excluir \"{{name}}\"?",
+            "ok": "OK",
+            "delete": "Excluir",
+            "cancel": "Cancelar",
+            "back": "Configurações"
+        }
     }
 }

src/screens/ThemeScreen.tsx

@@ -1,4 +1,5 @@
 import React, { useState, useCallback, useEffect, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
 import {
   View,
   Text,
@@ -171,152 +172,157 @@ const ThemeColorEditor: React.FC<ThemeColorEditorProps & {
   setAlertActions,
   setAlertVisible
 }) => {
-  const [themeName, setThemeName] = useState('Custom Theme');
+    const { t } = useTranslation();
-  const [selectedColorKey, setSelectedColorKey] = useState<ColorKey>('primary');
+    const [themeName, setThemeName] = useState(t('theme.editor.theme_name_placeholder') || 'Custom Theme');
-  const [themeColors, setThemeColors] = useState({
+    const [selectedColorKey, setSelectedColorKey] = useState<ColorKey>('primary');
-    primary: initialColors.primary,
+    const [themeColors, setThemeColors] = useState({
-    secondary: initialColors.secondary,
+      primary: initialColors.primary,
-    darkBackground: initialColors.darkBackground,
+      secondary: initialColors.secondary,
-  });
+      darkBackground: initialColors.darkBackground,
-
-  const handleColorChange = useCallback((color: string) => {
-    setThemeColors(prev => ({
-      ...prev,
-      [selectedColorKey]: color,
-    }));
-  }, [selectedColorKey]);
-
-  const handleSave = () => {
-    if (!themeName.trim()) {
-      setAlertTitle('Invalid Name');
-      setAlertMessage('Please enter a valid theme name');
-      setAlertActions([{ label: 'OK', onPress: () => {} }]);
-      setAlertVisible(true);
-      return;
-    }
-    onSave({ 
-      ...themeColors,
-      name: themeName 
     });
-  };
 
-  // Compact preview component
+    const handleColorChange = useCallback((color: string) => {
-  const ThemePreview = () => (
+      setThemeColors(prev => ({
-    <View style={[styles.previewContainer, { backgroundColor: themeColors.darkBackground }]}>
+        ...prev,
-      <View style={styles.previewContent}>
+        [selectedColorKey]: color,
-        {/* App header */}
+      }));
-        <View style={styles.previewHeader}>
+    }, [selectedColorKey]);
-          <View style={styles.previewHeaderTitle} />
-          <View style={styles.previewIconGroup}>
-            <View style={styles.previewIcon} />
-            <View style={styles.previewIcon} />
-          </View>
-        </View>
 
-        {/* Content area */}
+    const handleSave = () => {
-        <View style={styles.previewBody}>
+      if (!themeName.trim()) {
-          {/* Featured content poster */}
+        if (!themeName.trim()) {
-          <View style={styles.previewFeatured}>
+          setAlertTitle(t('theme.editor.invalid_name_title'));
-            <View style={styles.previewPosterGradient} />
+          setAlertMessage(t('theme.editor.invalid_name_msg'));
-            <View style={styles.previewTitle} />
+          setAlertActions([{ label: 'OK', onPress: () => { } }]);
-            <View style={styles.previewButtonRow}>
+          setAlertVisible(true);
-              <View style={[styles.previewPlayButton, { backgroundColor: themeColors.primary }]} />
+          return;
-              <View style={styles.previewActionButton} />
+        }
+        setAlertVisible(true);
+        return;
+      }
+      onSave({
+        ...themeColors,
+        name: themeName
+      });
+    };
+
+    // Compact preview component
+    const ThemePreview = () => (
+      <View style={[styles.previewContainer, { backgroundColor: themeColors.darkBackground }]}>
+        <View style={styles.previewContent}>
+          {/* App header */}
+          <View style={styles.previewHeader}>
+            <View style={styles.previewHeaderTitle} />
+            <View style={styles.previewIconGroup}>
+              <View style={styles.previewIcon} />
+              <View style={styles.previewIcon} />
             </View>
           </View>
 
-          {/* Content row */}
+          {/* Content area */}
-          <View style={styles.previewSectionHeader}>
+          <View style={styles.previewBody}>
-            <View style={styles.previewSectionTitle} />
+            {/* Featured content poster */}
-          </View>
+            <View style={styles.previewFeatured}>
-          <View style={styles.previewPosterRow}>
+              <View style={styles.previewPosterGradient} />
-            <View style={styles.previewPoster} />
+              <View style={styles.previewTitle} />
-            <View style={styles.previewPoster} />
+              <View style={styles.previewButtonRow}>
-            <View style={styles.previewPoster} />
+                <View style={[styles.previewPlayButton, { backgroundColor: themeColors.primary }]} />
+                <View style={styles.previewActionButton} />
+              </View>
+            </View>
+
+            {/* Content row */}
+            <View style={styles.previewSectionHeader}>
+              <View style={styles.previewSectionTitle} />
+            </View>
+            <View style={styles.previewPosterRow}>
+              <View style={styles.previewPoster} />
+              <View style={styles.previewPoster} />
+              <View style={styles.previewPoster} />
+            </View>
           </View>
         </View>
       </View>
-    </View>
+    );
-  );
 
-  return (
+    return (
-    <View style={styles.editorContainer}>
+      <View style={styles.editorContainer}>
-      <View style={styles.editorHeader}>
+        <View style={styles.editorHeader}>
-        <TouchableOpacity
+          <TouchableOpacity
-          style={styles.editorBackButton}
+            style={styles.editorBackButton}
-          onPress={onCancel}
+            onPress={onCancel}
-        >
+          >
-          <MaterialIcons name="arrow-back" size={20} color="#FFFFFF" />
+            <MaterialIcons name="arrow-back" size={20} color="#FFFFFF" />
-        </TouchableOpacity>
+          </TouchableOpacity>
-        <TextInput
+          <TextInput
-          style={styles.editorTitleInput}
+            style={styles.editorTitleInput}
-          value={themeName}
+            value={themeName}
-          onChangeText={setThemeName}
+            onChangeText={setThemeName}
-          placeholder="Theme name"
+            placeholder={t('theme.editor.theme_name_placeholder')}
-          placeholderTextColor="rgba(255,255,255,0.5)"
+            placeholderTextColor="rgba(255,255,255,0.5)"
-        />
-        <TouchableOpacity
-          style={styles.editorSaveButton}
-          onPress={handleSave}
-        >
-          <Text style={styles.saveButtonText}>Save</Text>
-        </TouchableOpacity>
-      </View>
-      
-      <View style={styles.editorBody}>
-        <View style={styles.colorSectionRow}>
-          <ThemePreview />
-          
-          <View style={styles.colorButtonsColumn}>
-            <TouchableOpacity
-              style={[
-                styles.colorSelectorButton,
-                selectedColorKey === 'primary' && styles.selectedColorButton,
-                { backgroundColor: themeColors.primary }
-              ]}
-              onPress={() => setSelectedColorKey('primary')}
-            >
-              <Text style={styles.colorButtonText}>Primary</Text>
-            </TouchableOpacity>
-            
-            <TouchableOpacity
-              style={[
-                styles.colorSelectorButton,
-                selectedColorKey === 'secondary' && styles.selectedColorButton,
-                { backgroundColor: themeColors.secondary }
-              ]}
-              onPress={() => setSelectedColorKey('secondary')}
-            >
-              <Text style={styles.colorButtonText}>Secondary</Text>
-            </TouchableOpacity>
-            
-            <TouchableOpacity
-              style={[
-                styles.colorSelectorButton,
-                selectedColorKey === 'darkBackground' && styles.selectedColorButton,
-                { backgroundColor: themeColors.darkBackground }
-              ]}
-              onPress={() => setSelectedColorKey('darkBackground')}
-            >
-              <Text style={styles.colorButtonText}>Background</Text>
-            </TouchableOpacity>
-          </View>
-        </View>
-        
-        <View style={styles.colorPickerContainer}>
-          <ColorPicker
-            color={themeColors[selectedColorKey]}
-            onColorChange={handleColorChange}
-            thumbSize={22}
-            sliderSize={22}
-            noSnap={true}
-            row={false}
           />
+          <TouchableOpacity
+            style={styles.editorSaveButton}
+            onPress={handleSave}
+          >
+            <Text style={styles.saveButtonText}>{t('theme.editor.save')}</Text>
+          </TouchableOpacity>
+        </View>
+
+        <View style={styles.editorBody}>
+          <View style={styles.colorSectionRow}>
+            <ThemePreview />
+
+            <View style={styles.colorButtonsColumn}>
+              <TouchableOpacity
+                style={[
+                  styles.colorSelectorButton,
+                  selectedColorKey === 'primary' && styles.selectedColorButton,
+                  { backgroundColor: themeColors.primary }
+                ]}
+                onPress={() => setSelectedColorKey('primary')}
+              >
+                <Text style={styles.colorButtonText}>{t('theme.editor.primary')}</Text>
+              </TouchableOpacity>
+
+              <TouchableOpacity
+                style={[
+                  styles.colorSelectorButton,
+                  selectedColorKey === 'secondary' && styles.selectedColorButton,
+                  { backgroundColor: themeColors.secondary }
+                ]}
+                onPress={() => setSelectedColorKey('secondary')}
+              >
+                <Text style={styles.colorButtonText}>{t('theme.editor.secondary')}</Text>
+              </TouchableOpacity>
+
+              <TouchableOpacity
+                style={[
+                  styles.colorSelectorButton,
+                  selectedColorKey === 'darkBackground' && styles.selectedColorButton,
+                  { backgroundColor: themeColors.darkBackground }
+                ]}
+                onPress={() => setSelectedColorKey('darkBackground')}
+              >
+                <Text style={styles.colorButtonText}>{t('theme.editor.background')}</Text>
+              </TouchableOpacity>
+            </View>
+          </View>
+
+          <View style={styles.colorPickerContainer}>
+            <ColorPicker
+              color={themeColors[selectedColorKey]}
+              onColorChange={handleColorChange}
+              thumbSize={22}
+              sliderSize={22}
+              noSnap={true}
+              row={false}
+            />
+          </View>
         </View>
       </View>
-    </View>
+    );
-  );
+  };
-};
 
 const ThemeScreen: React.FC = () => {
   const {
@@ -327,6 +333,7 @@ const ThemeScreen: React.FC = () => {
     updateCustomTheme,
     deleteCustomTheme
   } = useTheme();
+  const { t } = useTranslation();
   const navigation = useNavigation<NavigationProp<RootStackParamList>>();
   const insets = useSafeAreaInsets();
   const { settings, updateSetting } = useSettings();
@@ -336,6 +343,14 @@ const ThemeScreen: React.FC = () => {
     ? ANDROID_STATUSBAR_HEIGHT + 8
     : 8;
 
+  // Theme categories for organization
+  const THEME_CATEGORIES = [
+    { id: 'all', name: t('theme.categories.all') },
+    { id: 'dark', name: t('theme.categories.dark') },
+    { id: 'colorful', name: t('theme.categories.colorful') },
+    { id: 'custom', name: t('theme.categories.custom') },
+  ];
+
   const [isEditMode, setIsEditMode] = useState(false);
   const [editingTheme, setEditingTheme] = useState<Theme | null>(null);
   const [activeFilter, setActiveFilter] = useState('all');
@@ -375,9 +390,9 @@ const ThemeScreen: React.FC = () => {
         return availableThemes.filter(theme =>
           !theme.isEditable &&
           (theme.id === 'neon' ||
-           theme.id === 'retro' || 
+            theme.id === 'retro' ||
-           theme.id === 'sunset' || 
+            theme.id === 'sunset' ||
-           theme.id === 'amber')
+            theme.id === 'amber')
         );
       case 'custom':
         // User's custom themes
@@ -398,18 +413,18 @@ const ThemeScreen: React.FC = () => {
   }, []);
 
   const handleDeleteTheme = useCallback((theme: Theme) => {
-    setAlertTitle('Delete Theme');
+    setAlertTitle(t('theme.alerts.delete_title'));
-    setAlertMessage(`Are you sure you want to delete "${theme.name}"?`);
+    setAlertMessage(t('theme.alerts.delete_msg', { name: theme.name }));
     setAlertActions([
-      { label: 'Cancel', style: { color: '#888' }, onPress: () => {} },
+      { label: t('theme.alerts.cancel'), style: { color: '#888' }, onPress: () => { } },
       {
-        label: 'Delete',
+        label: t('theme.alerts.delete'),
         style: { color: currentTheme.colors.error },
         onPress: () => deleteCustomTheme(theme.id),
       },
     ]);
     setAlertVisible(true);
-  }, [deleteCustomTheme, currentTheme.colors.error]);
+  }, [deleteCustomTheme, currentTheme.colors.error, t]);
 
   const handleCreateTheme = useCallback(() => {
     setEditingTheme(null);
@@ -432,7 +447,7 @@ const ThemeScreen: React.FC = () => {
     } else {
       // Create new theme
       addCustomTheme({
-        name: themeData.name || 'Custom Theme',
+        name: themeData.name || t('theme.create_custom'),
         colors: {
           ...currentTheme.colors,
           primary: themeData.primary,
@@ -467,9 +482,9 @@ const ThemeScreen: React.FC = () => {
   const ThemeColorEditorWithAlert = (props: any) => {
     const handleSave = (themeName: string, themeColors: any, onSave: any) => {
       if (!themeName.trim()) {
-        setAlertTitle('Invalid Name');
+        setAlertTitle(t('theme.editor.invalid_name_title'));
-        setAlertMessage('Please enter a valid theme name');
+        setAlertMessage(t('theme.editor.invalid_name_msg'));
-        setAlertActions([{ label: 'OK', onPress: () => {} }]);
+        setAlertActions([{ label: 'OK', onPress: () => { } }]);
         setAlertVisible(true);
         return false;
       }
@@ -541,7 +556,7 @@ const ThemeScreen: React.FC = () => {
         >
           <MaterialIcons name="arrow-back" size={24} color={currentTheme.colors.text} />
           <Text style={[styles.backText, { color: currentTheme.colors.text }]}>
-            Settings
+            {t('theme.alerts.back') || t('settings.app_settings_label').split(' ')[0] || 'Settings'}
           </Text>
         </TouchableOpacity>
 
@@ -551,7 +566,7 @@ const ThemeScreen: React.FC = () => {
       </View>
 
       <Text style={[styles.headerTitle, { color: currentTheme.colors.text }]}>
-        App Themes
+        {t('theme.title')}
       </Text>
 
       {/* Category filter */}
@@ -579,7 +594,7 @@ const ThemeScreen: React.FC = () => {
         showsVerticalScrollIndicator={false}
       >
         <Text style={[styles.sectionTitle, { color: currentTheme.colors.textMuted }]}>
-          SELECT THEME
+          {t('theme.select_theme')}
         </Text>
 
         <View style={styles.themeGrid}>
@@ -604,16 +619,16 @@ const ThemeScreen: React.FC = () => {
           onPress={handleCreateTheme}
         >
           <MaterialIcons name="add" size={20} color="#FFFFFF" />
-          <Text style={styles.createButtonText}>Create Custom Theme</Text>
+          <Text style={styles.createButtonText}>{t('theme.create_custom')}</Text>
         </TouchableOpacity>
 
         <Text style={[styles.sectionTitle, { color: currentTheme.colors.textMuted, marginTop: 24 }]}>
-          OPTIONS
+          {t('theme.options')}
         </Text>
 
         <View style={styles.optionRow}>
           <Text style={[styles.optionLabel, { color: currentTheme.colors.text }]}>
-            Use Dominant Color from Artwork
+            {t('theme.use_dominant_color')}
           </Text>
           <Switch
             value={settings.useDominantBackgroundColor}
@@ -631,7 +646,7 @@ const ThemeScreen: React.FC = () => {
         actions={alertActions}
         onClose={() => setAlertVisible(false)}
       />
-    </SafeAreaView>
+    </SafeAreaView >
   );
 };