1 files changed, 77 insertions, 0 deletions
diff --git a/frontend/app/screens/theme/themes.js b/frontend/app/screens/theme/themes.js
new file mode 100644
index 0000000..82f4165
--- /dev/null
+++ b/frontend/app/screens/theme/themes.js
@@ -0,0 +1,77 @@
+import React from 'react';
+import {
+  View,
+  Image,
+  StatusBar,
+  Platform,
+} from 'react-native';
+import {
+  RkText,
+  RkTheme,
+  RkStyleSheet,
+} from 'react-native-ui-kitten';
+import { DarkKittenTheme } from '../../config/darkTheme';
+import { KittenTheme } from '../../config/theme';
+import { GradientButton } from '../../components/gradientButton';
+import { scale, scaleVertical } from '../../utils/scale';
+
+export class Themes extends React.Component {
+  static navigationOptions = {
+    title: 'Theme'.toUpperCase(),
+  };
+
+  onLightThemeApplyButtonPressed = () => {
+    StatusBar.setBarStyle('dark-content', true);
+    if (Platform.OS === 'android') {
+      StatusBar.setBackgroundColor(KittenTheme.colors.screen.base);
+    }
+    RkTheme.setTheme(KittenTheme);
+  };
+
+  onDarkThemeApplyButtonPressed = () => {
+    StatusBar.setBarStyle('light-content', true);
+    if (Platform.OS === 'android') {
+      StatusBar.setBackgroundColor(DarkKittenTheme.colors.screen.base);
+    }
+    RkTheme.setTheme(DarkKittenTheme);
+  };
+
+  render = () => (
+    <View style={styles.root}>
+      <View style={styles.container}>
+        <RkText>Light Theme</RkText>
+        <Image style={styles.image} source={require('../../assets/images/lightThemeImage.png')} />
+        <GradientButton
+          text='APPLY'
+          onPress={this.onLightThemeApplyButtonPressed}
+        />
+      </View>
+      <View style={styles.container}>
+        <RkText>Dark Theme</RkText>
+        <Image style={styles.image} source={require('../../assets/images/darkThemeImage.png')} />
+        <GradientButton
+          text='APPLY'
+          onPress={this.onDarkThemeApplyButtonPressed}
+        />
+      </View>
+    </View>
+  );
+}
+
+const styles = RkStyleSheet.create(theme => ({
+  root: {
+    backgroundColor: theme.colors.screen.base,
+    flex: 1,
+    paddingHorizontal: scale(72),
+
+  },
+  image: {
+    height: scaleVertical(160),
+  },
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingVertical: scaleVertical(20),
+  },
+}));