Add system-following Auto theme mode and bump release to 3.2.2

app/settings/theme.tsx

@@ -5,7 +5,6 @@ import {
   StyleSheet,
   ScrollView,
   TouchableOpacity,
-  Switch,
   ActivityIndicator,
 } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
@@ -43,7 +42,7 @@ function ColorSettingRow({ label, color, onPress, colors }: ColorSettingRowProps
 
 export default function ThemeSettingsScreen() {
   const router = useRouter();
-  const { isDark, toggleTheme, colors, reloadCustomColors } = useTheme();
+  const { isDark, themeMode, setThemeMode, colors, reloadCustomColors } = useTheme();
   const { showToast } = useToast();
   const { t } = useTranslation();
   const [colorPickerVisible, setColorPickerVisible] = useState(false);
@@ -89,12 +88,26 @@ export default function ThemeSettingsScreen() {
                   </Text>
                 </View>
               </View>
-              <Switch
-                value={isDark}
-                onValueChange={toggleTheme}
-                trackColor={{ false: colors.surfaceOutline, true: colors.primary }}
-                ios_backgroundColor={colors.surfaceOutline}
-              />
+              <View style={[styles.themeModeContainer, { borderColor: colors.surfaceOutline }]}>
+                {(['auto', 'light', 'dark'] as const).map((mode) => {
+                  const selected = themeMode === mode;
+                  return (
+                    <TouchableOpacity
+                      key={mode}
+                      style={[
+                        styles.themeModeButton,
+                        selected && { backgroundColor: colors.primary },
+                      ]}
+                      onPress={() => setThemeMode(mode)}
+                      activeOpacity={0.7}
+                    >
+                      <Text style={[styles.themeModeText, { color: selected ? '#FFFFFF' : colors.textSecondary }]}>
+                        {t(`screens.settings.themeMode${mode.charAt(0).toUpperCase()}${mode.slice(1)}`)}
+                      </Text>
+                    </TouchableOpacity>
+                  );
+                })}
+              </View>
             </View>
           </View>
         </View>
@@ -387,6 +400,21 @@ const styles = StyleSheet.create({
     fontSize: 12,
     marginTop: 2,
   },
+  themeModeContainer: {
+    flexDirection: 'row',
+    borderWidth: 1,
+    borderRadius: borderRadius.small,
+    overflow: 'hidden',
+  },
+  themeModeButton: {
+    paddingHorizontal: spacing.sm,
+    paddingVertical: spacing.xs,
+  },
+  themeModeText: {
+    ...typography.caption,
+    fontWeight: '600',
+    textTransform: 'capitalize',
+  },
   separator: {
     height: 1,
     marginHorizontal: spacing.md,
@@ -408,4 +436,3 @@ const styles = StyleSheet.create({
     borderWidth: 2,
   },
 });
-

constants/changelog.ts

@@ -11,6 +11,14 @@ export interface ChangelogRelease {
 }
 
 export const CHANGELOG: ChangelogRelease[] = [
+  {
+    version: '3.2.2',
+    date: '2026-05-29',
+    changes: [
+      'Added an Auto theme mode option that follows the iOS system light/dark appearance',
+      'Theme settings now include Auto, Light, and Dark mode choices',
+    ],
+  },
   {
     version: '3.2.1',
     date: '2026-05-29',

context/ThemeContext.tsx

@@ -1,4 +1,5 @@
 import React, { createContext, useContext, useState, useEffect, ReactNode } from 'react';
+import { useColorScheme } from 'react-native';
 import { storageService } from '@/services/storage';
 import { colorThemeManager, ColorTheme } from '@/services/color-theme-manager';
 
@@ -28,7 +29,9 @@ export interface ThemeColors {
 
 interface ThemeContextType {
   isDark: boolean;
-  toggleTheme: () => void;
+  themeMode: 'auto' | 'light' | 'dark';
+  setThemeMode: (mode: 'auto' | 'light' | 'dark') => Promise<void>;
+  toggleTheme: () => Promise<void>;
   reloadCustomColors: () => Promise<void>;
   colors: ThemeColors;
 }
@@ -109,9 +112,11 @@ const trueBlackColors = {
 const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
 
 export function ThemeProvider({ children }: { children: ReactNode }) {
-  const [isDark, setIsDark] = useState(true); // Default to dark theme
+  const systemColorScheme = useColorScheme();
+  const [themeMode, setThemeModeState] = useState<'auto' | 'light' | 'dark'>('dark');
   const [isLoading, setIsLoading] = useState(true);
   const [customColors, setCustomColors] = useState<ColorTheme | null>(null);
+  const isDark = themeMode === 'auto' ? systemColorScheme !== 'light' : themeMode === 'dark';
 
   useEffect(() => {
     loadThemePreference();
@@ -128,7 +133,11 @@ export function ThemeProvider({ children }: { children: ReactNode }) {
       const preferences = await storageService.getPreferences();
       const savedTheme = preferences.theme;
       if (savedTheme !== undefined) {
-        setIsDark(savedTheme === true || savedTheme === 'dark');
+        if (savedTheme === 'auto' || savedTheme === 'light' || savedTheme === 'dark') {
+          setThemeModeState(savedTheme);
+        } else {
+          setThemeModeState(savedTheme === true ? 'dark' : 'light');
+        }
       }
       // If no saved preference, default to dark (already set)
     } catch (error) {
@@ -147,23 +156,27 @@ export function ThemeProvider({ children }: { children: ReactNode }) {
     }
   };
 
-  const toggleTheme = async () => {
-    const newTheme = !isDark;
-    setIsDark(newTheme);
+  const setThemeMode = async (mode: 'auto' | 'light' | 'dark') => {
+    setThemeModeState(mode);
     try {
       const preferences = await storageService.getPreferences();
       await storageService.savePreferences({
         ...preferences,
-        theme: newTheme ? 'dark' : 'light',
+        theme: mode,
       });
-      // Reload custom colors for new theme
-      const custom = await colorThemeManager.getCustomColors(newTheme);
+      const nextIsDark = mode === 'auto' ? systemColorScheme !== 'light' : mode === 'dark';
+      const custom = await colorThemeManager.getCustomColors(nextIsDark);
       setCustomColors(custom);
     } catch (error) {
       // Ignore theme saving errors
     }
   };
 
+  const toggleTheme = async () => {
+    const newMode = isDark ? 'light' : 'dark';
+    await setThemeMode(newMode);
+  };
+
   const baseColors = isDark ? darkColors : lightColors;
   const colors = colorThemeManager.mergeColors(baseColors, customColors) as typeof baseColors;
 
@@ -172,6 +185,8 @@ export function ThemeProvider({ children }: { children: ReactNode }) {
     return (
       <ThemeContext.Provider
         value={{
+          themeMode: 'dark',
+          setThemeMode,
           isDark: true,
           toggleTheme,
           reloadCustomColors: loadCustomColors,
@@ -186,6 +201,8 @@ export function ThemeProvider({ children }: { children: ReactNode }) {
   return (
       <ThemeContext.Provider
         value={{
+          themeMode,
+          setThemeMode,
           isDark,
           toggleTheme,
           reloadCustomColors: loadCustomColors,
@@ -207,4 +224,3 @@ export function useTheme(): ThemeContextType {
 
 // Export for testing/debugging
 export { darkColors, lightColors, trueBlackColors };
-

locales/en/translation.json

@@ -198,6 +198,9 @@
       "architecture": "Architecture",
       "darkMode": "Dark Mode",
       "darkModeHint": "Switch between light and dark theme",
+      "themeModeAuto": "Auto",
+      "themeModeLight": "Light",
+      "themeModeDark": "Dark",
       "torrentStateColors": "TORRENT STATE COLORS",
       "advancedColors": "ADVANCED COLORS",
       "resetColors": "Reset Colors",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "qRemote",
-  "version": "3.2.1",
+  "version": "3.2.2",
   "main": "index.ts",
   "scripts": {
     "start": "expo start --go",

types/preferences.ts

@@ -46,7 +46,7 @@ export type AddTorrentDialogField =
   | 'cookie';
 
 export interface AppPreferences {
-  /** 'dark' | 'light'; legacy values stored as boolean are also accepted */
+  /** 'auto' | 'dark' | 'light'; legacy values stored as boolean are also accepted */
   theme: string | boolean;
 
   /** Per-theme color overrides, keyed by 'dark' | 'light' */