From 1a2f47bf7cea180507b5df178601959879487645 Mon Sep 17 00:00:00 2001
From: alex <alex@roese.dev>
Date: Wed, 12 Jul 2023 20:24:06 +0000
Subject: [PATCH] modal

---
 App.js                        |  2 +-
 src/Screens/Settings/index.js | 98 +++++++++++++++++++++++++++++++----
 2 files changed, 89 insertions(+), 11 deletions(-)

diff --git a/App.js b/App.js
index e913937..47bbd91 100644
--- a/App.js
+++ b/App.js
@@ -63,7 +63,7 @@ export function MyApp() {
         <NavigationContainer>
           <Drawer.Navigator
             screenOptions={{
-              headerShown: false,
+              // headerShown: false,
               drawerStyle: {
                 backgroundColor: appContext.appTheme.drawer.backgroundColor,
               },
diff --git a/src/Screens/Settings/index.js b/src/Screens/Settings/index.js
index e8d27d6..19cd112 100644
--- a/src/Screens/Settings/index.js
+++ b/src/Screens/Settings/index.js
@@ -105,13 +105,28 @@ export default function SettingsScreen() {
             onValueChange={(e) => appContext.setUserIsDeveloperModeEnabled(e)}
           />
         </View>
-        <Text onPress={() => setModalVisible(true)}>Test</Text>
+
+        <TouchableOpacity onPress={() => setModalVisible(true)}>
+          <View
+            style={{
+              flexDirection: "row",
+              alignItems: "center",
+              justifyContent: "space-between",
+            }}
+          >
+            <Text style={{ color: appContext.appTheme.text }}>
+              Anzeigemodus
+            </Text>
+            <Text style={{ color: appContext.appTheme.colors.primary }}>
+              {appContext.appColorScheme}
+            </Text>
+          </View>
+        </TouchableOpacity>
 
         <Modal
           visible={modalVisible}
           animationType="slide"
           onRequestClose={() => {
-            Alert.alert("Modal has been closed.");
             setModalVisible(!modalVisible);
           }}
         >
@@ -119,16 +134,79 @@ export default function SettingsScreen() {
             <Icon
               name="window-close"
               size={24}
-              style={{ marginLeft: 10, marginTop: 20 }}
+              style={{ marginLeft: 10, marginTop: 20, marginBottom: 20 }}
             />
-            <Text style={([AppStyles.typography16])}>
-              System default
-            </Text>
-            <Divider />
-            <Text style={[AppStyles.typography16]}>Dark</Text>
-            <Divider />
-            <Text style={[AppStyles.typography16]}>Light</Text>
           </TouchableOpacity>
+
+          <Text style={[AppStyles.typography16, { marginLeft: 20 }]}>
+            System default
+          </Text>
+
+          <Divider />
+
+          {appContext.appColorScheme === "dark" ? (
+            <TouchableOpacity onPress={() => setModalVisible(false)}>
+              <View
+                style={{
+                  flexDirection: "row",
+                  justifyContent: "space-between",
+                  marginLeft: 20,
+                  marginRight: 20,
+                }}
+              >
+                <Text style={[AppStyles.typography16]}>Dark</Text>
+                <Icon
+                  name="check"
+                  size={24}
+                  color={appContext.appTheme.colors.primary}
+                />
+              </View>
+            </TouchableOpacity>
+          ) : (
+            <TouchableOpacity
+              onPress={() => {
+                setModalVisible(false);
+                appContext.setAppColorScheme("dark");
+              }}
+            >
+              <Text style={[AppStyles.typography16, { marginLeft: 20 }]}>
+                Dark
+              </Text>
+            </TouchableOpacity>
+          )}
+
+          <Divider />
+
+          {appContext.appColorScheme === "light" ? (
+            <TouchableOpacity onPress={() => setModalVisible(false)}>
+              <View
+                style={{
+                  flexDirection: "row",
+                  justifyContent: "space-between",
+                  marginLeft: 20,
+                  marginRight: 20,
+                }}
+              >
+                <Text style={[AppStyles.typography16]}>Light</Text>
+                <Icon
+                  name="check"
+                  size={24}
+                  color={appContext.appTheme.colors.primary}
+                />
+              </View>
+            </TouchableOpacity>
+          ) : (
+            <TouchableOpacity
+              onPress={() => {
+                setModalVisible(false);
+                appContext.setAppColorScheme("light");
+              }}
+            >
+              <Text style={[AppStyles.typography16, { marginLeft: 20 }]}>
+                Light
+              </Text>
+            </TouchableOpacity>
+          )}
         </Modal>
       </Card>
     </View>