feat(theme page) : add theme page

src/components/theme.js

@@ -0,0 +1,70 @@
+import React, { useEffect } from 'react';
+import { StatusBar, useColorScheme } from 'react-native';
+import { List, Appbar, useTheme } from 'react-native-paper';
+import { StyleSheet, View } from 'react-native';
+import { useSelector, useDispatch } from 'react-redux';
+import { setTheme as setReduxTheme, setSystemTheme } from '../appredux/actions';
+import Ionicons from 'react-native-vector-icons/Ionicons';
+
+export default function ThemeScreen({ navigation }) {
+    const theme = useTheme();
+    const isDarkTheme = theme.dark;
+    const dispatch = useDispatch();
+    const { theme: currentTheme, useSystemTheme } = useSelector(state => state.themeReducer);
+    const deviceTheme = useColorScheme();
+
+    useEffect(() => {
+        if (useSystemTheme) {
+            dispatch(setReduxTheme(deviceTheme));
+        }
+    }, [deviceTheme, useSystemTheme, dispatch]);
+
+    const toggleTheme = (newTheme) => {
+        if (newTheme === 'system') {
+            dispatch(setSystemTheme(true));
+            dispatch(setReduxTheme(deviceTheme));
+        } else {
+            dispatch(setSystemTheme(false));
+            dispatch(setReduxTheme(newTheme));
+        }
+    }
+
+    return (
+        <>
+            <StatusBar backgroundColor={isDarkTheme ? theme.colors.surface : theme.colors.white} barStyle={isDarkTheme ? 'light-content' : 'dark-content'} translucent={true} />
+            <Appbar.Header mode='center-aligned' style={{ backgroundColor: isDarkTheme ? theme.colors.surface : theme.colors.white, elevation: 4 }}>
+                <Appbar.BackAction color={isDarkTheme ? theme.colors.pureWhite : theme.colors.black} onPress={() => { navigation.goBack() }} />
+                <Appbar.Content titleStyle={{ fontWeight: 'bold' }} color={isDarkTheme ? theme.colors.pureWhite : theme.colors.black} title='Ganti Tampilan' />
+            </Appbar.Header>
+            <View style={{ flex: 1, backgroundColor: theme.colors.surface }}>
+                <View style={styles.container}>
+                    <List.Item
+                        title="Dark"
+                        description="Item description"
+                        left={props => <Ionicons {...props} size={25} name="moon" />}
+                        onPress={() => toggleTheme('dark')}
+                    />
+                    <List.Item
+                        title="Light"
+                        description="Item description"
+                        left={props => <Ionicons {...props} size={25} name="sunny" />}
+                        onPress={() => toggleTheme('light')}
+                    />
+                    <List.Item
+                        title="Use Device Setting"
+                        description="Item description"
+                        left={props => <Ionicons {...props} size={25} name="phone-portrait-sharp" />}
+                        onPress={() => toggleTheme('system')}
+                    />
+                </View>
+            </View>
+        </>
+    )
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        marginHorizontal: 10
+    },
+});