diff --git a/src/components/theme.js b/src/components/theme.js
new file mode 100644
index 0000000..40d71cc
--- /dev/null
+++ b/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 (
+ <>
+
+
+ { navigation.goBack() }} />
+
+
+
+
+ }
+ onPress={() => toggleTheme('dark')}
+ />
+ }
+ onPress={() => toggleTheme('light')}
+ />
+ }
+ onPress={() => toggleTheme('system')}
+ />
+
+
+ >
+ )
+}
+
+const styles = StyleSheet.create({
+ container: {
+ flex: 1,
+ marginHorizontal: 10
+ },
+});