theme functionality

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",
+}

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,
+        }
+    });
+}

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,
+        }
+    });
+}

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,
+        }
+    });
+}

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,
+        }
+    });
+}

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,
+        }
+    });
+}