From 1fbe9dc48a33ddb782bd369ec2fcdc5b72826a77 Mon Sep 17 00:00:00 2001
From: moist-webDev <hope3123@gmail.com>
Date: Fri, 26 May 2023 00:12:00 -0400
Subject: [PATCH] final theme implimentation

---
 app.json            |  6 ++++--
 lib/theme.ts        |  4 ++--
 routes/Settings.tsx | 33 ++++++++++++++++++++++++++++++---
 3 files changed, 36 insertions(+), 7 deletions(-)

diff --git a/app.json b/app.json
index dea8023..2c6c721 100644
--- a/app.json
+++ b/app.json
@@ -15,13 +15,15 @@
       "**/*"
     ],
     "ios": {
-      "supportsTablet": true
+      "supportsTablet": true,
+      "userInterfaceStyle": "automatic"
     },
     "android": {
       "adaptiveIcon": {
         "foregroundImage": "./assets/adaptive-icon.png",
         "backgroundColor": "#ffffff"
-      }
+      },
+      "userInterfaceStyle": "automatic"
     },
     "web": {
       "favicon": "./assets/favicon.png"
diff --git a/lib/theme.ts b/lib/theme.ts
index a681f47..9ce8c6d 100644
--- a/lib/theme.ts
+++ b/lib/theme.ts
@@ -8,7 +8,7 @@ export type Theme = {
     statusbar: 'light' | 'dark',
 }
 
-export const darkTheme: Theme = {
+export const dark: Theme = {
     name: 'dark',
     text: "#edecf3",
     background: "#0f0e16",
@@ -18,7 +18,7 @@ export const darkTheme: Theme = {
     statusbar: 'light',
 }
 
-export const lightTheme: Theme = {
+export const light: Theme = {
     name: 'light',
     text: "#0e1b17",
     background: "#e1efea",
diff --git a/routes/Settings.tsx b/routes/Settings.tsx
index 64f3855..2167aa9 100644
--- a/routes/Settings.tsx
+++ b/routes/Settings.tsx
@@ -1,11 +1,33 @@
 import { StyleSheet, Text, View} from 'react-native';
 import Button from '../components/Button';
+import { useState, useEffect } from 'react';
+import DropDownPicker from 'react-native-dropdown-picker';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+
+
+export default function Settings({theme, changeTheme, themeMode}:any){
+    const [open, setOpen] = useState(false);
+    const [value, setValue] = useState(themeMode);
+    const [items, setItems] = useState([
+        {label: 'System', value: 'auto'},
+        {label: 'Light', value: 'light'},
+        {label: 'Dark', value: 'dark'}
+    ]);
+
+    useEffect(() => {changeTheme(value)}, [value]);
 
-export default function Settings({theme, changeTheme}:any){
     return (
         <View style={style(theme).container}>
-            <Text style={style(theme).text}>This is settings</Text>
-            <Button title="Change Theme" theme={theme}  onPress={changeTheme} eStyle={{}}/>
+            <Text style={style(theme).text}>Theme:</Text>
+            <DropDownPicker
+                open={open}
+                value={value}
+                items={items}
+                setOpen={setOpen}
+                setValue={setValue}
+                setItems={setItems}
+                style={style(theme).dropdown}
+            />
         </View>
     )
 }
@@ -13,9 +35,14 @@ export default function Settings({theme, changeTheme}:any){
 const style = (theme:any) => {
     return StyleSheet.create({
         container: {
+            width: '100%',
         },
         text: {
             color: theme.text,
+        },
+        dropdown: {
+            backgroundColor: theme.primary,
+            color: theme.text,
         }
     });
 }
\ No newline at end of file