Add light theme

App.js

@@ -19,7 +19,6 @@ import PropTypes from 'prop-types';
 
 import { useStores } from './hooks/useStores';
 import AppNavigator from './navigation/AppNavigator';
-import DarkTheme from './themes/dark';
 import NativeShellLoader from './utils/NativeShellLoader';
 
 // Import i18n configuration
@@ -106,9 +105,9 @@ const App = observer(({ skipLoadingScreen }) => {
 
  return (
  <SafeAreaProvider>
- <ThemeProvider theme={DarkTheme.Elements}>
+ <ThemeProvider theme={rootStore.settingStore.theme.Elements}>
  <StatusBar
- style="light"
+ style='light'
  backgroundColor={theme.colors.grey0}
  hidden={rootStore.isFullscreen}
  />

langs/en.json

@@ -47,6 +47,7 @@
  "settings": {
  "version": "Version: {{version}}",
  "keepAwake": "Keep Screen Awake",
+ "lightTheme": "Use Light Theme",
  "rotationLock": "Rotation Lock",
  "tabLabels": "Show Tab Labels",
  "expoVersion": "Expo Version: {{version}}"

navigation/AppNavigator.js

@@ -24,7 +24,6 @@ import ErrorScreen from '../screens/ErrorScreen';
 import HomeScreen from '../screens/HomeScreen';
 import SettingsScreen from '../screens/SettingsScreen';
 import { getIconName } from '../utils/Icons';
-import DarkTheme from '../themes/dark';
 
 const RootStack = createStackNavigator();
 const Tab = createBottomTabNavigator();
@@ -124,7 +123,7 @@ const AppNavigator = observer(() => {
  SplashScreen.hideAsync();
 
  return (
- <NavigationContainer theme={DarkTheme.Navigation}>
+ <NavigationContainer theme={rootStore.settingStore.theme.Navigation}>
  <RootStack.Navigator
  initialRouteName={(rootStore.serverStore.servers?.length > 0) ? 'Main' : 'AddServer'}
  headerMode='screen'

screens/AddServerScreen.js

@@ -10,11 +10,13 @@ import { SafeAreaView } from 'react-native-safe-area-context';
 import { useHeaderHeight } from '@react-navigation/stack';
 import { useTranslation } from 'react-i18next';
 
+import { useStores } from '../hooks/useStores';
 import ServerInput from '../components/ServerInput';
 
 const AddServerScreen = () => {
  const { t } = useTranslation();
  const headerHeight = useHeaderHeight();
+ const { rootStore } = useStores();
  const { theme } = useContext(ThemeContext);
 
  return (
@@ -32,7 +34,11 @@ const AddServerScreen = () => {
  <View style={styles.logoContainer}>
  <Image
  style={styles.logoImage}
- source={require('../assets/images/logowhite.png')}
+ source={
+ rootStore.settingStore.theme.dark ?
+ require('../assets/images/logowhite.png') :
+ require('../assets/images/logoblack.png')
+ }
  fadeDuration={0} // we need to adjust Android devices (https://facebook.github.io/react-native/docs/image#fadeduration) fadeDuration prop to `0` as it's default value is `300`
  />
  </View>

screens/SettingsScreen.js

@@ -24,7 +24,7 @@ const SettingsScreen = observer(() => {
  const { rootStore } = useStores();
  const navigation = useNavigation();
  const { t } = useTranslation();
- const { theme } = useContext(ThemeContext);
+ const { theme, replaceTheme } = useContext(ThemeContext);
 
  useEffect(() => {
  // Fetch server info
@@ -125,6 +125,17 @@ const SettingsScreen = observer(() => {
  onValueChange: action(value => rootStore.settingStore.isTabLabelsEnabled = value)
  });
 
+ // TODO: This should be able to select from a list not just a switch
+ settingsData.push({
+ key: 'theme-switch',
+ title: t('settings.lightTheme'),
+ value: rootStore.settingStore.themeId === 'light',
+ onValueChange: action(value => {
+ rootStore.settingStore.themeId = value ? 'light' : 'dark';
+ replaceTheme(rootStore.settingStore.theme.Elements);
+ })
+ });
+
  return [
  {
  title: t('headings.servers'),

stores/SettingStore.js

@@ -3,9 +3,11 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
-import { action, decorate, observable } from 'mobx';
+import { action, computed, decorate, observable } from 'mobx';
 import { Platform } from 'react-native';
 
+import Themes from '../themes';
+
 /**
  * Data store for application settings
  */
@@ -30,11 +32,18 @@ export default class SettingStore {
  */
  isTabLabelsEnabled = true
 
+ themeId = 'dark'
+
+ get theme() {
+ return Themes[this.themeId];
+ }
+
  reset() {
  this.activeServer = 0;
  this.isRotationLockEnabled = Platform.OS === 'ios' && !Platform.isPad;
  this.isScreenLockEnabled = Platform.OS === 'ios' ? (parseInt(Platform.Version, 10) < 14) : true;
  this.isTabLabelsEnabled = true;
+ this.themeId = 'dark';
  }
 }
 
@@ -43,5 +52,7 @@ decorate(SettingStore, {
  isRotationLockEnabled: observable,
  isScreenLockEnabled: observable,
  isTabLabelsEnabled: observable,
+ themeId: observable,
+ theme: computed,
  reset: action
 });

themes/index.js

@@ -0,0 +1,12 @@
+/**
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+import dark from './dark';
+import light from './light';
+
+export default {
+ dark,
+ light
+};

themes/light/elements.js

@@ -0,0 +1,19 @@
+/**
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+import BaseTheme from '../base/elements';
+import Colors from '../../constants/Colors';
+
+export default {
+ ...BaseTheme,
+ colors: {
+ ...BaseTheme.colors,
+ background: '#F2F2F2',
+ primary: Colors.blue,
+ secondary: Colors.purple,
+ grey0: '#303030',
+ grey1: '#999'
+ }
+};

themes/light/index.js

@@ -0,0 +1,13 @@
+/**
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+import Elements from './elements';
+import Navigation from './navigation';
+
+export default {
+ dark: false,
+ Elements,
+ Navigation
+};

themes/light/navigation.js

@@ -0,0 +1,19 @@
+/**
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+import { DefaultTheme } from '@react-navigation/native';
+import Colors from '../../constants/Colors';
+
+export default {
+ ...DefaultTheme,
+ colors: {
+ ...DefaultTheme.colors,
+ primary: Colors.blue,
+ background: '#F2F2F2',
+ card: '#303030',
+ text: Colors.white,
+ border: '#272729'
+ }
+};