From c809ad86862eab3c706d3d9b298e6628886441e1 Mon Sep 17 00:00:00 2001
From: moist-webDev <hope3123@gmail.com>
Date: Wed, 24 May 2023 22:28:17 -0400
Subject: [PATCH] theme functionality

---
 lib/theme.ts        | 17 +++++++++++++++++
 routes/Home.tsx     | 24 ++++++++++++++++++++++++
 routes/Movies.tsx   | 20 ++++++++++++++++++++
 routes/Other.tsx    | 20 ++++++++++++++++++++
 routes/Settings.tsx | 29 +++++++++++++++++++++++++++++
 routes/Shows.tsx    | 20 ++++++++++++++++++++
 6 files changed, 130 insertions(+)
 create mode 100644 lib/theme.ts
 create mode 100644 routes/Home.tsx
 create mode 100644 routes/Movies.tsx
 create mode 100644 routes/Other.tsx
 create mode 100644 routes/Settings.tsx
 create mode 100644 routes/Shows.tsx

diff --git a/lib/theme.ts b/lib/theme.ts
new file mode 100644
index 0000000..4fd51c8
--- /dev/null
+++ b/lib/theme.ts
@@ -0,0 +1,17 @@
+export const darkTheme = {
+    text: "#edecf3",
+    background: "#0f0e16",
+    primary: "#60496f",
+    secondary: "#1f141e",
+    accent: "#31202f",
+    statusbar: "light",
+}
+
+export const lightTheme = {
+    text: "#0e1b17",
+    background: "#e1efea",
+    primary: "#519e85",
+    secondary: "#ebf5f1",
+    accent: "#5dac92",
+    statusbar: "dark",
+}
\ No newline at end of file
diff --git a/routes/Home.tsx b/routes/Home.tsx
new file mode 100644
index 0000000..f94fcc3
--- /dev/null
+++ b/routes/Home.tsx
@@ -0,0 +1,24 @@
+import { StyleSheet, Text, View } from 'react-native';
+import { useEffect, useState } from 'react';
+import {darkTheme} from '../lib/theme';
+import { color } from '@rneui/themed/dist/config';
+
+
+export default function Home({theme}:any){
+    return (
+        <View style={style(theme).container}>
+            <Text style={style(theme).text}>This is home</Text>
+        </View>
+    )
+}
+
+
+const style = (theme:any) => {
+    return StyleSheet.create({
+        container: {
+        },
+        text: {
+            color: theme.text,
+        }
+    });
+}
\ No newline at end of file
diff --git a/routes/Movies.tsx b/routes/Movies.tsx
new file mode 100644
index 0000000..e762bab
--- /dev/null
+++ b/routes/Movies.tsx
@@ -0,0 +1,20 @@
+import { StyleSheet, Text, View } from 'react-native';
+
+export default function Movies({theme}:any){
+    return (
+        <View style={style(theme).container}>
+            <Text style={style(theme).text}>This is movie</Text>
+        </View>
+    )
+}
+
+
+const style = (theme:any) => {
+    return StyleSheet.create({
+        container: {
+        },
+        text: {
+            color: theme.text,
+        }
+    });
+}
\ No newline at end of file
diff --git a/routes/Other.tsx b/routes/Other.tsx
new file mode 100644
index 0000000..797b68e
--- /dev/null
+++ b/routes/Other.tsx
@@ -0,0 +1,20 @@
+import { StyleSheet, Text, View} from 'react-native';
+
+export default function Other({theme}:any){
+    return (
+        <View style={style(theme).container}>
+            <Text style={style(theme).text}>This is other</Text>
+        </View>
+    )
+}
+
+
+const style = (theme:any) => {
+    return StyleSheet.create({
+        container: {
+        },
+        text: {
+            color: theme.text,
+        }
+    });
+}
\ No newline at end of file
diff --git a/routes/Settings.tsx b/routes/Settings.tsx
new file mode 100644
index 0000000..d8d6e49
--- /dev/null
+++ b/routes/Settings.tsx
@@ -0,0 +1,29 @@
+import { StyleSheet, Text, View, Button} from 'react-native';
+
+export default function Settings({theme, changeTheme}:any){
+    return (
+        <View style={style(theme).container}>
+            <Text style={style(theme).text}>This is settings</Text>
+            <Text onPress={changeTheme} style={style(theme).button}>change theme</Text>
+        </View>
+    )
+}
+
+const style = (theme:any) => {
+    return StyleSheet.create({
+        container: {
+        },
+        button: {
+            backgroundColor: theme.primary,
+            padding: 10,
+            alignContent: 'center',
+            color: theme.text,
+            width: 120,
+            margin: 10,
+            borderRadius: 5,
+        },
+        text: {
+            color: theme.text,
+        }
+    });
+}
\ No newline at end of file
diff --git a/routes/Shows.tsx b/routes/Shows.tsx
new file mode 100644
index 0000000..9a63a39
--- /dev/null
+++ b/routes/Shows.tsx
@@ -0,0 +1,20 @@
+import { StyleSheet, Text, View} from 'react-native';
+
+export default function Shows({theme}:any){
+    return (
+        <View style={style(theme).container}>
+            <Text style={style(theme).text}>This is shows</Text>
+        </View>
+    )
+}
+
+
+const style = (theme:any) => {
+    return StyleSheet.create({
+        container: {
+        },
+        text: {
+            color: theme.text,
+        }
+    });
+}
\ No newline at end of file