Merge pull request #203 from thornbill/moar-theming-fixes

Fix issues with default values of dark theme

components/AppInfoFooter.js

@@ -3,22 +3,28 @@
  * 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 React from 'react';
+import React, { useContext } from 'react';
 import { StyleSheet, View } from 'react-native';
-import { colors, Text } from 'react-native-elements';
+import { Text, ThemeContext } from 'react-native-elements';
 import Constants from 'expo-constants';
 import { useTranslation } from 'react-i18next';
 
 import { getAppName } from '../utils/Device';
 
 const AppInfoFooter = () => {
  const { t } = useTranslation();
+ const { theme } = useContext(ThemeContext);
+
+ const textStyle = {
+ ...styles.text,
+ color: theme.colors.grey1
+ };
 
  return (
  <View style={styles.container}>
- <Text style={styles.text}>{`${getAppName()}`}</Text>
- <Text style={styles.text}>{`${Constants.nativeAppVersion} (${Constants.nativeBuildVersion})`}</Text>
- <Text style={styles.text}>{t('settings.expoVersion', { version: Constants.expoVersion })}</Text>
+ <Text style={textStyle}>{`${getAppName()}`}</Text>
+ <Text style={textStyle}>{`${Constants.nativeAppVersion} (${Constants.nativeBuildVersion})`}</Text>
+ <Text style={textStyle}>{t('settings.expoVersion', { version: Constants.expoVersion })}</Text>
  </View>
  );
 };
@@ -28,7 +34,6 @@ const styles = StyleSheet.create({
  margin: 15
  },
  text: {
- color: colors.grey4,
  fontSize: 15
  }
 });

components/ServerInput.js

@@ -85,14 +85,18 @@ const ServerInput = observer(({ onSuccess, ...props }) => {
 
  return (
  <Input
- inputContainerStyle={styles.inputContainerStyle}
+ inputContainerStyle={{
+ ...styles.inputContainerStyle,
+ backgroundColor: theme.colors.searchBg
+ }}
  leftIcon={{
  name: getIconName('globe'),
- type: 'ionicon'
+ type: 'ionicon',
+ color: theme.colors.grey3
  }}
  leftIconContainerStyle={styles.leftIconContainerStyle}
  labelStyle={{
- color: theme.colors.grey4
+ color: theme.colors.grey1
  }}
  placeholderTextColor={theme.colors.grey3}
  rightIcon={isValidating ? <ActivityIndicator /> : null}
@@ -118,7 +122,7 @@ const styles = StyleSheet.create({
  inputContainerStyle: {
  marginTop: 8,
  marginBottom: 12,
- backgroundColor: '#292929',
+ borderRadius: 3,
  borderBottomWidth: 0
  },
  leftIconContainerStyle: {

components/ServerListItem.js

@@ -3,16 +3,17 @@
  * 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 React from 'react';
-import { StyleSheet, View, Platform } from 'react-native';
-import { Button, Icon, ListItem, colors } from 'react-native-elements';
+import React, { useContext } from 'react';
+import { StyleSheet, View } from 'react-native';
+import { Button, Icon, ListItem, ThemeContext } from 'react-native-elements';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 
 import { getIconName } from '../utils/Icons';
 
 const ServerListItem = ({item, index, activeServer, onDelete, onPress}) => {
  const { t } = useTranslation();
+ const { theme } = useContext(ThemeContext);
 
  const title = item?.name;
  const version = item?.info?.Version || t('common.unknown');
@@ -45,7 +46,9 @@ const ServerListItem = ({item, index, activeServer, onDelete, onPress}) => {
  icon={{
  name: getIconName('trash'),
  type: 'ionicon',
- iconStyle: styles.deleteButton
+ iconStyle: {
+ color: theme.colors.error
+ }
  }}
  onPress={() => onDelete(index)}
  />
@@ -67,9 +70,6 @@ const styles = StyleSheet.create({
  },
  leftElement: {
  width: 12
- },
- deleteButton: {
- color: Platform.OS === 'ios' ? colors.platform.ios.error : colors.platform.android.error
  }
 });
 

constants/Colors.js

@@ -9,5 +9,6 @@ export default {
  white: '#FFF',
  blackish: '#101010',
  grey0: '#202020',
- grey1: '#CCC'
+ grey1: '#CCC',
+ grey6: '#292929'
 };

screens/SettingsScreen.js

@@ -192,7 +192,7 @@ const SettingsScreen = observer(() => {
  <Text style={{
  ...styles.header,
  backgroundColor: theme.colors.background,
- color: theme.colors.grey4
+ color: theme.colors.grey1
  }}>{title}</Text>
  )}
  renderSectionFooter={() => <View style={styles.footer} />}

themes/base/elements.js

@@ -10,7 +10,9 @@ import Colors from '../../constants/Colors';
 
 export default {
  colors: {
- // Use platform default colors from react-native-elements
+ // Start with default colors
+ ...colors,
+ // Override with platform defaults
  ...Platform.select({
  default: colors.platform.android,
  ios: colors.platform.ios
@@ -34,7 +36,7 @@ export default {
  },
  ListItemSubtitle: {
  style: {
- color: colors.grey4,
+ color: colors.grey1,
  lineHeight: 21
  }
  },

themes/dark/elements.js

@@ -9,13 +9,30 @@ import Colors from '../../constants/Colors';
 export default {
  ...BaseTheme,
  colors: {
+ // Default values from base theme
  ...BaseTheme.colors,
+ // Manually assign defaults values for dark theme,
+ // because it is not exported from react-native-elements
+ grey2: '#86939e',
+ grey3: '#5e6977',
+ grey4: '#43484d',
+ grey5: '#393e42',
+ greyOutline: '#bbb',
+ disabled: 'hsl(208, 8%, 90%)',
+ // Custom colors
  background: Colors.blackish,
  primary: Colors.blue,
  secondary: Colors.purple,
  black: Colors.white,
  white: Colors.grey0,
  grey0: Colors.grey0,
- grey1: Colors.grey1
+ grey1: Colors.grey1,
+ searchBg: Colors.grey6
+ },
+ ListItemSubtitle: {
+ style: {
+ ...BaseTheme.ListItemSubtitle.style,
+ color: Colors.grey1
+ }
  }
 };

themes/dark/navigation.js

@@ -14,7 +14,6 @@ export default {
  primary: Colors.blue,
  background: Colors.blackish,
  card: Colors.grey0,
- text: Colors.white,
- border: 'transparent'
+ text: Colors.white
  }
 };