refactor(settings): split SettingsScreen into section components and pure helpers

SettingsScreen CC 23 -> below 10. Form parsing, change detection and the dark-theme check moved to utils/ with unit tests; the dark switch now reads the OS scheme instead of comparing the background colour. Adds characterization tests for the screen.

components/settings/AppearanceCard.tsx

@@ -0,0 +1,61 @@
+import { useColorScheme } from '@/hooks/useColorScheme';
+import { useThemeColor } from '@/hooks/useThemeColor';
+import { useAppStore } from '@/store/useAppStore';
+import { isDarkTheme } from '@/utils/theme';
+import { Moon } from 'lucide-react-native';
+import React from 'react';
+import { StyleSheet, Switch, Text, View } from 'react-native';
+import { SettingsSection } from './SettingsSection';
+
+export function AppearanceCard() {
+    const colors = useThemeColor();
+    const systemScheme = useColorScheme();
+    const themePreference = useAppStore(state => state.theme);
+    const setTheme = useAppStore(state => state.setTheme);
+
+    const isDarkMode = isDarkTheme(themePreference, systemScheme);
+    const toggleTheme = () => setTheme(isDarkMode ? 'light' : 'dark');
+
+    return (
+        <SettingsSection title="APPEARANCE">
+            <View style={styles.row}>
+                <View style={styles.rowIconWrap}>
+                    <Moon size={20} color={colors.text} />
+                </View>
+                <View style={styles.rowText}>
+                    <Text style={[styles.rowTitle, { color: colors.text }]}>Dark Mode</Text>
+                    <Text style={[styles.rowSubtitle, { color: colors.textMuted }]}>Toggle sleek dark theme</Text>
+                </View>
+                <Switch
+                    value={isDarkMode}
+                    onValueChange={toggleTheme}
+                    trackColor={{ false: '#E2E8F0', true: colors.tint }}
+                    thumbColor={'#FFFFFF'}
+                />
+            </View>
+        </SettingsSection>
+    );
+}
+
+const styles = StyleSheet.create({
+    row: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        paddingVertical: 4,
+    },
+    rowIconWrap: {
+        marginRight: 12,
+    },
+    rowText: {
+        flex: 1,
+    },
+    rowTitle: {
+        fontSize: 16,
+        fontWeight: '600',
+        marginBottom: 4,
+    },
+    rowSubtitle: {
+        fontSize: 14,
+    },
+});