Matiss/Final-Year-Project
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(mobile): Implement persistent theme selection

Browse Source
This commit is contained in:
Matiss Jurevics
2025-12-06 14:08:00 +00:00
parent ed0faaa4d6
commit 19ff225762
7 changed files with 146 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
MobileApp/app/(tabs)/settings.tsx
View File

@@ -1,12 +1,15 @@
import { StyleSheet } from 'react-native';
import { StyleSheet, TouchableOpacity } from 'react-native';
import { ThemedText } from '@/components/themed-text';
import { ThemedView } from '@/components/themed-view';
import { IconSymbol } from '@/components/ui/icon-symbol';
import { Colors } from '@/constants/theme';
import { useTheme } from '@/context/ThemeContext';
import { useColorScheme } from '@/hooks/use-color-scheme';
export default function SettingsScreen() {
const colorScheme = useColorScheme();
const { themeMode, setThemeMode } = useTheme();
const theme = colorScheme ?? 'light';
const cardStyle = [
@@ -25,21 +28,32 @@ export default function SettingsScreen() {
</ThemedView>
<ThemedView style={styles.sectionHeader}>
<ThemedText type="subtitle">Account</ThemedText>
<ThemedText type="subtitle">Appearance</ThemedText>
</ThemedView>
<ThemedView style={cardStyle} variant="card">
<ThemedText style={styles.item}>Profile</ThemedText>
<ThemedText style={styles.item}>Notifications</ThemedText>
<ThemedText style={[styles.item, styles.lastItem]}>Privacy</ThemedText>
</ThemedView>
<TouchableOpacity
style={styles.item}
onPress={() => setThemeMode('light')}
>
<ThemedText>Light Mode</ThemedText>
{themeMode === 'light' && <IconSymbol name="checkmark" size={20} color={Colors[theme].tint} />}
</TouchableOpacity>
<ThemedView style={styles.sectionHeader}>
<ThemedText type="subtitle">General</ThemedText>
</ThemedView>
<ThemedView style={cardStyle} variant="card">
<ThemedText style={styles.item}>About</ThemedText>
<ThemedText style={styles.item}>Help & Support</ThemedText>
<ThemedText style={[styles.item, styles.lastItem]}>Sign Out</ThemedText>
<TouchableOpacity
style={styles.item}
onPress={() => setThemeMode('dark')}
>
<ThemedText>Dark Mode</ThemedText>
{themeMode === 'dark' && <IconSymbol name="checkmark" size={20} color={Colors[theme].tint} />}
</TouchableOpacity>
<TouchableOpacity
style={[styles.item, styles.lastItem]}
onPress={() => setThemeMode('system')}
>
<ThemedText>System Default</ThemedText>
{themeMode === 'system' && <IconSymbol name="checkmark" size={20} color={Colors[theme].tint} />}
</TouchableOpacity>
</ThemedView>
</ThemedView>
);
@@ -71,6 +85,9 @@ const styles = StyleSheet.create({
padding: 16,
borderBottomWidth: StyleSheet.hairlineWidth,
borderBottomColor: 'rgba(0,0,0,0.05)',
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
},
lastItem: {
borderBottomWidth: 0,