[NEW] Themes (#1298)

.eslintrc.js

@@ -2,7 +2,7 @@ module.exports = {
 	"settings": {
     "import/resolver": {
       "node": {
-        "extensions": [".js", ".ios.js", ".android.js", ".native.js"]
+        "extensions": [".js", ".ios.js", ".android.js", ".native.js", ".tsx"]
       }
     }
   },

app/constants/colors.js

@@ -1,32 +1,121 @@
 import { isIOS, isAndroid } from '../utils/deviceInfo';
 
-export const COLOR_DANGER = '#f5455c';
-export const COLOR_SUCCESS = '#2de0a5';
-export const COLOR_PRIMARY = '#1d74f5';
-export const COLOR_WHITE = '#fff';
-export const COLOR_BUTTON_PRIMARY = COLOR_PRIMARY;
-export const COLOR_TITLE = '#0C0D0F';
-export const COLOR_TEXT = '#2F343D';
-export const COLOR_TEXT_DESCRIPTION = '#9ca2a8';
-export const COLOR_SEPARATOR = '#A7A7AA';
-export const COLOR_BACKGROUND_CONTAINER = '#f3f4f5';
-export const COLOR_BACKGROUND_NOTIFICATION = '#f8f8f8';
-export const COLOR_BORDER = '#e1e5e8';
-export const COLOR_UNREAD = '#e1e5e8';
-export const COLOR_TOAST = '#0C0D0F';
 export const STATUS_COLORS = {
 	online: '#2de0a5',
-	busy: COLOR_DANGER,
+	busy: '#f5455c',
 	away: '#ffd21f',
 	offline: '#cbced1'
 };
 
-export const HEADER_BACKGROUND = isIOS ? '#f8f8f8' : '#2F343D';
-export const HEADER_TITLE = isIOS ? COLOR_TITLE : COLOR_WHITE;
-export const HEADER_BACK = isIOS ? COLOR_PRIMARY : COLOR_WHITE;
-export const HEADER_TINT = isIOS ? COLOR_PRIMARY : COLOR_WHITE;
-
 export const SWITCH_TRACK_COLOR = {
-	false: isAndroid ? COLOR_DANGER : null,
-	true: COLOR_SUCCESS
+	false: isAndroid ? '#f5455c' : null,
+	true: '#2de0a5'
+};
+
+export const themes = {
+	light: {
+		backgroundColor: '#ffffff',
+		focusedBackground: '#ffffff',
+		chatComponentBackground: '#f3f4f5',
+		auxiliaryBackground: '#efeff4',
+		bannerBackground: '#f1f2f4',
+		titleText: '#0d0e12',
+		bodyText: '#2f343d',
+		backdropColor: '#000000',
+		dangerColor: '#f5455c',
+		successColor: '#2de0a5',
+		borderColor: '#e1e5e8',
+		controlText: '#54585e',
+		auxiliaryText: '#9ca2a8',
+		infoText: '#6d6d72',
+		tintColor: '#1d74f5',
+		auxiliaryTintColor: '#caced1',
+		actionTintColor: '#1d74f5',
+		separatorColor: '#cbcbcc',
+		navbarBackground: '#ffffff',
+		headerBorder: '#B2B2B2',
+		headerBackground: isIOS ? '#f8f8f8' : '#2f343d',
+		headerSecondaryBackground: '#ffffff',
+		headerTintColor: isAndroid ? '#ffffff' : '#1d74f5',
+		headerTitleColor: isAndroid ? '#ffffff' : '#0d0e12',
+		headerSecondaryText: isAndroid ? '#9ca2a8' : '#1d74f5',
+		toastBackground: '#0C0D0F',
+		videoBackground: '#1f2329',
+		favoriteBackground: '#ffbb00',
+		hideBackground: '#54585e',
+		messageboxBackground: '#ffffff',
+		searchboxBackground: '#E6E6E7',
+		buttonBackground: '#414852',
+		buttonText: '#ffffff'
+	},
+	dark: {
+		backgroundColor: '#030b1b',
+		focusedBackground: '#0b182c',
+		chatComponentBackground: '#192132',
+		auxiliaryBackground: '#07101e',
+		bannerBackground: '#0e1f38',
+		titleText: '#FFFFFF',
+		bodyText: '#e8ebed',
+		backdropColor: '#000000',
+		dangerColor: '#f5455c',
+		successColor: '#2de0a5',
+		borderColor: '#0f213d',
+		controlText: '#dadde6',
+		auxiliaryText: '#9297a2',
+		infoText: '#6D6D72',
+		tintColor: '#1d74f5',
+		auxiliaryTintColor: '#cdcdcd',
+		actionTintColor: '#1d74f5',
+		separatorColor: '#2b2b2d',
+		navbarBackground: '#0b182c',
+		headerBorder: '#2F3A4B',
+		headerBackground: '#0b182c',
+		headerSecondaryBackground: '#0b182c',
+		headerTintColor: isAndroid ? '#ffffff' : '#1d74f5',
+		headerTitleColor: '#FFFFFF',
+		headerSecondaryText: isAndroid ? '#9297a2' : '#1d74f5',
+		toastBackground: '#0C0D0F',
+		videoBackground: '#1f2329',
+		favoriteBackground: '#ffbb00',
+		hideBackground: '#54585e',
+		messageboxBackground: '#0b182c',
+		searchboxBackground: '#192d4d',
+		buttonBackground: '#414852',
+		buttonText: '#ffffff'
+	},
+	black: {
+		backgroundColor: '#000000',
+		focusedBackground: '#0d0d0d',
+		chatComponentBackground: '#16181a',
+		auxiliaryBackground: '#080808',
+		bannerBackground: '#1f2329',
+		titleText: '#f9f9f9',
+		bodyText: '#e8ebed',
+		backdropColor: '#000000',
+		dangerColor: '#f5455c',
+		successColor: '#2de0a5',
+		borderColor: '#1f2329',
+		controlText: '#dadde6',
+		auxiliaryText: '#b2b8c6',
+		infoText: '#6d6d72',
+		tintColor: '#1e9bfe',
+		auxiliaryTintColor: '#cdcdcd',
+		actionTintColor: '#1ea1fe',
+		separatorColor: '#272728',
+		navbarBackground: '#0d0d0d',
+		headerBorder: '#323232',
+		headerBackground: '#0d0d0d',
+		headerSecondaryBackground: '#0d0d0d',
+		headerTintColor: isAndroid ? '#ffffff' : '#1e9bfe',
+		headerTitleColor: '#f9f9f9',
+		headerSecondaryText: isAndroid ? '#b2b8c6' : '#1e9bfe',
+		toastBackground: '#0C0D0F',
+		videoBackground: '#1f2329',
+		favoriteBackground: '#ffbb00',
+		hideBackground: '#54585e',
+		messageboxBackground: '#0d0d0d',
+		searchboxBackground: '#1f1f1f',
+		buttonBackground: '#414852',
+		buttonText: '#ffffff'
+	}
 };

app/containers/ActivityIndicator.js

@@ -1,12 +1,40 @@
 import React from 'react';
 import { ActivityIndicator, StyleSheet } from 'react-native';
+import { PropTypes } from 'prop-types';
+import { themes } from '../constants/colors';
 
 const styles = StyleSheet.create({
 	indicator: {
-		padding: 10
+		padding: 16,
+		flex: 1
+	},
+	absolute: {
+		position: 'absolute',
+		left: 0,
+		right: 0,
+		top: 0,
+		bottom: 0,
+		alignItems: 'center',
+		justifyContent: 'center'
 	}
 });
 
-const RCActivityIndicator = () => <ActivityIndicator style={styles.indicator} />;
+const RCActivityIndicator = ({ theme, absolute, ...props }) => (
+	<ActivityIndicator
+		style={[styles.indicator, absolute && styles.absolute]}
+		color={themes[theme].auxiliaryText}
+		{...props}
+	/>
+);
+
+RCActivityIndicator.propTypes = {
+	theme: PropTypes.string,
+	absolute: PropTypes.bool,
+	props: PropTypes.object
+};
+
+RCActivityIndicator.defaultProps = {
+	theme: 'light'
+};
 
 export default RCActivityIndicator;

app/containers/Avatar.js

@@ -9,7 +9,7 @@ const formatUrl = (url, baseUrl, uriSize, avatarAuthURLFragment) => (
 );
 
 const Avatar = React.memo(({
-	text, size, baseUrl, borderRadius, style, avatar, type, children, userId, token, onPress
+	text, size, baseUrl, borderRadius, style, avatar, type, children, userId, token, onPress, theme
 }) => {
 	const avatarStyle = {
 		width: size,
@@ -52,7 +52,7 @@ const Avatar = React.memo(({
 
 	if (onPress) {
 		image = (
-			<Touch onPress={onPress}>
+			<Touch onPress={onPress} theme={theme}>
 				{image}
 			</Touch>
 		);
@@ -77,6 +77,7 @@ Avatar.propTypes = {
 	children: PropTypes.object,
 	userId: PropTypes.string,
 	token: PropTypes.string,
+	theme: PropTypes.string,
 	onPress: PropTypes.func
 };
 

app/containers/Button/index.js

@@ -1,18 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { StyleSheet, Text, ActivityIndicator } from 'react-native';
+import { StyleSheet, Text } from 'react-native';
 import { RectButton } from 'react-native-gesture-handler';
 
-import { COLOR_BUTTON_PRIMARY } from '../../constants/colors';
+import { themes } from '../../constants/colors';
 import sharedStyles from '../../views/Styles';
-
-const colors = {
-	background_primary: COLOR_BUTTON_PRIMARY,
-	background_secondary: 'white',
-
-	text_color_primary: 'white',
-	text_color_secondary: COLOR_BUTTON_PRIMARY
-};
+import ActivityIndicator from '../ActivityIndicator';
 
 /* eslint-disable react-native/no-unused-styles */
 const styles = StyleSheet.create({
@@ -26,23 +19,6 @@ const styles = StyleSheet.create({
 	text: {
 		fontSize: 18,
 		textAlign: 'center'
-	},
-	background_primary: {
-		backgroundColor: colors.background_primary
-	},
-	background_secondary: {
-		backgroundColor: colors.background_secondary
-	},
-	text_primary: {
-		...sharedStyles.textMedium,
-		color: colors.text_color_primary
-	},
-	text_secondary: {
-		...sharedStyles.textBold,
-		color: colors.text_color_secondary
-	},
-	disabled: {
-		backgroundColor: '#e1e5e8'
 	}
 });
 
@@ -54,6 +30,7 @@ export default class Button extends React.PureComponent {
 		disabled: PropTypes.bool,
 		backgroundColor: PropTypes.string,
 		loading: PropTypes.bool,
+		theme: PropTypes.string,
 		style: PropTypes.any
 	}
 
@@ -67,24 +44,37 @@ export default class Button extends React.PureComponent {
 
 	render() {
 		const {
-			title, type, onPress, disabled, backgroundColor, loading, style, ...otherProps
+			title, type, onPress, disabled, backgroundColor, loading, style, theme, ...otherProps
 		} = this.props;
+		const isPrimary = type === 'primary';
 		return (
 			<RectButton
 				onPress={onPress}
 				enabled={!(disabled || loading)}
 				style={[
 					styles.container,
-					backgroundColor ? { backgroundColor } : styles[`background_${ type }`],
-					disabled && styles.disabled,
+					backgroundColor
+						? { backgroundColor }
+						: { backgroundColor: isPrimary ? themes[theme].actionTintColor : themes[theme].backgroundColor },
+					disabled && { backgroundColor: themes[theme].borderColor },
 					style
 				]}
 				{...otherProps}
 			>
 				{
 					loading
-						? <ActivityIndicator color={colors[`text_color_${ type }`]} />
-						: <Text style={[styles.text, styles[`text_${ type }`]]}>{title}</Text>
+						? <ActivityIndicator color={isPrimary ? themes[theme].buttonText : themes[theme].actionTintColor} />
+						: (
+							<Text
+								style={[
+									styles.text,
+									isPrimary ? sharedStyles.textMedium : sharedStyles.textBold,
+									{ color: isPrimary ? themes[theme].buttonText : themes[theme].actionTintColor }
+								]}
+							>
+								{title}
+							</Text>
+						)
 				}
 			</RectButton>
 		);

app/containers/Check.js

@@ -1,18 +1,22 @@
 import React from 'react';
 import { StyleSheet } from 'react-native';
+import PropTypes from 'prop-types';
 
 import { CustomIcon } from '../lib/Icons';
-import sharedStyles from '../views/Styles';
+import { themes } from '../constants/colors';
 
 const styles = StyleSheet.create({
 	icon: {
 		width: 22,
 		height: 22,
-		marginHorizontal: 15,
-		...sharedStyles.textColorDescription
+		marginHorizontal: 15
 	}
 });
 
-const Check = React.memo(() => <CustomIcon style={styles.icon} size={22} name='check' />);
+const Check = React.memo(({ theme }) => <CustomIcon style={styles.icon} color={themes[theme].tintColor} size={22} name='check' />);
+
+Check.propTypes = {
+	theme: PropTypes.string
+};
 
 export default Check;

app/containers/DisclosureIndicator.js

@@ -1,5 +1,8 @@
 import React from 'react';
 import { View, Image, StyleSheet } from 'react-native';
+import PropTypes from 'prop-types';
+
+import { themes } from '../constants/colors';
 
 const styles = StyleSheet.create({
 	disclosureContainer: {
@@ -14,12 +17,23 @@ const styles = StyleSheet.create({
 	}
 });
 
-export const DisclosureImage = React.memo(() => <Image source={{ uri: 'disclosure_indicator' }} style={styles.disclosureIndicator} />);
+export const DisclosureImage = React.memo(({ theme }) => (
+	<Image
+		source={{ uri: 'disclosure_indicator' }}
+		style={[styles.disclosureIndicator, { tintColor: themes[theme].auxiliaryTintColor }]}
+	/>
+));
+DisclosureImage.propTypes = {
+	theme: PropTypes.string
+};
 
-const DisclosureIndicator = React.memo(() => (
+const DisclosureIndicator = React.memo(({ theme }) => (
 	<View style={styles.disclosureContainer}>
-		<DisclosureImage />
+		<DisclosureImage theme={theme} />
 	</View>
 ));
+DisclosureIndicator.propTypes = {
+	theme: PropTypes.string
+};
 
 export default DisclosureIndicator;

app/containers/EmojiPicker/TabBar.js

@@ -2,26 +2,31 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { View, TouchableOpacity, Text } from 'react-native';
 import styles from './styles';
+import { themes } from '../../constants/colors';
 
 export default class TabBar extends React.Component {
 	static propTypes = {
 		goToPage: PropTypes.func,
 		activeTab: PropTypes.number,
 		tabs: PropTypes.array,
-		tabEmojiStyle: PropTypes.object
+		tabEmojiStyle: PropTypes.object,
+		theme: PropTypes.string
 	}
 
 	shouldComponentUpdate(nextProps) {
-		const { activeTab } = this.props;
+		const { activeTab, theme } = this.props;
 		if (nextProps.activeTab !== activeTab) {
 			return true;
 		}
+		if (nextProps.theme !== theme) {
+			return true;
+		}
 		return false;
 	}
 
 	render() {
 		const {
-			tabs, goToPage, tabEmojiStyle, activeTab
+			tabs, goToPage, tabEmojiStyle, activeTab, theme
 		} = this.props;
 
 		return (
@@ -35,7 +40,7 @@ export default class TabBar extends React.Component {
 						testID={`reaction-picker-${ tab }`}
 					>
 						<Text style={[styles.tabEmoji, tabEmojiStyle]}>{tab}</Text>
-						{activeTab === i ? <View style={styles.activeTabLine} /> : <View style={styles.tabLine} />}
+						{activeTab === i ? <View style={[styles.activeTabLine, { backgroundColor: themes[theme].tintColor }]} /> : <View style={styles.tabLine} />}
 					</TouchableOpacity>
 				))}
 			</View>

app/containers/EmojiPicker/index.js

@@ -16,6 +16,8 @@ import database from '../../lib/database';
 import { emojisByCategory } from '../../emojis';
 import protectedFunction from '../../lib/methods/helpers/protectedFunction';
 import log from '../../utils/log';
+import { themes } from '../../constants/colors';
+import { withTheme } from '../../theme';
 
 const scrollProps = {
 	keyboardShouldPersistTaps: 'always',
@@ -27,7 +29,8 @@ class EmojiPicker extends Component {
 		baseUrl: PropTypes.string.isRequired,
 		customEmojis: PropTypes.object,
 		onEmojiSelected: PropTypes.func,
-		tabEmojiStyle: PropTypes.object
+		tabEmojiStyle: PropTypes.object,
+		theme: PropTypes.string
 	};
 
 	constructor(props) {
@@ -54,6 +57,10 @@ class EmojiPicker extends Component {
 
 	shouldComponentUpdate(nextProps, nextState) {
 		const { frequentlyUsed, show, width } = this.state;
+		const { theme } = this.props;
+		if (nextProps.theme !== theme) {
+			return true;
+		}
 		if (nextState.show !== show) {
 			return true;
 		}
@@ -152,7 +159,7 @@ class EmojiPicker extends Component {
 
 	render() {
 		const { show, frequentlyUsed } = this.state;
-		const { tabEmojiStyle } = this.props;
+		const { tabEmojiStyle, theme } = this.props;
 
 		if (!show) {
 			return null;
@@ -160,9 +167,9 @@ class EmojiPicker extends Component {
 		return (
 			<View onLayout={this.onLayout} style={{ flex: 1 }}>
 				<ScrollableTabView
-					renderTabBar={() => <TabBar tabEmojiStyle={tabEmojiStyle} />}
+					renderTabBar={() => <TabBar tabEmojiStyle={tabEmojiStyle} theme={theme} />}
 					contentProps={scrollProps}
-					style={styles.background}
+					style={{ backgroundColor: themes[theme].focusedBackground }}
 				>
 					{
 						categories.tabs.map((tab, i) => (
@@ -181,4 +188,4 @@ const mapStateToProps = state => ({
 	customEmojis: state.customEmojis
 });
 
-export default connect(mapStateToProps)(EmojiPicker);
+export default connect(mapStateToProps)(withTheme(EmojiPicker));

app/containers/EmojiPicker/styles.js

@@ -1,10 +1,6 @@
 import { StyleSheet } from 'react-native';
-import { COLOR_PRIMARY, COLOR_WHITE } from '../../constants/colors';
 
 export default StyleSheet.create({
-	background: {
-		backgroundColor: COLOR_WHITE
-	},
 	container: {
 		flex: 1
 	},
@@ -28,7 +24,6 @@ export default StyleSheet.create({
 		left: 0,
 		right: 0,
 		height: 2,
-		backgroundColor: COLOR_PRIMARY,
 		bottom: 0
 	},
 	tabLine: {
@@ -51,7 +46,6 @@ export default StyleSheet.create({
 		flex: 1
 	},
 	categoryEmoji: {
-		color: 'black',
 		backgroundColor: 'transparent',
 		textAlign: 'center'
 	},

app/containers/FileModal.js

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import {
-	View, Text, TouchableWithoutFeedback, ActivityIndicator, StyleSheet, SafeAreaView
+	View, Text, TouchableWithoutFeedback, StyleSheet, SafeAreaView
 } from 'react-native';
 import FastImage from 'react-native-fast-image';
 import PropTypes from 'prop-types';
@@ -9,8 +9,10 @@ import ImageViewer from 'react-native-image-zoom-viewer';
 import { Video } from 'expo-av';
 
 import sharedStyles from '../views/Styles';
-import { COLOR_WHITE } from '../constants/colors';
 import { formatAttachmentUrl } from '../lib/utils';
+import ActivityIndicator from './ActivityIndicator';
+import { themes } from '../constants/colors';
+import { withTheme } from '../theme';
 
 const styles = StyleSheet.create({
 	safeArea: {
@@ -25,40 +27,22 @@ const styles = StyleSheet.create({
 		marginVertical: 10
 	},
 	title: {
-		color: COLOR_WHITE,
 		textAlign: 'center',
 		fontSize: 16,
 		...sharedStyles.textSemibold
 	},
 	description: {
-		color: COLOR_WHITE,
 		textAlign: 'center',
 		fontSize: 14,
 		...sharedStyles.textMedium
 	},
-	indicator: {
-		flex: 1
-	},
 	video: {
 		flex: 1
-	},
-	loading: {
-		position: 'absolute',
-		left: 0,
-		right: 0,
-		top: 0,
-		bottom: 0,
-		alignItems: 'center',
-		justifyContent: 'center'
 	}
 });
 
-const Indicator = React.memo(() => (
-	<ActivityIndicator style={styles.indicator} />
-));
-
 const ModalContent = React.memo(({
-	attachment, onClose, user, baseUrl
+	attachment, onClose, user, baseUrl, theme
 }) => {
 	if (attachment && attachment.image_url) {
 		const url = formatAttachmentUrl(attachment.image_url, user.id, user.token, baseUrl);
@@ -66,8 +50,8 @@ const ModalContent = React.memo(({
 			<SafeAreaView style={styles.safeArea}>
 				<TouchableWithoutFeedback onPress={onClose}>
 					<View style={styles.titleContainer}>
-						<Text style={styles.title}>{attachment.title}</Text>
-						{attachment.description ? <Text style={styles.description}>{attachment.description}</Text> : null}
+						<Text style={[styles.title, { color: themes[theme].buttonText }]}>{attachment.title}</Text>
+						{attachment.description ? <Text style={[styles.description, { color: themes[theme].buttonText }]}>{attachment.description}</Text> : null}
 					</View>
 				</TouchableWithoutFeedback>
 				<ImageViewer
@@ -78,7 +62,7 @@ const ModalContent = React.memo(({
 					onSwipeDown={onClose}
 					renderIndicator={() => null}
 					renderImage={props => <FastImage {...props} />}
-					loadingRender={() => <Indicator />}
+					loadingRender={() => <ActivityIndicator size='large' theme={theme} />}
 				/>
 			</SafeAreaView>
 		);
@@ -102,7 +86,7 @@ const ModalContent = React.memo(({
 					onLoadStart={() => setLoading(true)}
 					onError={console.log}
 				/>
-				{ loading ? <ActivityIndicator size='large' style={styles.loading} /> : null }
+				{ loading ? <ActivityIndicator size='large' theme={theme} absolute /> : null }
 			</>
 		);
 	}
@@ -110,7 +94,7 @@ const ModalContent = React.memo(({
 });
 
 const FileModal = React.memo(({
-	isVisible, onClose, attachment, user, baseUrl
+	isVisible, onClose, attachment, user, baseUrl, theme
 }) => (
 	<Modal
 		style={styles.modal}
@@ -120,15 +104,18 @@ const FileModal = React.memo(({
 		onSwipeComplete={onClose}
 		swipeDirection={['up', 'down']}
 	>
-		<ModalContent attachment={attachment} onClose={onClose} user={user} baseUrl={baseUrl} />
+		<ModalContent attachment={attachment} onClose={onClose} user={user} baseUrl={baseUrl} theme={theme} />
 	</Modal>
-), (prevProps, nextProps) => prevProps.isVisible === nextProps.isVisible && prevProps.loading === nextProps.loading);
+), (prevProps, nextProps) => (
+	prevProps.isVisible === nextProps.isVisible && prevProps.loading === nextProps.loading && prevProps.theme === nextProps.theme
+));
 
 FileModal.propTypes = {
 	isVisible: PropTypes.bool,
 	attachment: PropTypes.object,
 	user: PropTypes.object,
 	baseUrl: PropTypes.string,
+	theme: PropTypes.string,
 	onClose: PropTypes.func
 };
 FileModal.displayName = 'FileModal';
@@ -137,8 +124,9 @@ ModalContent.propTypes = {
 	attachment: PropTypes.object,
 	user: PropTypes.object,
 	baseUrl: PropTypes.string,
+	theme: PropTypes.string,
 	onClose: PropTypes.func
 };
 ModalContent.displayName = 'FileModalContent';
 
-export default FileModal;
+export default withTheme(FileModal);

app/containers/HeaderButton.js

@@ -3,16 +3,25 @@ import PropTypes from 'prop-types';
 import { HeaderButtons, HeaderButton, Item } from 'react-navigation-header-buttons';
 
 import { CustomIcon } from '../lib/Icons';
-import { isIOS } from '../utils/deviceInfo';
-import { COLOR_PRIMARY, COLOR_WHITE } from '../constants/colors';
+import { isIOS, isAndroid } from '../utils/deviceInfo';
+import { themes } from '../constants/colors';
 import I18n from '../i18n';
+import { withTheme } from '../theme';
 
-const color = isIOS ? COLOR_PRIMARY : COLOR_WHITE;
 export const headerIconSize = 23;
 
-const CustomHeaderButton = React.memo(props => (
-	<HeaderButton {...props} IconComponent={CustomIcon} iconSize={headerIconSize} color={color} />
-));
+const CustomHeaderButton = React.memo(withTheme(({ theme, ...props }) => (
+	<HeaderButton
+		{...props}
+		IconComponent={CustomIcon}
+		iconSize={headerIconSize}
+		color={
+			isAndroid
+				? themes[theme].headerTitleColor
+				: themes[theme].headerTintColor
+		}
+	/>
+)));
 
 export const CustomHeaderButtons = React.memo(props => (
 	<HeaderButtons
@@ -52,6 +61,9 @@ export const LegalButton = React.memo(({ navigation, testID }) => (
 	<MoreButton onPress={() => navigation.navigate('LegalView')} testID={testID} />
 ));
 
+CustomHeaderButton.propTypes = {
+	theme: PropTypes.string
+};
 DrawerButton.propTypes = {
 	navigation: PropTypes.object.isRequired,
 	testID: PropTypes.string.isRequired

app/containers/ListItem.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import { View, Text, StyleSheet } from 'react-native';
 import PropTypes from 'prop-types';
-import { RectButton } from 'react-native-gesture-handler';
 
-import { COLOR_TEXT } from '../constants/colors';
+import Touch from '../utils/touch';
+import { themes } from '../constants/colors';
 import sharedStyles from '../views/Styles';
 
 const styles = StyleSheet.create({
@@ -12,7 +12,7 @@ const styles = StyleSheet.create({
 		flexDirection: 'row',
 		alignItems: 'center',
 		justifyContent: 'center',
-		height: 56,
+		height: 46,
 		paddingHorizontal: 15
 	},
 	disabled: {
@@ -24,24 +24,22 @@ const styles = StyleSheet.create({
 	},
 	title: {
 		fontSize: 16,
-		...sharedStyles.textColorNormal,
 		...sharedStyles.textRegular
 	},
 	subtitle: {
 		fontSize: 14,
-		...sharedStyles.textColorNormal,
 		...sharedStyles.textRegular
 	}
 });
 
 const Content = React.memo(({
-	title, subtitle, disabled, testID, right, color
+	title, subtitle, disabled, testID, right, color, theme
 }) => (
 	<View style={[styles.container, disabled && styles.disabled]} testID={testID}>
 		<View style={styles.textContainer}>
-			<Text style={[styles.title, color && { color }]}>{title}</Text>
+			<Text style={[styles.title, { color: color || themes[theme].titleText }]}>{title}</Text>
 			{subtitle
-				? <Text style={styles.subtitle}>{subtitle}</Text>
+				? <Text style={[styles.subtitle, { color: themes[theme].bodyText }]}>{subtitle}</Text>
 				: null
 			}
 		</View>
@@ -52,25 +50,30 @@ const Content = React.memo(({
 const Button = React.memo(({
 	onPress, ...props
 }) => (
-	<RectButton
+	<Touch
 		onPress={onPress}
-		activeOpacity={0.1}
-		underlayColor={COLOR_TEXT}
+		style={{ backgroundColor: themes[props.theme].backgroundColor }}
 		enabled={!props.disabled}
+		theme={props.theme}
 	>
 		<Content {...props} />
-	</RectButton>
+	</Touch>
 ));
 
 const Item = React.memo(({ ...props }) => {
 	if (props.onPress) {
 		return <Button {...props} />;
 	}
-	return <Content {...props} />;
+	return (
+		<View style={{ backgroundColor: themes[props.theme].backgroundColor }}>
+			<Content {...props} />
+		</View>
+	);
 });
 
 Item.propTypes = {
-	onPress: PropTypes.func
+	onPress: PropTypes.func,
+	theme: PropTypes.string
 };
 
 Content.propTypes = {
@@ -78,13 +81,15 @@ Content.propTypes = {
 	subtitle: PropTypes.string,
 	right: PropTypes.func,
 	disabled: PropTypes.bool,
-	color: PropTypes.string,
-	testID: PropTypes.string
+	testID: PropTypes.string,
+	theme: PropTypes.string,
+	color: PropTypes.string
 };
 
 Button.propTypes = {
 	onPress: PropTypes.func,
-	disabled: PropTypes.bool
+	disabled: PropTypes.bool,
+	theme: PropTypes.string
 };
 
 Button.defaultProps = {

app/containers/MessageBox/CommandsPreview/Item.js

@@ -1,14 +1,15 @@
 import React, { useContext, useState } from 'react';
 import PropTypes from 'prop-types';
-import { TouchableOpacity, ActivityIndicator } from 'react-native';
+import { TouchableOpacity } from 'react-native';
 import FastImage from 'react-native-fast-image';
 
 import styles from '../styles';
 import { CustomIcon } from '../../../lib/Icons';
-import { COLOR_PRIMARY } from '../../../constants/colors';
+import { themes } from '../../../constants/colors';
 import MessageboxContext from '../Context';
+import ActivityIndicator from '../../ActivityIndicator';
 
-const Item = ({ item }) => {
+const Item = ({ item, theme }) => {
 	const context = useContext(MessageboxContext);
 	const { onPressCommandPreview } = context;
 	const [loading, setLoading] = useState(true);
@@ -28,17 +29,18 @@ const Item = ({ item }) => {
 						onLoadStart={() => setLoading(true)}
 						onLoad={() => setLoading(false)}
 					>
-						{ loading ? <ActivityIndicator /> : null }
+						{ loading ? <ActivityIndicator theme={theme} /> : null }
 					</FastImage>
 				)
-				: <CustomIcon name='file-generic' size={36} color={COLOR_PRIMARY} />
+				: <CustomIcon name='file-generic' size={36} color={themes[theme].actionTintColor} />
 			}
 		</TouchableOpacity>
 	);
 };
 
 Item.propTypes = {
-	item: PropTypes.object
+	item: PropTypes.object,
+	theme: PropTypes.string
 };
 
 export default Item;

app/containers/MessageBox/CommandsPreview/index.js

@@ -5,17 +5,19 @@ import equal from 'deep-equal';
 
 import Item from './Item';
 import styles from '../styles';
+import { themes } from '../../../constants/colors';
+import { withTheme } from '../../../theme';
 
-const CommandsPreview = React.memo(({ commandPreview, showCommandPreview }) => {
+const CommandsPreview = React.memo(({ theme, commandPreview, showCommandPreview }) => {
 	if (!showCommandPreview) {
 		return null;
 	}
 	return (
 		<FlatList
 			testID='commandbox-container'
-			style={styles.mentionList}
+			style={[styles.mentionList, { backgroundColor: themes[theme].messageboxBackground }]}
 			data={commandPreview}
-			renderItem={({ item }) => <Item item={item} />}
+			renderItem={({ item }) => <Item item={item} theme={theme} />}
 			keyExtractor={item => item.id}
 			keyboardShouldPersistTaps='always'
 			horizontal
@@ -23,6 +25,9 @@ const CommandsPreview = React.memo(({ commandPreview, showCommandPreview }) => {
 		/>
 	);
 }, (prevProps, nextProps) => {
+	if (prevProps.theme !== nextProps.theme) {
+		return false;
+	}
 	if (prevProps.showCommandPreview !== nextProps.showCommandPreview) {
 		return false;
 	}
@@ -34,7 +39,8 @@ const CommandsPreview = React.memo(({ commandPreview, showCommandPreview }) => {
 
 CommandsPreview.propTypes = {
 	commandPreview: PropTypes.array,
-	showCommandPreview: PropTypes.bool
+	showCommandPreview: PropTypes.bool,
+	theme: PropTypes.string
 };
 
-export default CommandsPreview;
+export default withTheme(CommandsPreview);

app/containers/MessageBox/EmojiKeyboard.js

@@ -1,12 +1,19 @@
 import React from 'react';
 import { View } from 'react-native';
 import { KeyboardRegistry } from 'react-native-keyboard-input';
+import PropTypes from 'prop-types';
 
 import store from '../../lib/createStore';
 import EmojiPicker from '../EmojiPicker';
 import styles from './styles';
+import { themes } from '../../constants/colors';
+import { withTheme } from '../../theme';
 
 export default class EmojiKeyboard extends React.PureComponent {
+	static propTypes = {
+		theme: PropTypes.string
+	};
+
 	constructor(props) {
 		super(props);
 		const state = store.getState();
@@ -18,11 +25,12 @@ export default class EmojiKeyboard extends React.PureComponent {
 	}
 
 	render() {
+		const { theme } = this.props;
 		return (
-			<View style={styles.emojiKeyboardContainer} testID='messagebox-keyboard-emoji'>
+			<View style={[styles.emojiKeyboardContainer, { borderTopColor: themes[theme].borderColor }]} testID='messagebox-keyboard-emoji'>
 				<EmojiPicker onEmojiSelected={this.onEmojiSelected} baseUrl={this.baseUrl} />
 			</View>
 		);
 	}
 }
-KeyboardRegistry.registerKeyboard('EmojiKeyboard', () => EmojiKeyboard);
+KeyboardRegistry.registerKeyboard('EmojiKeyboard', () => withTheme(EmojiKeyboard));

app/containers/MessageBox/LeftButtons.android.js

@@ -4,21 +4,23 @@ import PropTypes from 'prop-types';
 import { CancelEditingButton, ToggleEmojiButton } from './buttons';
 
 const LeftButtons = React.memo(({
-	showEmojiKeyboard, editing, editCancel, openEmoji, closeEmoji
+	theme, showEmojiKeyboard, editing, editCancel, openEmoji, closeEmoji
 }) => {
 	if (editing) {
-		return <CancelEditingButton onPress={editCancel} />;
+		return <CancelEditingButton onPress={editCancel} theme={theme} />;
 	}
 	return (
 		<ToggleEmojiButton
 			show={showEmojiKeyboard}
 			open={openEmoji}
 			close={closeEmoji}
+			theme={theme}
 		/>
 	);
 });
 
 LeftButtons.propTypes = {
+	theme: PropTypes.string,
 	showEmojiKeyboard: PropTypes.bool,
 	openEmoji: PropTypes.func.isRequired,
 	closeEmoji: PropTypes.func.isRequired,

app/containers/MessageBox/LeftButtons.ios.js

@@ -4,15 +4,16 @@ import PropTypes from 'prop-types';
 import { CancelEditingButton, FileButton } from './buttons';
 
 const LeftButtons = React.memo(({
-	showFileActions, editing, editCancel
+	theme, showFileActions, editing, editCancel
 }) => {
 	if (editing) {
-		return <CancelEditingButton onPress={editCancel} />;
+		return <CancelEditingButton onPress={editCancel} theme={theme} />;
 	}
-	return <FileButton onPress={showFileActions} />;
+	return <FileButton onPress={showFileActions} theme={theme} />;
 });
 
 LeftButtons.propTypes = {
+	theme: PropTypes.string,
 	showFileActions: PropTypes.func.isRequired,
 	editing: PropTypes.bool,
 	editCancel: PropTypes.func.isRequired

app/containers/MessageBox/Mentions/FixedMentionItem.js

@@ -4,20 +4,30 @@ import PropTypes from 'prop-types';
 
 import styles from '../styles';
 import I18n from '../../../i18n';
+import { themes } from '../../../constants/colors';
 
-const FixedMentionItem = ({ item, onPress }) => (
+const FixedMentionItem = ({ item, onPress, theme }) => (
 	<TouchableOpacity
-		style={styles.mentionItem}
+		style={[
+			styles.mentionItem,
+			{
+				backgroundColor: themes[theme].auxiliaryBackground,
+				borderTopColor: themes[theme].separatorColor
+			}
+		]}
 		onPress={() => onPress(item)}
 	>
-		<Text style={styles.fixedMentionAvatar}>{item.username}</Text>
-		<Text style={styles.mentionText}>{item.username === 'here' ? I18n.t('Notify_active_in_this_room') : I18n.t('Notify_all_in_this_room')}</Text>
+		<Text style={[styles.fixedMentionAvatar, { color: themes[theme].titleText }]}>{item.username}</Text>
+		<Text style={[styles.mentionText, { color: themes[theme].titleText }]}>
+			{item.username === 'here' ? I18n.t('Notify_active_in_this_room') : I18n.t('Notify_all_in_this_room')}
+		</Text>
 	</TouchableOpacity>
 );
 
 FixedMentionItem.propTypes = {
 	item: PropTypes.object,
-	onPress: PropTypes.func
+	onPress: PropTypes.func,
+	theme: PropTypes.string
 };
 
 export default FixedMentionItem;

app/containers/MessageBox/Mentions/MentionItem.js

@@ -11,9 +11,10 @@ import {
 	MENTIONS_TRACKING_TYPE_EMOJIS,
 	MENTIONS_TRACKING_TYPE_COMMANDS
 } from '../constants';
+import { themes } from '../../../constants/colors';
 
 const MentionItem = ({
-	item, trackingType
+	item, trackingType, theme
 }) => {
 	const context = useContext(MessageboxContext);
 	const { baseUrl, user, onPressMention } = context;
@@ -32,7 +33,7 @@ const MentionItem = ({
 	const testID = defineTestID(trackingType);
 
 	if (item.username === 'all' || item.username === 'here') {
-		return <FixedMentionItem item={item} onPress={onPressMention} />;
+		return <FixedMentionItem item={item} onPress={onPressMention} theme={theme} />;
 	}
 
 	let content = (
@@ -46,7 +47,7 @@ const MentionItem = ({
 				userId={user.id}
 				token={user.token}
 			/>
-			<Text style={styles.mentionText}>{ item.username || item.name || item }</Text>
+			<Text style={[styles.mentionText, { color: themes[theme].titleText }]}>{ item.username || item.name || item }</Text>
 		</>
 	);
 
@@ -54,7 +55,7 @@ const MentionItem = ({
 		content = (
 			<>
 				<MentionEmoji item={item} />
-				<Text style={styles.mentionText}>:{ item.name || item }:</Text>
+				<Text style={[styles.mentionText, { color: themes[theme].titleText }]}>:{ item.name || item }:</Text>
 			</>
 		);
 	}
@@ -62,15 +63,21 @@ const MentionItem = ({
 	if (trackingType === MENTIONS_TRACKING_TYPE_COMMANDS) {
 		content = (
 			<>
-				<Text style={styles.slash}>/</Text>
-				<Text>{ item.command}</Text>
+				<Text style={[styles.slash, { backgroundColor: themes[theme].borderColor, color: themes[theme].tintColor }]}>/</Text>
+				<Text style={[styles.mentionText, { color: themes[theme].titleText }]}>{ item.command}</Text>
 			</>
 		);
 	}
 
 	return (
 		<TouchableOpacity
-			style={styles.mentionItem}
+			style={[
+				styles.mentionItem,
+				{
+					backgroundColor: themes[theme].auxiliaryBackground,
+					borderTopColor: themes[theme].separatorColor
+				}
+			]}
 			onPress={() => onPressMention(item)}
 			testID={testID}
 		>
@@ -81,7 +88,8 @@ const MentionItem = ({
 
 MentionItem.propTypes = {
 	item: PropTypes.object,
-	trackingType: PropTypes.string
+	trackingType: PropTypes.string,
+	theme: PropTypes.string
 };
 
 export default MentionItem;

app/containers/MessageBox/Mentions/index.js

@@ -5,23 +5,27 @@ import equal from 'deep-equal';
 
 import styles from '../styles';
 import MentionItem from './MentionItem';
+import { themes } from '../../../constants/colors';
 
-const Mentions = React.memo(({ mentions, trackingType }) => {
+const Mentions = React.memo(({ mentions, trackingType, theme }) => {
 	if (!trackingType) {
 		return null;
 	}
 	return (
 		<FlatList
 			testID='messagebox-container'
-			style={styles.mentionList}
+			style={[styles.mentionList, { backgroundColor: themes[theme].auxiliaryBackground }]}
 			data={mentions}
 			extraData={mentions}
-			renderItem={({ item }) => <MentionItem item={item} trackingType={trackingType} />}
+			renderItem={({ item }) => <MentionItem item={item} trackingType={trackingType} theme={theme} />}
 			keyExtractor={item => item.id || item.username || item.command || item}
 			keyboardShouldPersistTaps='always'
 		/>
 	);
 }, (prevProps, nextProps) => {
+	if (prevProps.theme !== nextProps.theme) {
+		return false;
+	}
 	if (prevProps.trackingType !== nextProps.trackingType) {
 		return false;
 	}
@@ -33,7 +37,8 @@ const Mentions = React.memo(({ mentions, trackingType }) => {
 
 Mentions.propTypes = {
 	mentions: PropTypes.array,
-	trackingType: PropTypes.string
+	trackingType: PropTypes.string,
+	theme: PropTypes.string
 };
 
 export default Mentions;

app/containers/MessageBox/Recording.js

@@ -11,7 +11,7 @@ import styles from './styles';
 import I18n from '../../i18n';
 import { isIOS, isAndroid } from '../../utils/deviceInfo';
 import { CustomIcon } from '../../lib/Icons';
-import { COLOR_SUCCESS, COLOR_DANGER } from '../../constants/colors';
+import { themes } from '../../constants/colors';
 
 export const _formatTime = function(seconds) {
 	let minutes = Math.floor(seconds / 60);
@@ -37,6 +37,7 @@ export default class extends React.PureComponent {
 	}
 
 	static propTypes = {
+		theme: PropTypes.string,
 		onFinish: PropTypes.func.isRequired
 	}
 
@@ -122,14 +123,17 @@ export default class extends React.PureComponent {
 
 	render() {
 		const { currentTime } = this.state;
+		const { theme } = this.props;
 
 		return (
 			<SafeAreaView
-				key='messagebox-recording'
 				testID='messagebox-recording'
-				style={styles.textBox}
+				style={[
+					styles.textBox,
+					{ borderTopColor: themes[theme].borderColor }
+				]}
 			>
-				<View style={styles.textArea}>
+				<View style={[styles.textArea, { backgroundColor: themes[theme].messageboxBackground }]}>
 					<BorderlessButton
 						onPress={this.cancelAudioMessage}
 						accessibilityLabel={I18n.t('Cancel_recording')}
@@ -138,11 +142,11 @@ export default class extends React.PureComponent {
 					>
 						<CustomIcon
 							size={22}
-							color={COLOR_DANGER}
+							color={themes[theme].dangerColor}
 							name='cross'
 						/>
 					</BorderlessButton>
-					<Text key='currentTime' style={styles.textBoxInput}>{currentTime}</Text>
+					<Text key='currentTime' style={[styles.textBoxInput, { color: themes[theme].titleText }]}>{currentTime}</Text>
 					<BorderlessButton
 						onPress={this.finishAudioMessage}
 						accessibilityLabel={I18n.t('Finish_recording')}
@@ -151,7 +155,7 @@ export default class extends React.PureComponent {
 					>
 						<CustomIcon
 							size={22}
-							color={COLOR_SUCCESS}
+							color={themes[theme].successColor}
 							name='check'
 						/>
 					</BorderlessButton>

app/containers/MessageBox/ReplyPreview.js

@@ -7,20 +7,16 @@ import { connect } from 'react-redux';
 import Markdown from '../markdown';
 import { CustomIcon } from '../../lib/Icons';
 import sharedStyles from '../../views/Styles';
-import {
-	COLOR_PRIMARY, COLOR_BACKGROUND_CONTAINER, COLOR_TEXT_DESCRIPTION, COLOR_WHITE
-} from '../../constants/colors';
+import { themes } from '../../constants/colors';
 
 const styles = StyleSheet.create({
 	container: {
 		flexDirection: 'row',
-		marginTop: 10,
-		backgroundColor: COLOR_WHITE
+		paddingTop: 10
 	},
 	messageContainer: {
 		flex: 1,
 		marginHorizontal: 10,
-		backgroundColor: COLOR_BACKGROUND_CONTAINER,
 		paddingHorizontal: 15,
 		paddingVertical: 10,
 		borderRadius: 4
@@ -30,7 +26,6 @@ const styles = StyleSheet.create({
 		alignItems: 'center'
 	},
 	username: {
-		color: COLOR_PRIMARY,
 		fontSize: 16,
 		...sharedStyles.textMedium
 	},
@@ -38,7 +33,6 @@ const styles = StyleSheet.create({
 		fontSize: 12,
 		lineHeight: 16,
 		marginLeft: 6,
-		...sharedStyles.textColorDescription,
 		...sharedStyles.textRegular,
 		fontWeight: '300'
 	},
@@ -48,7 +42,7 @@ const styles = StyleSheet.create({
 });
 
 const ReplyPreview = React.memo(({
-	message, Message_TimeFormat, baseUrl, username, useMarkdown, replying, getCustomEmoji, close
+	message, Message_TimeFormat, baseUrl, username, useMarkdown, replying, getCustomEmoji, close, theme
 }) => {
 	if (!replying) {
 		return null;
@@ -56,18 +50,32 @@ const ReplyPreview = React.memo(({
 
 	const time = moment(message.ts).format(Message_TimeFormat);
 	return (
-		<View style={styles.container}>
-			<View style={styles.messageContainer}>
+		<View
+			style={[
+				styles.container,
+				{ backgroundColor: themes[theme].messageboxBackground }
+			]}
+		>
+			<View style={[styles.messageContainer, { backgroundColor: themes[theme].chatComponentBackground }]}>
 				<View style={styles.header}>
-					<Text style={styles.username}>{message.u.username}</Text>
-					<Text style={styles.time}>{time}</Text>
+					<Text style={[styles.username, { color: themes[theme].tintColor }]}>{message.u.username}</Text>
+					<Text style={[styles.time, { color: themes[theme].auxiliaryText }]}>{time}</Text>
 				</View>
-				<Markdown msg={message.msg} baseUrl={baseUrl} username={username} getCustomEmoji={getCustomEmoji} numberOfLines={1} useMarkdown={useMarkdown} preview />
+				<Markdown
+					msg={message.msg}
+					baseUrl={baseUrl}
+					username={username}
+					getCustomEmoji={getCustomEmoji}
+					numberOfLines={1}
+					useMarkdown={useMarkdown}
+					preview
+					theme={theme}
+				/>
 			</View>
-			<CustomIcon name='cross' color={COLOR_TEXT_DESCRIPTION} size={20} style={styles.close} onPress={close} />
+			<CustomIcon name='cross' color={themes[theme].auxiliaryText} size={20} style={styles.close} onPress={close} />
 		</View>
 	);
-}, (prevProps, nextProps) => prevProps.replying === nextProps.replying);
+}, (prevProps, nextProps) => prevProps.replying === nextProps.replying && prevProps.theme === nextProps.theme);
 
 ReplyPreview.propTypes = {
 	replying: PropTypes.bool,
@@ -77,7 +85,8 @@ ReplyPreview.propTypes = {
 	close: PropTypes.func.isRequired,
 	baseUrl: PropTypes.string.isRequired,
 	username: PropTypes.string.isRequired,
-	getCustomEmoji: PropTypes.func
+	getCustomEmoji: PropTypes.func,
+	theme: PropTypes.string
 };
 
 const mapStateToProps = state => ({

app/containers/MessageBox/RightButtons.android.js

@@ -4,20 +4,21 @@ import PropTypes from 'prop-types';
 import { SendButton, AudioButton, FileButton } from './buttons';
 
 const RightButtons = React.memo(({
-	showSend, submit, recordAudioMessage, showFileActions
+	theme, showSend, submit, recordAudioMessage, showFileActions
 }) => {
 	if (showSend) {
-		return <SendButton onPress={submit} />;
+		return <SendButton onPress={submit} theme={theme} />;
 	}
 	return (
 		<>
-			<AudioButton onPress={recordAudioMessage} />
-			<FileButton onPress={showFileActions} />
+			<AudioButton onPress={recordAudioMessage} theme={theme} />
+			<FileButton onPress={showFileActions} theme={theme} />
 		</>
 	);
 });
 
 RightButtons.propTypes = {
+	theme: PropTypes.string,
 	showSend: PropTypes.bool,
 	submit: PropTypes.func.isRequired,
 	recordAudioMessage: PropTypes.func.isRequired,

app/containers/MessageBox/RightButtons.ios.js

@@ -4,15 +4,16 @@ import PropTypes from 'prop-types';
 import { SendButton, AudioButton } from './buttons';
 
 const RightButtons = React.memo(({
-	showSend, submit, recordAudioMessage
+	theme, showSend, submit, recordAudioMessage
 }) => {
 	if (showSend) {
-		return <SendButton onPress={submit} />;
+		return <SendButton theme={theme} onPress={submit} />;
 	}
-	return <AudioButton onPress={recordAudioMessage} />;
+	return <AudioButton theme={theme} onPress={recordAudioMessage} />;
 });
 
 RightButtons.propTypes = {
+	theme: PropTypes.string,
 	showSend: PropTypes.bool,
 	submit: PropTypes.func.isRequired,
 	recordAudioMessage: PropTypes.func.isRequired

app/containers/MessageBox/UploadModal.js

@@ -11,15 +11,12 @@ import TextInput from '../TextInput';
 import Button from '../Button';
 import I18n from '../../i18n';
 import sharedStyles from '../../views/Styles';
-import { isIOS, isTablet } from '../../utils/deviceInfo';
-import {
-	COLOR_PRIMARY, COLOR_BACKGROUND_CONTAINER, COLOR_WHITE
-} from '../../constants/colors';
+import { isIOS } from '../../utils/deviceInfo';
+import { themes } from '../../constants/colors';
 import { CustomIcon } from '../../lib/Icons';
+import { withTheme } from '../../theme';
 import { withSplit } from '../../split';
 
-const cancelButtonColor = COLOR_BACKGROUND_CONTAINER;
-
 const styles = StyleSheet.create({
 	modal: {
 		width: '100%',
@@ -33,12 +30,10 @@ const styles = StyleSheet.create({
 	},
 	title: {
 		fontSize: 14,
-		...sharedStyles.textColorTitle,
 		...sharedStyles.textBold
 	},
 	container: {
 		height: 430,
-		backgroundColor: COLOR_WHITE,
 		flexDirection: 'column'
 	},
 	scrollView: {
@@ -57,8 +52,7 @@ const styles = StyleSheet.create({
 	buttonContainer: {
 		flexDirection: 'row',
 		justifyContent: 'space-between',
-		padding: 16,
-		backgroundColor: COLOR_BACKGROUND_CONTAINER
+		padding: 16
 	},
 	button: {
 		marginBottom: 0
@@ -74,7 +68,6 @@ const styles = StyleSheet.create({
 		textAlign: 'center'
 	},
 	fileIcon: {
-		color: COLOR_PRIMARY,
 		margin: 20,
 		flex: 1,
 		textAlign: 'center'
@@ -83,7 +76,6 @@ const styles = StyleSheet.create({
 		flex: 1,
 		borderRadius: 4,
 		height: 150,
-		backgroundColor: '#1f2329',
 		marginBottom: 6,
 		alignItems: 'center',
 		justifyContent: 'center'
@@ -98,6 +90,7 @@ class UploadModal extends Component {
 		close: PropTypes.func,
 		submit: PropTypes.func,
 		window: PropTypes.object,
+		theme: PropTypes.string,
 		split: PropTypes.bool
 	}
 
@@ -120,7 +113,9 @@ class UploadModal extends Component {
 
 	shouldComponentUpdate(nextProps, nextState) {
 		const { name, description, file } = this.state;
-		const { window, isVisible, split } = this.props;
+		const {
+			window, isVisible, split, theme
+		} = this.props;
 
 		if (nextState.name !== name) {
 			return true;
@@ -128,6 +123,9 @@ class UploadModal extends Component {
 		if (nextProps.split !== split) {
 			return true;
 		}
+		if (nextProps.theme !== theme) {
+			return true;
+		}
 		if (nextState.description !== description) {
 			return true;
 		}
@@ -150,67 +148,69 @@ class UploadModal extends Component {
 	}
 
 	renderButtons = () => {
-		const { close } = this.props;
+		const { close, theme } = this.props;
 		if (isIOS) {
 			return (
-				<View style={styles.buttonContainer}>
+				<View style={[styles.buttonContainer, { backgroundColor: themes[theme].auxiliaryBackground }]}>
 					<Button
 						title={I18n.t('Cancel')}
 						type='secondary'
-						backgroundColor={cancelButtonColor}
+						backgroundColor={themes[theme].chatComponentBackground}
 						style={styles.button}
 						onPress={close}
+						theme={theme}
 					/>
 					<Button
 						title={I18n.t('Send')}
 						type='primary'
 						style={styles.button}
 						onPress={this.submit}
+						theme={theme}
 					/>
 				</View>
 			);
 		}
 		// FIXME: RNGH don't work well on Android modals: https://github.com/kmagiera/react-native-gesture-handler/issues/139
 		return (
-			<View style={styles.buttonContainer}>
+			<View style={[styles.buttonContainer, { backgroundColor: themes[theme].auxiliaryBackground }]}>
 				<TouchableHighlight
 					onPress={close}
-					style={[styles.androidButton, { backgroundColor: cancelButtonColor }]}
-					underlayColor={cancelButtonColor}
+					style={[styles.androidButton, { backgroundColor: themes[theme].chatComponentBackground }]}
+					underlayColor={themes[theme].chatComponentBackground}
 					activeOpacity={0.5}
 				>
-					<Text style={[styles.androidButtonText, { ...sharedStyles.textBold, color: COLOR_PRIMARY }]}>{I18n.t('Cancel')}</Text>
+					<Text style={[styles.androidButtonText, { ...sharedStyles.textBold, color: themes[theme].tintColor }]}>{I18n.t('Cancel')}</Text>
 				</TouchableHighlight>
 				<TouchableHighlight
 					onPress={this.submit}
-					style={[styles.androidButton, { backgroundColor: COLOR_PRIMARY }]}
-					underlayColor={COLOR_PRIMARY}
+					style={[styles.androidButton, { backgroundColor: themes[theme].tintColor }]}
+					underlayColor={themes[theme].tintColor}
 					activeOpacity={0.5}
 				>
-					<Text style={[styles.androidButtonText, { ...sharedStyles.textMedium, color: COLOR_WHITE }]}>{I18n.t('Send')}</Text>
+					<Text style={[styles.androidButtonText, { ...sharedStyles.textMedium, color: themes[theme].buttonText }]}>{I18n.t('Send')}</Text>
 				</TouchableHighlight>
 			</View>
 		);
 	}
 
 	renderPreview() {
-		const { file, split } = this.props;
+		const { file, split, theme } = this.props;
 		if (file.mime && file.mime.match(/image/)) {
 			return (<Image source={{ isStatic: true, uri: file.path }} style={[styles.image, split && styles.bigPreview]} />);
 		}
 		if (file.mime && file.mime.match(/video/)) {
 			return (
-				<View style={styles.video}>
-					<CustomIcon name='play' size={72} color={COLOR_WHITE} />
+				<View style={[styles.video, { backgroundColor: themes[theme].bannerBackground }]}>
+					<CustomIcon name='play' size={72} color={themes[theme].buttonText} />
 				</View>
 			);
 		}
-		return (<CustomIcon name='file-generic' size={72} style={styles.fileIcon} />);
+		return (<CustomIcon name='file-generic' size={72} style={[styles.fileIcon, { color: themes[theme].tintColor }]} />);
 	}
 
 	render() {
 		const {
-			window: { width }, isVisible, close, split
+			window: { width }, isVisible, close, split, theme
 		} = this.props;
 		const { name, description } = this.state;
 		return (
@@ -225,9 +225,9 @@ class UploadModal extends Component {
 				hideModalContentWhileAnimating
 				avoidKeyboard
 			>
-				<View style={[styles.container, { width: (isTablet ? '80%' : width - 32) }, split && sharedStyles.modal]}>
+				<View style={[styles.container, { width: width - 32, backgroundColor: themes[theme].chatComponentBackground }, split && sharedStyles.modal]}>
 					<View style={styles.titleContainer}>
-						<Text style={styles.title}>{I18n.t('Upload_file_question_mark')}</Text>
+						<Text style={[styles.title, { color: themes[theme].titleText }]}>{I18n.t('Upload_file_question_mark')}</Text>
 					</View>
 
 					<ScrollView style={styles.scrollView}>
@@ -236,11 +236,13 @@ class UploadModal extends Component {
 							placeholder={I18n.t('File_name')}
 							value={name}
 							onChangeText={value => this.setState({ name: value })}
+							theme={theme}
 						/>
 						<TextInput
 							placeholder={I18n.t('File_description')}
 							value={description}
 							onChangeText={value => this.setState({ description: value })}
+							theme={theme}
 						/>
 					</ScrollView>
 					{this.renderButtons()}
@@ -250,4 +252,4 @@ class UploadModal extends Component {
 	}
 }
 
-export default responsive(withSplit(UploadModal));
+export default responsive(withTheme(withSplit(UploadModal)));

app/containers/MessageBox/buttons/AudioButton.js

@@ -3,16 +3,18 @@ import PropTypes from 'prop-types';
 
 import BaseButton from './BaseButton';
 
-const AudioButton = React.memo(({ onPress }) => (
+const AudioButton = React.memo(({ theme, onPress }) => (
 	<BaseButton
 		onPress={onPress}
 		testID='messagebox-send-audio'
 		accessibilityLabel='Send_audio_message'
 		icon='mic'
+		theme={theme}
 	/>
 ));
 
 AudioButton.propTypes = {
+	theme: PropTypes.string,
 	onPress: PropTypes.func.isRequired
 };
 

app/containers/MessageBox/buttons/BaseButton.js

@@ -2,13 +2,13 @@ import React from 'react';
 import { BorderlessButton } from 'react-native-gesture-handler';
 import PropTypes from 'prop-types';
 
-import { COLOR_PRIMARY } from '../../../constants/colors';
+import { themes } from '../../../constants/colors';
 import { CustomIcon } from '../../../lib/Icons';
 import styles from '../styles';
 import I18n from '../../../i18n';
 
 const BaseButton = React.memo(({
-	onPress, testID, accessibilityLabel, icon
+	onPress, testID, accessibilityLabel, icon, theme
 }) => (
 	<BorderlessButton
 		onPress={onPress}
@@ -17,11 +17,12 @@ const BaseButton = React.memo(({
 		accessibilityLabel={I18n.t(accessibilityLabel)}
 		accessibilityTraits='button'
 	>
-		<CustomIcon name={icon} size={23} color={COLOR_PRIMARY} />
+		<CustomIcon name={icon} size={23} color={themes[theme].tintColor} />
 	</BorderlessButton>
 ));
 
 BaseButton.propTypes = {
+	theme: PropTypes.string,
 	onPress: PropTypes.func.isRequired,
 	testID: PropTypes.string.isRequired,
 	accessibilityLabel: PropTypes.string.isRequired,

app/containers/MessageBox/buttons/CancelEditingButton.js

@@ -3,16 +3,18 @@ import PropTypes from 'prop-types';
 
 import BaseButton from './BaseButton';
 
-const CancelEditingButton = React.memo(({ onPress }) => (
+const CancelEditingButton = React.memo(({ theme, onPress }) => (
 	<BaseButton
 		onPress={onPress}
 		testID='messagebox-cancel-editing'
 		accessibilityLabel='Cancel_editing'
 		icon='cross'
+		theme={theme}
 	/>
 ));
 
 CancelEditingButton.propTypes = {
+	theme: PropTypes.string,
 	onPress: PropTypes.func.isRequired
 };
 

app/containers/MessageBox/buttons/FileButton.js

@@ -3,16 +3,18 @@ import PropTypes from 'prop-types';
 
 import BaseButton from './BaseButton';
 
-const FileButton = React.memo(({ onPress }) => (
+const FileButton = React.memo(({ theme, onPress }) => (
 	<BaseButton
 		onPress={onPress}
 		testID='messagebox-actions'
 		accessibilityLabel='Message_actions'
 		icon='plus'
+		theme={theme}
 	/>
 ));
 
 FileButton.propTypes = {
+	theme: PropTypes.string,
 	onPress: PropTypes.func.isRequired
 };
 

app/containers/MessageBox/buttons/SendButton.js

@@ -3,16 +3,18 @@ import PropTypes from 'prop-types';
 
 import BaseButton from './BaseButton';
 
-const SendButton = React.memo(({ onPress }) => (
+const SendButton = React.memo(({ theme, onPress }) => (
 	<BaseButton
 		onPress={onPress}
 		testID='messagebox-send-message'
 		accessibilityLabel='Send_message'
 		icon='send1'
+		theme={theme}
 	/>
 ));
 
 SendButton.propTypes = {
+	theme: PropTypes.string,
 	onPress: PropTypes.func.isRequired
 };
 

app/containers/MessageBox/buttons/ToggleEmojiButton.js

@@ -3,7 +3,9 @@ import PropTypes from 'prop-types';
 
 import BaseButton from './BaseButton';
 
-const ToggleEmojiButton = React.memo(({ show, open, close }) => {
+const ToggleEmojiButton = React.memo(({
+	theme, show, open, close
+}) => {
 	if (show) {
 		return (
 			<BaseButton
@@ -11,6 +13,7 @@ const ToggleEmojiButton = React.memo(({ show, open, close }) => {
 				testID='messagebox-close-emoji'
 				accessibilityLabel='Close_emoji_selector'
 				icon='keyboard'
+				theme={theme}
 			/>
 		);
 	}
@@ -20,11 +23,13 @@ const ToggleEmojiButton = React.memo(({ show, open, close }) => {
 			testID='messagebox-open-emoji'
 			accessibilityLabel='Open_emoji_selector'
 			icon='emoji'
+			theme={theme}
 		/>
 	);
 });
 
 ToggleEmojiButton.propTypes = {
+	theme: PropTypes.string,
 	show: PropTypes.bool,
 	open: PropTypes.func.isRequired,
 	close: PropTypes.func.isRequired

app/containers/MessageBox/index.js

@@ -1,8 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import {
-	View, TextInput, Alert, Keyboard
-} from 'react-native';
+import { View, Alert, Keyboard } from 'react-native';
 import { connect } from 'react-redux';
 import { KeyboardAccessoryView } from 'react-native-keyboard-input';
 import ImagePicker from 'react-native-image-crop-picker';
@@ -11,6 +9,7 @@ import DocumentPicker from 'react-native-document-picker';
 import ActionSheet from 'react-native-action-sheet';
 import { Q } from '@nozbe/watermelondb';
 
+import TextInput from '../../presentation/TextInput';
 import { userTyping as userTypingAction } from '../../actions/room';
 import RocketChat from '../../lib/rocketchat';
 import styles from './styles';
@@ -22,7 +21,7 @@ import log from '../../utils/log';
 import I18n from '../../i18n';
 import ReplyPreview from './ReplyPreview';
 import debounce from '../../utils/debounce';
-import { COLOR_TEXT_DESCRIPTION } from '../../constants/colors';
+import { themes } from '../../constants/colors';
 import LeftButtons from './LeftButtons';
 import RightButtons from './RightButtons';
 import { isAndroid, isTablet } from '../../utils/deviceInfo';
@@ -43,6 +42,7 @@ import {
 	MENTIONS_TRACKING_TYPE_USERS
 } from './constants';
 import CommandsPreview from './CommandsPreview';
+import { withTheme } from '../../theme';
 
 const imagePickerConfig = {
 	cropping: true,
@@ -88,6 +88,7 @@ class MessageBox extends Component {
 		editRequest: PropTypes.func.isRequired,
 		onSubmit: PropTypes.func.isRequired,
 		typing: PropTypes.func,
+		theme: PropTypes.string,
 		replyCancel: PropTypes.func
 	}
 
@@ -198,8 +199,11 @@ class MessageBox extends Component {
 		} = this.state;
 
 		const {
-			roomType, replying, editing, isFocused
+			roomType, replying, editing, isFocused, theme
 		} = this.props;
+		if (nextProps.theme !== theme) {
+			return true;
+		}
 		if (!isFocused()) {
 			return false;
 		}
@@ -763,7 +767,7 @@ class MessageBox extends Component {
 			recording, showEmojiKeyboard, showSend, mentions, trackingType, commandPreview, showCommandPreview
 		} = this.state;
 		const {
-			editing, message, replying, replyCancel, user, getCustomEmoji
+			editing, message, replying, replyCancel, user, getCustomEmoji, theme
 		} = this.props;
 
 		const isAndroidTablet = isTablet && isAndroid ? {
@@ -773,25 +777,30 @@ class MessageBox extends Component {
 		} : {};
 
 		if (recording) {
-			return <Recording onFinish={this.finishAudioMessage} />;
+			return <Recording theme={theme} onFinish={this.finishAudioMessage} />;
 		}
 		return (
 			<>
 				<CommandsPreview commandPreview={commandPreview} showCommandPreview={showCommandPreview} />
-				<Mentions mentions={mentions} trackingType={trackingType} />
-				<View style={styles.composer}>
+				<Mentions mentions={mentions} trackingType={trackingType} theme={theme} />
+				<View style={[styles.composer, { borderTopColor: themes[theme].separatorColor }]}>
 					<ReplyPreview
 						message={message}
 						close={replyCancel}
 						username={user.username}
 						replying={replying}
 						getCustomEmoji={getCustomEmoji}
+						theme={theme}
 					/>
 					<View
-						style={[styles.textArea, editing && styles.editing]}
+						style={[
+							styles.textArea,
+							{ backgroundColor: themes[theme].messageboxBackground }, editing && { backgroundColor: themes[theme].chatComponentBackground }
+						]}
 						testID='messagebox'
 					>
 						<LeftButtons
+							theme={theme}
 							showEmojiKeyboard={showEmojiKeyboard}
 							editing={editing}
 							showFileActions={this.showFileActions}
@@ -810,11 +819,12 @@ class MessageBox extends Component {
 							underlineColorAndroid='transparent'
 							defaultValue=''
 							multiline
-							placeholderTextColor={COLOR_TEXT_DESCRIPTION}
 							testID='messagebox-input'
+							theme={theme}
 							{...isAndroidTablet}
 						/>
 						<RightButtons
+							theme={theme}
 							showSend={showSend}
 							submit={this.submit}
 							recordAudioMessage={this.recordAudioMessage}
@@ -829,7 +839,7 @@ class MessageBox extends Component {
 	render() {
 		console.count(`${ this.constructor.name }.render calls`);
 		const { showEmojiKeyboard, file } = this.state;
-		const { user, baseUrl } = this.props;
+		const { user, baseUrl, theme } = this.props;
 		return (
 			<MessageboxContext.Provider
 				value={{
@@ -849,6 +859,7 @@ class MessageBox extends Component {
 					// revealKeyboardInteractive
 					requiresSameParentToManageScrollView
 					addBottomView
+					bottomViewColor={themes[theme].messageboxBackground}
 				/>
 				<UploadModal
 					isVisible={(file && file.isVisible)}
@@ -877,4 +888,4 @@ const dispatchToProps = ({
 	typing: (rid, status) => userTypingAction(rid, status)
 });
 
-export default connect(mapStateToProps, dispatchToProps, null, { forwardRef: true })(MessageBox);
+export default connect(mapStateToProps, dispatchToProps, null, { forwardRef: true })(withTheme(MessageBox));

app/containers/MessageBox/styles.js

@@ -2,33 +2,25 @@ import { StyleSheet } from 'react-native';
 
 import { isIOS } from '../../utils/deviceInfo';
 import sharedStyles from '../../views/Styles';
-import {
-	COLOR_BORDER, COLOR_SEPARATOR, COLOR_BACKGROUND_CONTAINER, COLOR_WHITE, COLOR_PRIMARY
-} from '../../constants/colors';
 
 const MENTION_HEIGHT = 50;
 const SCROLLVIEW_MENTION_HEIGHT = 4 * MENTION_HEIGHT;
 
 export default StyleSheet.create({
 	textBox: {
-		backgroundColor: COLOR_WHITE,
 		flex: 0,
 		alignItems: 'center',
 		borderTopWidth: StyleSheet.hairlineWidth,
-		borderTopColor: COLOR_SEPARATOR,
 		zIndex: 2
 	},
 	composer: {
-		backgroundColor: COLOR_WHITE,
 		flexDirection: 'column',
-		borderTopColor: COLOR_SEPARATOR,
 		borderTopWidth: StyleSheet.hairlineWidth
 	},
 	textArea: {
 		flexDirection: 'row',
 		alignItems: 'center',
-		flexGrow: 0,
-		backgroundColor: COLOR_WHITE
+		flexGrow: 0
 	},
 	textBoxInput: {
 		textAlignVertical: 'center',
@@ -42,12 +34,8 @@ export default StyleSheet.create({
 		paddingRight: 0,
 		fontSize: 17,
 		letterSpacing: 0,
-		...sharedStyles.textColorNormal,
 		...sharedStyles.textRegular
 	},
-	editing: {
-		backgroundColor: '#fff5df'
-	},
 	actionButton: {
 		alignItems: 'center',
 		justifyContent: 'center',
@@ -59,9 +47,7 @@ export default StyleSheet.create({
 	},
 	mentionItem: {
 		height: MENTION_HEIGHT,
-		backgroundColor: COLOR_BACKGROUND_CONTAINER,
-		borderTopWidth: 1,
-		borderTopColor: COLOR_BORDER,
+		borderTopWidth: StyleSheet.hairlineWidth,
 		flexDirection: 'row',
 		alignItems: 'center',
 		paddingHorizontal: 5
@@ -81,30 +67,17 @@ export default StyleSheet.create({
 		textAlign: 'center',
 		width: 46,
 		fontSize: 14,
-		...sharedStyles.textBold,
-		...sharedStyles.textColorNormal
+		...sharedStyles.textBold
 	},
 	mentionText: {
 		fontSize: 14,
-		...sharedStyles.textRegular,
-		...sharedStyles.textColorNormal
+		...sharedStyles.textRegular
 	},
 	emojiKeyboardContainer: {
 		flex: 1,
-		borderTopColor: COLOR_BORDER,
-		borderTopWidth: 1
-	},
-	iphoneXArea: {
-		height: 50,
-		backgroundColor: COLOR_WHITE,
-		position: 'absolute',
-		bottom: 0,
-		left: 0,
-		right: 0
+		borderTopWidth: StyleSheet.hairlineWidth
 	},
 	slash: {
-		color: COLOR_PRIMARY,
-		backgroundColor: COLOR_BORDER,
 		height: 30,
 		width: 30,
 		padding: 5,
@@ -120,7 +93,6 @@ export default StyleSheet.create({
 		borderRadius: 4
 	},
 	commandPreview: {
-		backgroundColor: COLOR_BACKGROUND_CONTAINER,
 		height: 100,
 		flex: 1,
 		flexDirection: 'row',

app/containers/ReactionsModal.js

@@ -10,7 +10,8 @@ import Emoji from './message/Emoji';
 import I18n from '../i18n';
 import { CustomIcon } from '../lib/Icons';
 import sharedStyles from '../views/Styles';
-import { COLOR_WHITE } from '../constants/colors';
+import { themes } from '../constants/colors';
+import { withTheme } from '../theme';
 
 const styles = StyleSheet.create({
 	titleContainer: {
@@ -18,18 +19,15 @@ const styles = StyleSheet.create({
 		paddingVertical: 10
 	},
 	title: {
-		color: COLOR_WHITE,
 		textAlign: 'center',
 		fontSize: 16,
 		...sharedStyles.textSemibold
 	},
 	reactCount: {
-		color: COLOR_WHITE,
 		fontSize: 13,
 		...sharedStyles.textRegular
 	},
 	peopleReacted: {
-		color: COLOR_WHITE,
 		fontSize: 14,
 		...sharedStyles.textMedium
 	},
@@ -54,15 +52,14 @@ const styles = StyleSheet.create({
 	closeButton: {
 		position: 'absolute',
 		left: 0,
-		top: 10,
-		color: COLOR_WHITE
+		top: 10
 	}
 });
 const standardEmojiStyle = { fontSize: 20 };
 const customEmojiStyle = { width: 20, height: 20 };
 
 const Item = React.memo(({
-	item, user, baseUrl, getCustomEmoji
+	item, user, baseUrl, getCustomEmoji, theme
 }) => {
 	const count = item.usernames.length;
 	let usernames = item.usernames.slice(0, 3)
@@ -84,27 +81,29 @@ const Item = React.memo(({
 				/>
 			</View>
 			<View style={styles.peopleItemContainer}>
-				<Text style={styles.reactCount}>
+				<Text style={[styles.reactCount, { color: themes[theme].buttonText }]}>
 					{count === 1 ? I18n.t('1_person_reacted') : I18n.t('N_people_reacted', { n: count })}
 				</Text>
-				<Text style={styles.peopleReacted}>{ usernames }</Text>
+				<Text style={[styles.peopleReacted, { color: themes[theme].buttonText }]}>{ usernames }</Text>
 			</View>
 		</View>
 	);
 });
 
-const ModalContent = React.memo(({ message, onClose, ...props }) => {
+const ModalContent = React.memo(({
+	message, onClose, ...props
+}) => {
 	if (message && message.reactions) {
 		return (
 			<SafeAreaView style={{ flex: 1 }}>
 				<Touchable onPress={onClose}>
 					<View style={styles.titleContainer}>
 						<CustomIcon
-							style={styles.closeButton}
+							style={[styles.closeButton, { color: themes[props.theme].buttonText }]}
 							name='cross'
 							size={20}
 						/>
-						<Text style={styles.title}>{I18n.t('Reactions')}</Text>
+						<Text style={[styles.title, { color: themes[props.theme].buttonText }]}>{I18n.t('Reactions')}</Text>
 					</View>
 				</Touchable>
 				<FlatList
@@ -119,7 +118,9 @@ const ModalContent = React.memo(({ message, onClose, ...props }) => {
 	return null;
 });
 
-const ReactionsModal = React.memo(({ isVisible, onClose, ...props }) => (
+const ReactionsModal = React.memo(({
+	isVisible, onClose, theme, ...props
+}) => (
 	<Modal
 		isVisible={isVisible}
 		onBackdropPress={onClose}
@@ -128,19 +129,21 @@ const ReactionsModal = React.memo(({ isVisible, onClose, ...props }) => (
 		onSwipeComplete={onClose}
 		swipeDirection={['up', 'left', 'right', 'down']}
 	>
-		<ModalContent onClose={onClose} {...props} />
+		<ModalContent onClose={onClose} theme={theme} {...props} />
 	</Modal>
-), (prevProps, nextProps) => prevProps.isVisible === nextProps.isVisible);
+), (prevProps, nextProps) => prevProps.isVisible === nextProps.isVisible && prevProps.theme === nextProps.theme);
 
 ReactionsModal.propTypes = {
 	isVisible: PropTypes.bool,
-	onClose: PropTypes.func
+	onClose: PropTypes.func,
+	theme: PropTypes.string
 };
 ReactionsModal.displayName = 'ReactionsModal';
 
 ModalContent.propTypes = {
 	message: PropTypes.object,
-	onClose: PropTypes.func
+	onClose: PropTypes.func,
+	theme: PropTypes.string
 };
 ModalContent.displayName = 'ReactionsModalContent';
 
@@ -148,8 +151,9 @@ Item.propTypes = {
 	item: PropTypes.object,
 	user: PropTypes.object,
 	baseUrl: PropTypes.string,
-	getCustomEmoji: PropTypes.func
+	getCustomEmoji: PropTypes.func,
+	theme: PropTypes.string
 };
 Item.displayName = 'ReactionsModalItem';
 
-export default ReactionsModal;
+export default withTheme(ReactionsModal);

app/containers/RoomTypeIcon.js

@@ -2,43 +2,42 @@ import React from 'react';
 import { Image, StyleSheet } from 'react-native';
 import PropTypes from 'prop-types';
 import { CustomIcon } from '../lib/Icons';
-import { COLOR_TEXT_DESCRIPTION } from '../constants/colors';
+import { themes } from '../constants/colors';
 
 const styles = StyleSheet.create({
 	style: {
 		marginRight: 7,
 		marginTop: 3
 	},
-	imageColor: {
-		tintColor: COLOR_TEXT_DESCRIPTION
-	},
-	iconColor: {
-		color: COLOR_TEXT_DESCRIPTION
-	},
 	discussion: {
 		marginRight: 6
 	}
 });
 
-const RoomTypeIcon = React.memo(({ type, size, style }) => {
+const RoomTypeIcon = React.memo(({
+	type, size, style, theme
+}) => {
 	if (!type) {
 		return null;
 	}
 
+	const color = themes[theme].auxiliaryText;
+
 	if (type === 'discussion') {
 		// FIXME: These are temporary only. We should have all room icons on <Customicon />, but our design team is still working on this.
-		return <CustomIcon name='chat' size={13} style={[styles.style, styles.iconColor, styles.discussion]} />;
+		return <CustomIcon name='chat' size={13} style={[styles.style, styles.iconColor, styles.discussion, { color }]} />;
 	}
 
 	if (type === 'c') {
-		return <Image source={{ uri: 'hashtag' }} style={[styles.style, styles.imageColor, style, { width: size, height: size }]} />;
+		return <Image source={{ uri: 'hashtag' }} style={[styles.style, style, { width: size, height: size, tintColor: color }]} />;
 	} if (type === 'd') {
-		return <CustomIcon name='at' size={13} style={[styles.style, styles.iconColor, styles.discussion]} />;
+		return <CustomIcon name='at' size={13} style={[styles.style, styles.discussion, { color }]} />;
 	}
-	return <Image source={{ uri: 'lock' }} style={[styles.style, styles.imageColor, style, { width: size, height: size }]} />;
+	return <Image source={{ uri: 'lock' }} style={[styles.style, style, { width: size, height: size, tintColor: color }]} />;
 });
 
 RoomTypeIcon.propTypes = {
+	theme: PropTypes.string,
 	type: PropTypes.string,
 	size: PropTypes.number,
 	style: PropTypes.object

app/containers/SearchBox.js

@@ -1,27 +1,25 @@
 import React from 'react';
-import {
-	View, StyleSheet, TextInput, Text
-} from 'react-native';
+import { View, StyleSheet, Text } from 'react-native';
 import PropTypes from 'prop-types';
 import Touchable from 'react-native-platform-touchable';
 
+import TextInput from '../presentation/TextInput';
 import I18n from '../i18n';
-import { isIOS } from '../utils/deviceInfo';
 import { CustomIcon } from '../lib/Icons';
 import sharedStyles from '../views/Styles';
+import { withTheme } from '../theme';
+import { themes } from '../constants/colors';
+import { isIOS } from '../utils/deviceInfo';
 
 const styles = StyleSheet.create({
 	container: {
-		backgroundColor: isIOS ? '#F7F8FA' : '#54585E',
 		flexDirection: 'row',
 		alignItems: 'center',
 		flex: 1
 	},
 	searchBox: {
 		alignItems: 'center',
-		backgroundColor: '#E1E5E8',
 		borderRadius: 10,
-		color: '#8E8E93',
 		flexDirection: 'row',
 		fontSize: 17,
 		height: 36,
@@ -31,7 +29,6 @@ const styles = StyleSheet.create({
 		flex: 1
 	},
 	input: {
-		color: '#8E8E93',
 		flex: 1,
 		fontSize: 17,
 		marginLeft: 8,
@@ -44,23 +41,27 @@ const styles = StyleSheet.create({
 	},
 	cancelText: {
 		...sharedStyles.textRegular,
-		...sharedStyles.textColorHeaderBack,
 		fontSize: 17
 	}
 });
 
-const CancelButton = onCancelPress => (
+const CancelButton = (onCancelPress, theme) => (
 	<Touchable onPress={onCancelPress} style={styles.cancel}>
-		<Text style={styles.cancelText}>{I18n.t('Cancel')}</Text>
+		<Text style={[styles.cancelText, { color: themes[theme].tintColor }]}>{I18n.t('Cancel')}</Text>
 	</Touchable>
 );
 
 const SearchBox = ({
-	onChangeText, onSubmitEditing, testID, hasCancel, onCancelPress, inputRef, ...props
+	onChangeText, onSubmitEditing, testID, hasCancel, onCancelPress, inputRef, theme, ...props
 }) => (
-	<View style={styles.container}>
-		<View style={styles.searchBox}>
-			<CustomIcon name='magnifier' size={14} color='#8E8E93' />
+	<View
+		style={[
+			styles.container,
+			{ backgroundColor: isIOS ? themes[theme].headerBackground : themes[theme].headerSecondaryBackground }
+		]}
+	>
+		<View style={[styles.searchBox, { backgroundColor: themes[theme].searchboxBackground }]}>
+			<CustomIcon name='magnifier' size={14} color={themes[theme].auxiliaryText} />
 			<TextInput
 				ref={inputRef}
 				autoCapitalize='none'
@@ -74,10 +75,11 @@ const SearchBox = ({
 				underlineColorAndroid='transparent'
 				onChangeText={onChangeText}
 				onSubmitEditing={onSubmitEditing}
+				theme={theme}
 				{...props}
 			/>
 		</View>
-		{ hasCancel ? CancelButton(onCancelPress) : null }
+		{ hasCancel ? CancelButton(onCancelPress, theme) : null }
 	</View>
 );
 
@@ -86,8 +88,9 @@ SearchBox.propTypes = {
 	onSubmitEditing: PropTypes.func,
 	hasCancel: PropTypes.bool,
 	onCancelPress: PropTypes.func,
+	theme: PropTypes.string,
 	inputRef: PropTypes.func,
 	testID: PropTypes.string
 };
 
-export default SearchBox;
+export default withTheme(SearchBox);

app/containers/Separator.js

@@ -2,20 +2,28 @@ import React from 'react';
 import { View, StyleSheet } from 'react-native';
 import PropTypes from 'prop-types';
 
-import { COLOR_SEPARATOR } from '../constants/colors';
+import { themes } from '../constants/colors';
 
 const styles = StyleSheet.create({
 	separator: {
-		height: StyleSheet.hairlineWidth,
-		backgroundColor: COLOR_SEPARATOR
+		height: StyleSheet.hairlineWidth
 	}
 });
 
 
-const Separator = React.memo(({ style }) => <View style={[styles.separator, style]} />);
+const Separator = React.memo(({ style, theme }) => (
+	<View
+		style={[
+			styles.separator,
+			style,
+			{ backgroundColor: themes[theme].separatorColor }
+		]}
+	/>
+));
 
 Separator.propTypes = {
-	style: PropTypes.object
+	style: PropTypes.object,
+	theme: PropTypes.string
 };
 
 export default Separator;

app/containers/StatusBar.js

@@ -3,23 +3,19 @@ import { StatusBar as StatusBarRN } from 'react-native';
 import PropTypes from 'prop-types';
 
 import { isIOS } from '../utils/deviceInfo';
-import { HEADER_BACKGROUND, COLOR_WHITE } from '../constants/colors';
+import { themes } from '../constants/colors';
+import { withTheme } from '../theme';
 
-const HEADER_BAR_STYLE = isIOS ? 'dark-content' : 'light-content';
-
-const StatusBar = React.memo(({ light }) => {
-	if (light) {
-		return <StatusBarRN backgroundColor={COLOR_WHITE} barStyle='dark-content' animated />;
+const StatusBar = React.memo(({ theme }) => {
+	let barStyle = 'light-content';
+	if (theme === 'light' && isIOS) {
+		barStyle = 'dark-content';
 	}
-	return <StatusBarRN backgroundColor={HEADER_BACKGROUND} barStyle={HEADER_BAR_STYLE} animated />;
+	return <StatusBarRN backgroundColor={themes[theme].headerBackground} barStyle={barStyle} animated />;
 });
 
 StatusBar.propTypes = {
-	light: PropTypes.bool
+	theme: PropTypes.string
 };
 
-StatusBar.defaultProps = {
-	light: false
-};
-
-export default StatusBar;
+export default withTheme(StatusBar);

app/containers/TextInput.js

@@ -1,37 +1,34 @@
 import React from 'react';
-import {
-	View, StyleSheet, Text, TextInput
-} from 'react-native';
+import { View, StyleSheet, Text } from 'react-native';
 import PropTypes from 'prop-types';
 import { BorderlessButton } from 'react-native-gesture-handler';
 
 import sharedStyles from '../views/Styles';
-import {
-	COLOR_DANGER, COLOR_TEXT_DESCRIPTION, COLOR_TEXT, COLOR_BORDER
-} from '../constants/colors';
+import TextInput from '../presentation/TextInput';
+import { themes } from '../constants/colors';
 import { CustomIcon } from '../lib/Icons';
 
 const styles = StyleSheet.create({
+	error: {
+		textAlign: 'center',
+		paddingTop: 5
+	},
 	inputContainer: {
 		marginBottom: 10
 	},
 	label: {
 		marginBottom: 10,
 		fontSize: 14,
-		...sharedStyles.textSemibold,
-		...sharedStyles.textColorNormal
+		...sharedStyles.textSemibold
 	},
 	input: {
 		...sharedStyles.textRegular,
-		...sharedStyles.textColorNormal,
 		height: 48,
 		fontSize: 16,
 		paddingLeft: 14,
 		paddingRight: 14,
-		borderWidth: 1,
-		borderRadius: 2,
-		backgroundColor: 'white',
-		borderColor: COLOR_BORDER
+		borderWidth: StyleSheet.hairlineWidth,
+		borderRadius: 2
 	},
 	inputIconLeft: {
 		paddingLeft: 45
@@ -39,13 +36,6 @@ const styles = StyleSheet.create({
 	inputIconRight: {
 		paddingRight: 45
 	},
-	labelError: {
-		color: COLOR_DANGER
-	},
-	inputError: {
-		color: COLOR_DANGER,
-		borderColor: COLOR_DANGER
-	},
 	wrap: {
 		position: 'relative'
 	},
@@ -58,12 +48,6 @@ const styles = StyleSheet.create({
 	},
 	iconRight: {
 		right: 15
-	},
-	icon: {
-		color: COLOR_TEXT
-	},
-	password: {
-		color: COLOR_TEXT_DESCRIPTION
 	}
 });
 
@@ -78,11 +62,13 @@ export default class RCTextInput extends React.PureComponent {
 		inputRef: PropTypes.func,
 		testID: PropTypes.string,
 		iconLeft: PropTypes.string,
-		placeholder: PropTypes.string
+		placeholder: PropTypes.string,
+		theme: PropTypes.string
 	}
 
 	static defaultProps = {
-		error: {}
+		error: {},
+		theme: 'light'
 	}
 
 	state = {
@@ -90,12 +76,12 @@ export default class RCTextInput extends React.PureComponent {
 	}
 
 	get iconLeft() {
-		const { testID, iconLeft } = this.props;
+		const { testID, iconLeft, theme } = this.props;
 		return (
 			<CustomIcon
 				name={iconLeft}
 				testID={testID ? `${ testID }-icon-left` : null}
-				style={[styles.iconContainer, styles.iconLeft, styles.icon]}
+				style={[styles.iconContainer, styles.iconLeft, { color: themes[theme].bodyText }]}
 				size={20}
 			/>
 		);
@@ -103,13 +89,13 @@ export default class RCTextInput extends React.PureComponent {
 
 	get iconPassword() {
 		const { showPassword } = this.state;
-		const { testID } = this.props;
+		const { testID, theme } = this.props;
 		return (
 			<BorderlessButton onPress={this.tooglePassword} style={[styles.iconContainer, styles.iconRight]}>
 				<CustomIcon
 					name={showPassword ? 'Eye' : 'eye-off'}
 					testID={testID ? `${ testID }-icon-right` : null}
-					style={[styles.icon, styles.password]}
+					style={{ color: themes[theme].auxiliaryText }}
 					size={20}
 				/>
 			</BorderlessButton>
@@ -123,19 +109,40 @@ export default class RCTextInput extends React.PureComponent {
 	render() {
 		const { showPassword } = this.state;
 		const {
-			label, error, secureTextEntry, containerStyle, inputRef, iconLeft, inputStyle, testID, placeholder, ...inputProps
+			label, error, secureTextEntry, containerStyle, inputRef, iconLeft, inputStyle, testID, placeholder, theme, ...inputProps
 		} = this.props;
+		const { dangerColor } = themes[theme];
 		return (
 			<View style={[styles.inputContainer, containerStyle]}>
-				{label ? <Text contentDescription={null} accessibilityLabel={null} style={[styles.label, error.error && styles.labelError]}>{label}</Text> : null}
+				{label ? (
+					<Text
+						contentDescription={null}
+						accessibilityLabel={null}
+						style={[
+							styles.label,
+							{ color: themes[theme].titleText },
+							error.error && { color: dangerColor }
+						]}
+					>
+						{label}
+					</Text>
+				) : null}
 				<View style={styles.wrap}>
 					<TextInput
 						style={[
 							styles.input,
-							error.error && styles.inputError,
-							inputStyle,
+							error.error && {
+								color: dangerColor,
+								borderColor: dangerColor
+							},
 							iconLeft && styles.inputIconLeft,
-							secureTextEntry && styles.inputIconRight
+							secureTextEntry && styles.inputIconRight,
+							{
+								backgroundColor: themes[theme].backgroundColor,
+								borderColor: themes[theme].separatorColor,
+								color: themes[theme].titleText
+							},
+							inputStyle
 						]}
 						ref={inputRef}
 						autoCorrect={false}
@@ -145,14 +152,14 @@ export default class RCTextInput extends React.PureComponent {
 						testID={testID}
 						accessibilityLabel={placeholder}
 						placeholder={placeholder}
-						placeholderTextColor={COLOR_TEXT_DESCRIPTION}
 						contentDescription={placeholder}
+						theme={theme}
 						{...inputProps}
 					/>
 					{iconLeft ? this.iconLeft : null}
 					{secureTextEntry ? this.iconPassword : null}
 				</View>
-				{error.error ? <Text style={sharedStyles.error}>{error.reason}</Text> : null}
+				{error.error ? <Text style={[styles.error, { color: dangerColor }]}>{error.reason}</Text> : null}
 			</View>
 		);
 	}

app/containers/Toast.js

@@ -1,20 +1,20 @@
 import React from 'react';
 import { StyleSheet } from 'react-native';
 import EasyToast from 'react-native-easy-toast';
+import PropTypes from 'prop-types';
 
-import { COLOR_TOAST, COLOR_WHITE } from '../constants/colors';
+import { themes } from '../constants/colors';
 import sharedStyles from '../views/Styles';
 import EventEmitter from '../utils/events';
+import { withTheme } from '../theme';
 
 const styles = StyleSheet.create({
 	toast: {
-		backgroundColor: COLOR_TOAST,
 		maxWidth: 300,
 		padding: 10
 	},
 	text: {
 		...sharedStyles.textRegular,
-		color: COLOR_WHITE,
 		fontSize: 14,
 		textAlign: 'center'
 	}
@@ -22,12 +22,20 @@ const styles = StyleSheet.create({
 
 export const LISTENER = 'Toast';
 
-export default class Toast extends React.Component {
+class Toast extends React.Component {
+	static propTypes = {
+		theme: PropTypes.string
+	}
+
 	componentDidMount() {
 		EventEmitter.addEventListener(LISTENER, this.showToast);
 	}
 
-	shouldComponentUpdate() {
+	shouldComponentUpdate(nextProps) {
+		const { theme } = this.props;
+		if (nextProps.theme !== theme) {
+			return true;
+		}
 		return false;
 	}
 
@@ -40,14 +48,17 @@ export default class Toast extends React.Component {
 	}
 
 	render() {
+		const { theme } = this.props;
 		return (
 			<EasyToast
 				ref={toast => this.toast = toast}
 				position='center'
-				style={styles.toast}
-				textStyle={styles.text}
+				style={[styles.toast, { backgroundColor: themes[theme].toastBackground }]}
+				textStyle={[styles.text, { color: themes[theme].buttonText }]}
 				opacity={0.9}
 			/>
 		);
 	}
 }
+
+export default withTheme(Toast);

app/containers/markdown/AtMention.js

@@ -2,12 +2,14 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Text } from 'react-native';
 
+import { themes } from '../../constants/colors';
+
 import styles from './styles';
 
 const AtMention = React.memo(({
-	mention, mentions, username, navToRoomInfo, preview, style = []
+	mention, mentions, username, navToRoomInfo, preview, style = [], theme
 }) => {
-	let mentionStyle = styles.mention;
+	let mentionStyle = { ...styles.mention, color: themes[theme].buttonText };
 	if (mention === 'all' || mention === 'here') {
 		mentionStyle = {
 			...mentionStyle,
@@ -16,7 +18,12 @@ const AtMention = React.memo(({
 	} else if (mention === username) {
 		mentionStyle = {
 			...mentionStyle,
-			...styles.mentionLoggedUser
+			backgroundColor: themes[theme].actionTintColor
+		};
+	} else {
+		mentionStyle = {
+			...mentionStyle,
+			color: themes[theme].actionTintColor
 		};
 	}
 
@@ -33,7 +40,7 @@ const AtMention = React.memo(({
 
 	return (
 		<Text
-			style={[preview ? styles.text : mentionStyle, ...style]}
+			style={[preview ? { ...styles.text, color: themes[theme].titleText } : mentionStyle, ...style]}
 			onPress={preview ? undefined : handlePress}
 		>
 			{`@${ mention }`}
@@ -47,6 +54,7 @@ AtMention.propTypes = {
 	navToRoomInfo: PropTypes.func,
 	style: PropTypes.array,
 	preview: PropTypes.bool,
+	theme: PropTypes.string,
 	mentions: PropTypes.oneOfType([PropTypes.array, PropTypes.object])
 };
 

app/containers/markdown/BlockQuote.js

@@ -2,11 +2,13 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { View } from 'react-native';
 
+import { themes } from '../../constants/colors';
+
 import styles from './styles';
 
-const BlockQuote = React.memo(({ children }) => (
+const BlockQuote = React.memo(({ children, theme }) => (
 	<View style={styles.container}>
-		<View style={styles.quote} />
+		<View style={[styles.quote, { backgroundColor: themes[theme].borderColor }]} />
 		<View style={styles.childContainer}>
 			{children}
 		</View>
@@ -14,7 +16,8 @@ const BlockQuote = React.memo(({ children }) => (
 ));
 
 BlockQuote.propTypes = {
-	children: PropTypes.node.isRequired
+	children: PropTypes.node.isRequired,
+	theme: PropTypes.string
 };
 
 export default BlockQuote;

app/containers/markdown/Emoji.js

@@ -4,11 +4,12 @@ import { Text } from 'react-native';
 import { shortnameToUnicode } from 'emoji-toolkit';
 
 import CustomEmoji from '../EmojiPicker/CustomEmoji';
+import { themes } from '../../constants/colors';
 
 import styles from './styles';
 
 const Emoji = React.memo(({
-	emojiName, literal, isMessageContainsOnlyEmoji, getCustomEmoji, baseUrl, customEmojis, style = []
+	emojiName, literal, isMessageContainsOnlyEmoji, getCustomEmoji, baseUrl, customEmojis, style = [], theme
 }) => {
 	const emojiUnicode = shortnameToUnicode(literal);
 	const emoji = getCustomEmoji && getCustomEmoji(emojiName);
@@ -24,6 +25,7 @@ const Emoji = React.memo(({
 	return (
 		<Text
 			style={[
+				{ color: themes[theme].titleText },
 				isMessageContainsOnlyEmoji ? styles.textBig : styles.text,
 				...style
 			]}
@@ -40,7 +42,8 @@ Emoji.propTypes = {
 	getCustomEmoji: PropTypes.func,
 	baseUrl: PropTypes.string,
 	customEmojis: PropTypes.bool,
-	style: PropTypes.array
+	style: PropTypes.array,
+	theme: PropTypes.string
 };
 
 export default Emoji;

app/containers/markdown/Hashtag.js

@@ -2,10 +2,12 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { Text } from 'react-native';
 
+import { themes } from '../../constants/colors';
+
 import styles from './styles';
 
 const Hashtag = React.memo(({
-	hashtag, channels, navToRoomInfo, preview, style = []
+	hashtag, channels, navToRoomInfo, preview, style = [], theme
 }) => {
 	const handlePress = () => {
 		const index = channels.findIndex(channel => channel.name === hashtag);
@@ -19,14 +21,18 @@ const Hashtag = React.memo(({
 	if (channels && channels.length && channels.findIndex(channel => channel.name === hashtag) !== -1) {
 		return (
 			<Text
-				style={[preview ? styles.text : styles.mention, ...style]}
+				style={[preview ? { ...styles.text, color: themes[theme].titleText } : styles.mention, ...style]}
 				onPress={preview ? undefined : handlePress}
 			>
 				{`#${ hashtag }`}
 			</Text>
 		);
 	}
-	return `#${ hashtag }`;
+	return (
+		<Text style={[preview ? { ...styles.text, color: themes[theme].titleText } : styles.mention, ...style]}>
+			{`#${ hashtag }`}
+		</Text>
+	);
 });
 
 Hashtag.propTypes = {
@@ -34,6 +40,7 @@ Hashtag.propTypes = {
 	navToRoomInfo: PropTypes.func,
 	style: PropTypes.array,
 	preview: PropTypes.bool,
+	theme: PropTypes.string,
 	channels: PropTypes.oneOfType([PropTypes.array, PropTypes.object])
 };
 

app/containers/markdown/Link.js

@@ -3,16 +3,17 @@ import PropTypes from 'prop-types';
 import { Text } from 'react-native';
 
 import styles from './styles';
+import { themes } from '../../constants/colors';
 import openLink from '../../utils/openLink';
 
 const Link = React.memo(({
-	children, link, preview
+	children, link, preview, theme
 }) => {
 	const handlePress = () => {
 		if (!link) {
 			return;
 		}
-		openLink(link);
+		openLink(link, theme);
 	};
 
 	const childLength = React.Children.toArray(children).filter(o => o).length;
@@ -21,7 +22,11 @@ const Link = React.memo(({
 	return (
 		<Text
 			onPress={preview ? undefined : handlePress}
-			style={styles.link}
+			style={
+				!preview
+					? { ...styles.link, color: themes[theme].actionTintColor }
+					: { color: themes[theme].titleText }
+			}
 		>
 			{ childLength !== 0 ? children : link }
 		</Text>
@@ -31,6 +36,7 @@ const Link = React.memo(({
 Link.propTypes = {
 	children: PropTypes.node,
 	link: PropTypes.string,
+	theme: PropTypes.string,
 	preview: PropTypes.bool
 };
 

app/containers/markdown/ListItem.js

@@ -6,6 +6,8 @@ import {
 	View
 } from 'react-native';
 
+import { themes } from '../../constants/colors';
+
 const style = StyleSheet.create({
 	container: {
 		flexDirection: 'row',
@@ -21,7 +23,7 @@ const style = StyleSheet.create({
 });
 
 const ListItem = React.memo(({
-	children, level, bulletWidth, continue: _continue, ordered, index
+	children, level, bulletWidth, continue: _continue, ordered, index, theme
 }) => {
 	let bullet;
 	if (_continue) {
@@ -37,7 +39,7 @@ const ListItem = React.memo(({
 	return (
 		<View style={style.container}>
 			<View style={[{ width: bulletWidth }, style.bullet]}>
-				<Text>
+				<Text style={{ color: themes[theme].titleText }}>
 					{bullet}
 				</Text>
 			</View>
@@ -54,6 +56,7 @@ ListItem.propTypes = {
 	level: PropTypes.number,
 	ordered: PropTypes.bool,
 	continue: PropTypes.bool,
+	theme: PropTypes.string,
 	index: PropTypes.number
 };
 

app/containers/markdown/Table.js

@@ -11,16 +11,17 @@ import { CELL_WIDTH } from './TableCell';
 import styles from './styles';
 import Navigation from '../../lib/Navigation';
 import I18n from '../../i18n';
+import { themes } from '../../constants/colors';
 
 const MAX_HEIGHT = 300;
 
 const Table = React.memo(({
-	children, numColumns
+	children, numColumns, theme
 }) => {
 	const getTableWidth = () => numColumns * CELL_WIDTH;
 
 	const renderRows = (drawExtraBorders = true) => {
-		const tableStyle = [styles.table];
+		const tableStyle = [styles.table, { borderColor: themes[theme].borderColor }];
 		if (drawExtraBorders) {
 			tableStyle.push(styles.tableExtraBorders);
 		}
@@ -45,18 +46,19 @@ const Table = React.memo(({
 				contentContainerStyle={{ width: getTableWidth() }}
 				scrollEnabled={false}
 				showsVerticalScrollIndicator={false}
-				style={[styles.containerTable, { maxWidth: getTableWidth(), maxHeight: MAX_HEIGHT }]}
+				style={[styles.containerTable, { maxWidth: getTableWidth(), maxHeight: MAX_HEIGHT, borderColor: themes[theme].borderColor }]}
 			>
 				{renderRows(false)}
 			</ScrollView>
-			<Text style={styles.textInfo}>{I18n.t('Full_table')}</Text>
+			<Text style={[styles.textInfo, { color: themes[theme].auxiliaryText }]}>{I18n.t('Full_table')}</Text>
 		</TouchableOpacity>
 	);
 });
 
 Table.propTypes = {
 	children: PropTypes.node.isRequired,
-	numColumns: PropTypes.number.isRequired
+	numColumns: PropTypes.number.isRequired,
+	theme: PropTypes.string
 };
 
 export default Table;

app/containers/markdown/TableCell.js

@@ -2,14 +2,16 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { Text, View } from 'react-native';
 
+import { themes } from '../../constants/colors';
+
 import styles from './styles';
 
 export const CELL_WIDTH = 100;
 
 const TableCell = React.memo(({
-	isLastCell, align, children
+	isLastCell, align, children, theme
 }) => {
-	const cellStyle = [styles.cell];
+	const cellStyle = [styles.cell, { borderColor: themes[theme].borderColor }];
 	if (!isLastCell) {
 		cellStyle.push(styles.cellRightBorder);
 	}
@@ -23,7 +25,7 @@ const TableCell = React.memo(({
 
 	return (
 		<View style={[...cellStyle, { width: CELL_WIDTH }]}>
-			<Text style={textStyle}>
+			<Text style={[textStyle, { color: themes[theme].titleText }]}>
 				{children}
 			</Text>
 		</View>
@@ -33,7 +35,8 @@ const TableCell = React.memo(({
 TableCell.propTypes = {
 	align: PropTypes.oneOf(['', 'left', 'center', 'right']),
 	children: PropTypes.node,
-	isLastCell: PropTypes.bool
+	isLastCell: PropTypes.bool,
+	theme: PropTypes.string
 };
 
 export default TableCell;

app/containers/markdown/TableRow.js

@@ -2,12 +2,14 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { View } from 'react-native';
 
+import { themes } from '../../constants/colors';
+
 import styles from './styles';
 
 const TableRow = React.memo(({
-	isLastRow, children: _children
+	isLastRow, children: _children, theme
 }) => {
-	const rowStyle = [styles.row];
+	const rowStyle = [styles.row, { borderColor: themes[theme].borderColor }];
 	if (!isLastRow) {
 		rowStyle.push(styles.rowBottomBorder);
 	}
@@ -22,7 +24,8 @@ const TableRow = React.memo(({
 
 TableRow.propTypes = {
 	children: PropTypes.node,
-	isLastRow: PropTypes.bool
+	isLastRow: PropTypes.bool,
+	theme: PropTypes.string
 };
 
 export default TableRow;

app/containers/markdown/index.js

@@ -6,6 +6,7 @@ import PropTypes from 'prop-types';
 import { shortnameToUnicode } from 'emoji-toolkit';
 
 import I18n from '../../i18n';
+import { themes } from '../../constants/colors';
 
 import MarkdownLink from './Link';
 import MarkdownList from './List';
@@ -59,7 +60,7 @@ const emojiCount = (str) => {
 	return counter;
 };
 
-export default class Markdown extends PureComponent {
+class Markdown extends PureComponent {
 	static propTypes = {
 		msg: PropTypes.string,
 		getCustomEmoji: PropTypes.func,
@@ -74,6 +75,7 @@ export default class Markdown extends PureComponent {
 		mentions: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
 		navToRoomInfo: PropTypes.func,
 		preview: PropTypes.bool,
+		theme: PropTypes.string,
 		style: PropTypes.array
 	};
 
@@ -140,7 +142,9 @@ export default class Markdown extends PureComponent {
 	};
 
 	renderText = ({ context, literal }) => {
-		const { numberOfLines, preview, style = [] } = this.props;
+		const {
+			numberOfLines, preview, style = []
+		} = this.props;
 		const defaultStyle = [
 			this.isMessageContainsOnlyEmoji && !preview ? styles.textBig : {},
 			...context.map(type => styles[type])
@@ -160,13 +164,45 @@ export default class Markdown extends PureComponent {
 	}
 
 	renderCodeInline = ({ literal }) => {
-		const { preview } = this.props;
-		return <Text style={!preview ? styles.codeInline : {}}>{literal}</Text>;
+		const { preview, theme, style = [] } = this.props;
+		return (
+			<Text
+				style={[
+					!preview
+						? {
+							...styles.codeInline,
+							color: themes[theme].titleText,
+							backgroundColor: themes[theme].bannerBackground,
+							borderColor: themes[theme].bannerBackground
+						}
+						: { ...styles.text, color: themes[theme].titleText },
+					...style
+				]}
+			>
+				{literal}
+			</Text>
+		);
 	};
 
 	renderCodeBlock = ({ literal }) => {
-		const { preview } = this.props;
-		return <Text style={!preview ? styles.codeBlock : {}}>{literal}</Text>;
+		const { preview, theme, style = [] } = this.props;
+		return (
+			<Text
+				style={[
+					!preview
+						? {
+							...styles.codeBlock,
+							color: themes[theme].titleText,
+							backgroundColor: themes[theme].bannerBackground,
+							borderColor: themes[theme].bannerBackground
+						}
+						: { ...styles.text, color: themes[theme].titleText },
+					...style
+				]}
+			>
+				{literal}
+			</Text>
+		);
 	};
 
 	renderBreak = () => {
@@ -175,21 +211,25 @@ export default class Markdown extends PureComponent {
 	}
 
 	renderParagraph = ({ children }) => {
-		const { numberOfLines, style } = this.props;
+		const { numberOfLines, style, theme } = this.props;
 		if (!children || children.length === 0) {
 			return null;
 		}
 		return (
-			<Text style={style} numberOfLines={numberOfLines}>
+			<Text style={[style, { color: themes[theme].titleText }]} numberOfLines={numberOfLines}>
 				{children}
 			</Text>
 		);
 	};
 
 	renderLink = ({ children, href }) => {
-		const { preview } = this.props;
+		const { preview, theme } = this.props;
 		return (
-			<MarkdownLink link={href} preview={preview}>
+			<MarkdownLink
+				link={href}
+				preview={preview}
+				theme={theme}
+			>
 				{children}
 			</MarkdownLink>
 		);
@@ -197,7 +237,7 @@ export default class Markdown extends PureComponent {
 
 	renderHashtag = ({ hashtag }) => {
 		const {
-			channels, navToRoomInfo, style, preview
+			channels, navToRoomInfo, style, preview, theme
 		} = this.props;
 		return (
 			<MarkdownHashtag
@@ -205,6 +245,7 @@ export default class Markdown extends PureComponent {
 				channels={channels}
 				navToRoomInfo={navToRoomInfo}
 				preview={preview}
+				theme={theme}
 				style={style}
 			/>
 		);
@@ -212,7 +253,7 @@ export default class Markdown extends PureComponent {
 
 	renderAtMention = ({ mentionName }) => {
 		const {
-			username, mentions, navToRoomInfo, preview, style
+			username, mentions, navToRoomInfo, preview, style, theme
 		} = this.props;
 		return (
 			<MarkdownAtMention
@@ -221,6 +262,7 @@ export default class Markdown extends PureComponent {
 				username={username}
 				navToRoomInfo={navToRoomInfo}
 				preview={preview}
+				theme={theme}
 				style={style}
 			/>
 		);
@@ -228,7 +270,7 @@ export default class Markdown extends PureComponent {
 
 	renderEmoji = ({ emojiName, literal }) => {
 		const {
-			getCustomEmoji, baseUrl, customEmojis = true, preview, style
+			getCustomEmoji, baseUrl, customEmojis = true, preview, style, theme
 		} = this.props;
 		return (
 			<MarkdownEmoji
@@ -239,19 +281,23 @@ export default class Markdown extends PureComponent {
 				baseUrl={baseUrl}
 				customEmojis={customEmojis}
 				style={style}
+				theme={theme}
 			/>
 		);
 	}
 
 	renderImage = ({ src }) => <Image style={styles.inlineImage} source={{ uri: src }} />;
 
-	renderEditedIndicator = () => <Text style={styles.edited}> ({I18n.t('edited')})</Text>;
+	renderEditedIndicator = () => {
+		const { theme } = this.props;
+		return <Text style={[styles.edited, { color: themes[theme].auxiliaryText }]}> ({I18n.t('edited')})</Text>;
+	}
 
 	renderHeading = ({ children, level }) => {
-		const { numberOfLines } = this.props;
+		const { numberOfLines, theme } = this.props;
 		const textStyle = styles[`heading${ level }Text`];
 		return (
-			<Text numberOfLines={numberOfLines} style={textStyle}>
+			<Text numberOfLines={numberOfLines} style={[textStyle, { color: themes[theme].titleText }]}>
 				{children}
 			</Text>
 		);
@@ -276,11 +322,13 @@ export default class Markdown extends PureComponent {
 	renderListItem = ({
 		children, context, ...otherProps
 	}) => {
+		const { theme } = this.props;
 		const level = context.filter(type => type === 'list').length;
 
 		return (
 			<MarkdownListItem
 				level={level}
+				theme={theme}
 				{...otherProps}
 			>
 				{children}
@@ -289,30 +337,39 @@ export default class Markdown extends PureComponent {
 	};
 
 	renderBlockQuote = ({ children }) => {
-		const { preview } = this.props;
+		const { preview, theme } = this.props;
 		if (preview) {
 			return children;
 		}
 		return (
-			<MarkdownBlockQuote>
+			<MarkdownBlockQuote theme={theme}>
 				{children}
 			</MarkdownBlockQuote>
 		);
 	}
 
-	renderTable = ({ children, numColumns }) => (
-		<MarkdownTable numColumns={numColumns}>
-			{children}
-		</MarkdownTable>
-	);
+	renderTable = ({ children, numColumns }) => {
+		const { theme } = this.props;
+		return (
+			<MarkdownTable numColumns={numColumns} theme={theme}>
+				{children}
+			</MarkdownTable>
+		);
+	}
 
-	renderTableRow = args => <MarkdownTableRow {...args} />;
+	renderTableRow = (args) => {
+		const { theme } = this.props;
+		return <MarkdownTableRow {...args} theme={theme} />;
+	}
 
-	renderTableCell = args => <MarkdownTableCell {...args} />;
+	renderTableCell = (args) => {
+		const { theme } = this.props;
+		return <MarkdownTableCell {...args} theme={theme} />;
+	}
 
 	render() {
 		const {
-			msg, useMarkdown = true, numberOfLines, preview = false
+			msg, useMarkdown = true, numberOfLines, preview = false, theme
 		} = this.props;
 
 		if (!msg) {
@@ -333,7 +390,7 @@ export default class Markdown extends PureComponent {
 		}
 
 		if (!useMarkdown && !preview) {
-			return <Text style={styles.text} numberOfLines={numberOfLines}>{m}</Text>;
+			return <Text style={[styles.text, { color: themes[theme].titleText }]} numberOfLines={numberOfLines}>{m}</Text>;
 		}
 
 		const ast = this.parser.parse(m);
@@ -344,3 +401,5 @@ export default class Markdown extends PureComponent {
 		return this.renderer.render(ast);
 	}
 }
+
+export default Markdown;

app/containers/markdown/styles.js

@@ -1,9 +1,6 @@
 import { StyleSheet, Platform } from 'react-native';
 
 import sharedStyles from '../../views/Styles';
-import {
-	COLOR_BORDER, COLOR_PRIMARY, COLOR_WHITE, COLOR_BACKGROUND_CONTAINER
-} from '../../constants/colors';
 
 const codeFontFamily = Platform.select({
 	ios: { fontFamily: 'Courier New' },
@@ -35,18 +32,15 @@ export default StyleSheet.create({
 	},
 	text: {
 		fontSize: 16,
-		...sharedStyles.textColorNormal,
 		...sharedStyles.textRegular
 	},
 	textInfo: {
 		fontStyle: 'italic',
 		fontSize: 16,
-		...sharedStyles.textColorDescription,
 		...sharedStyles.textRegular
 	},
 	textBig: {
 		fontSize: 30,
-		...sharedStyles.textColorNormal,
 		...sharedStyles.textRegular
 	},
 	customEmoji: {
@@ -65,12 +59,7 @@ export default StyleSheet.create({
 		...sharedStyles.textMedium,
 		backgroundColor: '#E8F2FF'
 	},
-	mentionLoggedUser: {
-		color: COLOR_WHITE,
-		backgroundColor: COLOR_PRIMARY
-	},
 	mentionAll: {
-		color: COLOR_WHITE,
 		backgroundColor: '#FF5B5A'
 	},
 	paragraph: {
@@ -90,26 +79,21 @@ export default StyleSheet.create({
 		...sharedStyles.textRegular,
 		...codeFontFamily,
 		borderWidth: 1,
-		backgroundColor: COLOR_BACKGROUND_CONTAINER,
 		borderRadius: 4
 	},
 	codeBlock: {
 		...sharedStyles.textRegular,
 		...codeFontFamily,
-		backgroundColor: COLOR_BACKGROUND_CONTAINER,
-		borderColor: COLOR_BORDER,
 		borderWidth: 1,
 		borderRadius: 4,
 		padding: 4
 	},
 	link: {
 		fontSize: 16,
-		color: COLOR_PRIMARY,
 		...sharedStyles.textRegular
 	},
 	edited: {
 		fontSize: 14,
-		...sharedStyles.textColorDescription,
 		...sharedStyles.textRegular
 	},
 	heading1: {
@@ -139,7 +123,6 @@ export default StyleSheet.create({
 	quote: {
 		height: '100%',
 		width: 2,
-		backgroundColor: COLOR_BORDER,
 		marginRight: 5
 	},
 	touchableTable: {
@@ -147,11 +130,9 @@ export default StyleSheet.create({
 	},
 	containerTable: {
 		borderBottomWidth: 1,
-		borderColor: COLOR_BORDER,
 		borderRightWidth: 1
 	},
 	table: {
-		borderColor: COLOR_BORDER,
 		borderLeftWidth: 1,
 		borderTopWidth: 1
 	},
@@ -163,11 +144,9 @@ export default StyleSheet.create({
 		flexDirection: 'row'
 	},
 	rowBottomBorder: {
-		borderColor: COLOR_BORDER,
 		borderBottomWidth: 1
 	},
 	cell: {
-		borderColor: COLOR_BORDER,
 		justifyContent: 'flex-start',
 		paddingHorizontal: 13,
 		paddingVertical: 6

app/containers/message/Attachments.js

@@ -8,7 +8,7 @@ import Video from './Video';
 import Reply from './Reply';
 
 const Attachments = React.memo(({
-	attachments, timeFormat, user, baseUrl, useMarkdown, onOpenFileModal, getCustomEmoji
+	attachments, timeFormat, user, baseUrl, useMarkdown, onOpenFileModal, getCustomEmoji, theme
 }) => {
 	if (!attachments || attachments.length === 0) {
 		return null;
@@ -16,19 +16,19 @@ const Attachments = React.memo(({
 
 	return attachments.map((file, index) => {
 		if (file.image_url) {
-			return <Image key={file.image_url} file={file} user={user} baseUrl={baseUrl} onOpenFileModal={onOpenFileModal} getCustomEmoji={getCustomEmoji} useMarkdown={useMarkdown} />;
+			return <Image key={file.image_url} file={file} user={user} baseUrl={baseUrl} onOpenFileModal={onOpenFileModal} getCustomEmoji={getCustomEmoji} useMarkdown={useMarkdown} theme={theme} />;
 		}
 		if (file.audio_url) {
-			return <Audio key={file.audio_url} file={file} user={user} baseUrl={baseUrl} getCustomEmoji={getCustomEmoji} useMarkdown={useMarkdown} />;
+			return <Audio key={file.audio_url} file={file} user={user} baseUrl={baseUrl} getCustomEmoji={getCustomEmoji} useMarkdown={useMarkdown} theme={theme} />;
 		}
 		if (file.video_url) {
-			return <Video key={file.video_url} file={file} user={user} baseUrl={baseUrl} onOpenFileModal={onOpenFileModal} getCustomEmoji={getCustomEmoji} useMarkdown={useMarkdown} />;
+			return <Video key={file.video_url} file={file} user={user} baseUrl={baseUrl} onOpenFileModal={onOpenFileModal} getCustomEmoji={getCustomEmoji} useMarkdown={useMarkdown} theme={theme} />;
 		}
 
 		// eslint-disable-next-line react/no-array-index-key
-		return <Reply key={index} index={index} attachment={file} timeFormat={timeFormat} user={user} baseUrl={baseUrl} getCustomEmoji={getCustomEmoji} useMarkdown={useMarkdown} />;
+		return <Reply key={index} index={index} attachment={file} timeFormat={timeFormat} user={user} baseUrl={baseUrl} getCustomEmoji={getCustomEmoji} useMarkdown={useMarkdown} theme={theme} />;
 	});
-}, (prevProps, nextProps) => isEqual(prevProps.attachments, nextProps.attachments));
+}, (prevProps, nextProps) => isEqual(prevProps.attachments, nextProps.attachments) && prevProps.theme === nextProps.theme);
 
 Attachments.propTypes = {
 	attachments: PropTypes.array,
@@ -37,7 +37,8 @@ Attachments.propTypes = {
 	baseUrl: PropTypes.string,
 	useMarkdown: PropTypes.bool,
 	onOpenFileModal: PropTypes.func,
-	getCustomEmoji: PropTypes.func
+	getCustomEmoji: PropTypes.func,
+	theme: PropTypes.string
 };
 Attachments.displayName = 'MessageAttachments';
 

app/containers/message/Audio.js

@@ -12,7 +12,7 @@ import Touchable from 'react-native-platform-touchable';
 import Markdown from '../markdown';
 import { CustomIcon } from '../../lib/Icons';
 import sharedStyles from '../../views/Styles';
-import { COLOR_BACKGROUND_CONTAINER, COLOR_BORDER, COLOR_PRIMARY } from '../../constants/colors';
+import { themes } from '../../constants/colors';
 import { isAndroid, isIOS } from '../../utils/deviceInfo';
 import { withSplit } from '../../split';
 
@@ -22,8 +22,6 @@ const styles = StyleSheet.create({
 		flexDirection: 'row',
 		alignItems: 'center',
 		height: 56,
-		backgroundColor: COLOR_BACKGROUND_CONTAINER,
-		borderColor: COLOR_BORDER,
 		borderWidth: 1,
 		borderRadius: 4,
 		marginBottom: 6
@@ -33,16 +31,12 @@ const styles = StyleSheet.create({
 		alignItems: 'center',
 		backgroundColor: 'transparent'
 	},
-	playPauseImage: {
-		color: COLOR_PRIMARY
-	},
 	slider: {
 		flex: 1
 	},
 	duration: {
 		marginHorizontal: 12,
 		fontSize: 14,
-		...sharedStyles.textColorNormal,
 		...sharedStyles.textRegular
 	}
 });
@@ -57,19 +51,20 @@ const sliderAnimationConfig = {
 	delay: 0
 };
 
-const Button = React.memo(({ paused, onPress }) => (
+const Button = React.memo(({ paused, onPress, theme }) => (
 	<Touchable
 		style={styles.playPauseButton}
 		onPress={onPress}
 		hitSlop={BUTTON_HIT_SLOP}
 		background={Touchable.SelectableBackgroundBorderless()}
 	>
-		<CustomIcon name={paused ? 'play' : 'pause'} size={36} style={styles.playPauseImage} />
+		<CustomIcon name={paused ? 'play' : 'pause'} size={36} color={themes[theme].tintColor} />
 	</Touchable>
 ));
 
 Button.propTypes = {
 	paused: PropTypes.bool,
+	theme: PropTypes.string,
 	onPress: PropTypes.func
 };
 Button.displayName = 'MessageAudioButton';
@@ -80,6 +75,7 @@ class Audio extends React.Component {
 		baseUrl: PropTypes.string.isRequired,
 		user: PropTypes.object.isRequired,
 		useMarkdown: PropTypes.bool,
+		theme: PropTypes.string,
 		split: PropTypes.bool,
 		getCustomEmoji: PropTypes.func
 	}
@@ -99,7 +95,10 @@ class Audio extends React.Component {
 		const {
 			currentTime, duration, paused, uri
 		} = this.state;
-		const { file, split } = this.props;
+		const { file, split, theme } = this.props;
+		if (nextProps.theme !== theme) {
+			return true;
+		}
 		if (nextState.currentTime !== currentTime) {
 			return true;
 		}
@@ -158,7 +157,7 @@ class Audio extends React.Component {
 			uri, paused, currentTime, duration
 		} = this.state;
 		const {
-			user, baseUrl, file, getCustomEmoji, useMarkdown, split
+			user, baseUrl, file, getCustomEmoji, useMarkdown, split, theme
 		} = this.props;
 		const { description } = file;
 
@@ -168,7 +167,13 @@ class Audio extends React.Component {
 
 		return (
 			<>
-				<View style={[styles.audioContainer, split && sharedStyles.tabletContent]}>
+				<View
+					style={[
+						styles.audioContainer,
+						{ backgroundColor: themes[theme].chatComponentBackground, borderColor: themes[theme].borderColor },
+						split && sharedStyles.tabletContent
+					]}
+				>
 					<Video
 						ref={this.setRef}
 						source={{ uri }}
@@ -178,7 +183,7 @@ class Audio extends React.Component {
 						paused={paused}
 						repeat={false}
 					/>
-					<Button paused={paused} onPress={this.togglePlayPause} />
+					<Button paused={paused} onPress={this.togglePlayPause} theme={theme} />
 					<Slider
 						style={styles.slider}
 						value={currentTime}
@@ -186,14 +191,15 @@ class Audio extends React.Component {
 						minimumValue={0}
 						animateTransitions
 						animationConfig={sliderAnimationConfig}
-						thumbTintColor={isAndroid && COLOR_PRIMARY}
-						minimumTrackTintColor={COLOR_PRIMARY}
+						thumbTintColor={isAndroid && themes[theme].tintColor}
+						minimumTrackTintColor={themes[theme].tintColor}
+						maximumTrackTintColor={themes[theme].auxiliaryText}
 						onValueChange={this.onValueChange}
 						thumbImage={isIOS && { uri: 'audio_thumb', scale: Dimensions.get('window').scale }}
 					/>
-					<Text style={styles.duration}>{this.duration}</Text>
+					<Text style={[styles.duration, { color: themes[theme].auxiliaryText }]}>{this.duration}</Text>
 				</View>
-				<Markdown msg={description} baseUrl={baseUrl} username={user.username} getCustomEmoji={getCustomEmoji} useMarkdown={useMarkdown} />
+				<Markdown msg={description} baseUrl={baseUrl} username={user.username} getCustomEmoji={getCustomEmoji} useMarkdown={useMarkdown} theme={theme} />
 			</>
 		);
 	}

app/containers/message/Broadcast.js

@@ -7,9 +7,10 @@ import { CustomIcon } from '../../lib/Icons';
 import styles from './styles';
 import { BUTTON_HIT_SLOP } from './utils';
 import I18n from '../../i18n';
+import { themes } from '../../constants/colors';
 
 const Broadcast = React.memo(({
-	author, user, broadcast, replyBroadcast
+	author, user, broadcast, replyBroadcast, theme
 }) => {
 	const isOwn = author._id === user.id;
 	if (broadcast && !isOwn) {
@@ -17,25 +18,26 @@ const Broadcast = React.memo(({
 			<View style={styles.buttonContainer}>
 				<Touchable
 					onPress={replyBroadcast}
-					background={Touchable.Ripple('#fff')}
-					style={styles.button}
+					background={Touchable.Ripple(themes[theme].bannerBackground)}
+					style={[styles.button, { backgroundColor: themes[theme].tintColor }]}
 					hitSlop={BUTTON_HIT_SLOP}
 				>
 					<>
-						<CustomIcon name='back' size={20} style={styles.buttonIcon} />
-						<Text style={styles.buttonText}>{I18n.t('Reply')}</Text>
+						<CustomIcon name='back' size={20} style={styles.buttonIcon} color={themes[theme].buttonText} />
+						<Text style={[styles.buttonText, { color: themes[theme].buttonText }]}>{I18n.t('Reply')}</Text>
 					</>
 				</Touchable>
 			</View>
 		);
 	}
 	return null;
-}, () => true);
+});
 
 Broadcast.propTypes = {
 	author: PropTypes.object,
 	user: PropTypes.object,
 	broadcast: PropTypes.bool,
+	theme: PropTypes.string,
 	replyBroadcast: PropTypes.func
 };
 Broadcast.displayName = 'MessageBroadcast';

app/containers/message/CallButton.js

@@ -7,31 +7,33 @@ import { formatLastMessage, BUTTON_HIT_SLOP } from './utils';
 import styles from './styles';
 import I18n from '../../i18n';
 import { CustomIcon } from '../../lib/Icons';
+import { themes } from '../../constants/colors';
 
 const CallButton = React.memo(({
-	dlm, callJitsi
+	dlm, theme, callJitsi
 }) => {
 	const time = formatLastMessage(dlm);
 	return (
 		<View style={styles.buttonContainer}>
 			<Touchable
 				onPress={callJitsi}
-				background={Touchable.Ripple('#fff')}
-				style={[styles.button, styles.smallButton]}
+				background={Touchable.Ripple(themes[theme].bannerBackground)}
+				style={[styles.button, styles.smallButton, { backgroundColor: themes[theme].tintColor }]}
 				hitSlop={BUTTON_HIT_SLOP}
 			>
 				<>
-					<CustomIcon name='video' size={20} style={styles.buttonIcon} />
-					<Text style={styles.buttonText}>{I18n.t('Click_to_join')}</Text>
+					<CustomIcon name='video' size={20} style={styles.buttonIcon} color={themes[theme].buttonText} />
+					<Text style={[styles.buttonText, { color: themes[theme].buttonText }]}>{I18n.t('Click_to_join')}</Text>
 				</>
 			</Touchable>
-			<Text style={styles.time}>{time}</Text>
+			<Text style={[styles.time, { color: themes[theme].auxiliaryText }]}>{time}</Text>
 		</View>
 	);
 });
 
 CallButton.propTypes = {
 	dlm: PropTypes.string,
+	theme: PropTypes.string,
 	callJitsi: PropTypes.func
 };
 CallButton.displayName = 'CallButton';

app/containers/message/Content.js

@@ -6,16 +6,17 @@ import I18n from '../../i18n';
 import styles from './styles';
 import Markdown from '../markdown';
 import { getInfoMessage } from './utils';
+import { themes } from '../../constants/colors';
 
 const Content = React.memo((props) => {
 	if (props.isInfo) {
-		return <Text style={styles.textInfo}>{getInfoMessage({ ...props })}</Text>;
+		return <Text style={[styles.textInfo, { color: themes[props.theme].auxiliaryText }]}>{getInfoMessage({ ...props })}</Text>;
 	}
 
 	let content = null;
 
 	if (props.tmid && !props.msg) {
-		content = <Text style={styles.text}>{I18n.t('Sent_an_attachment')}</Text>;
+		content = <Text style={[styles.text, { color: themes[props.theme].titleText }]}>{I18n.t('Sent_an_attachment')}</Text>;
 	} else {
 		content = (
 			<Markdown
@@ -31,6 +32,7 @@ const Content = React.memo((props) => {
 				useMarkdown={props.useMarkdown && (!props.tmid || props.isThreadRoom)}
 				navToRoomInfo={props.navToRoomInfo}
 				tmid={props.tmid}
+				theme={props.theme}
 			/>
 		);
 	}
@@ -40,7 +42,7 @@ const Content = React.memo((props) => {
 			{content}
 		</View>
 	);
-}, (prevProps, nextProps) => prevProps.isTemp === nextProps.isTemp && prevProps.msg === nextProps.msg);
+}, (prevProps, nextProps) => prevProps.isTemp === nextProps.isTemp && prevProps.msg === nextProps.msg && prevProps.theme === nextProps.theme);
 
 Content.propTypes = {
 	isTemp: PropTypes.bool,
@@ -48,6 +50,7 @@ Content.propTypes = {
 	tmid: PropTypes.string,
 	isThreadRoom: PropTypes.bool,
 	msg: PropTypes.string,
+	theme: PropTypes.string,
 	isEdited: PropTypes.bool,
 	useMarkdown: PropTypes.bool,
 	baseUrl: PropTypes.string,

app/containers/message/Discussion.js

@@ -8,29 +8,30 @@ import styles from './styles';
 import I18n from '../../i18n';
 import { CustomIcon } from '../../lib/Icons';
 import { DISCUSSION } from './constants';
+import { themes } from '../../constants/colors';
 
 const Discussion = React.memo(({
-	msg, dcount, dlm, onDiscussionPress
+	msg, dcount, dlm, onDiscussionPress, theme
 }) => {
 	const time = formatLastMessage(dlm);
 	const buttonText = formatMessageCount(dcount, DISCUSSION);
 	return (
 		<>
-			<Text style={styles.startedDiscussion}>{I18n.t('Started_discussion')}</Text>
-			<Text style={styles.text}>{msg}</Text>
+			<Text style={[styles.startedDiscussion, { color: themes[theme].auxiliaryText }]}>{I18n.t('Started_discussion')}</Text>
+			<Text style={[styles.text, { color: themes[theme].titleText }]}>{msg}</Text>
 			<View style={styles.buttonContainer}>
 				<Touchable
 					onPress={onDiscussionPress}
-					background={Touchable.Ripple('#fff')}
-					style={[styles.button, styles.smallButton]}
+					background={Touchable.Ripple(themes[theme].bannerBackground)}
+					style={[styles.button, styles.smallButton, { backgroundColor: themes[theme].tintColor }]}
 					hitSlop={BUTTON_HIT_SLOP}
 				>
 					<>
-						<CustomIcon name='chat' size={20} style={styles.buttonIcon} />
-						<Text style={styles.buttonText}>{buttonText}</Text>
+						<CustomIcon name='chat' size={20} style={styles.buttonIcon} color={themes[theme].buttonText} />
+						<Text style={[styles.buttonText, { color: themes[theme].titleText }]}>{buttonText}</Text>
 					</>
 				</Touchable>
-				<Text style={styles.time}>{time}</Text>
+				<Text style={[styles.time, { color: themes[theme].auxiliaryText }]}>{time}</Text>
 			</View>
 		</>
 	);
@@ -44,6 +45,9 @@ const Discussion = React.memo(({
 	if (prevProps.dlm !== nextProps.dlm) {
 		return false;
 	}
+	if (prevProps.theme !== nextProps.theme) {
+		return false;
+	}
 	return true;
 });
 
@@ -51,6 +55,7 @@ Discussion.propTypes = {
 	msg: PropTypes.string,
 	dcount: PropTypes.number,
 	dlm: PropTypes.string,
+	theme: PropTypes.string,
 	onDiscussionPress: PropTypes.func
 };
 Discussion.displayName = 'MessageDiscussion';

app/containers/message/Image.js

@@ -9,28 +9,31 @@ import Markdown from '../markdown';
 import styles from './styles';
 import { formatAttachmentUrl } from '../../lib/utils';
 import { withSplit } from '../../split';
+import { themes } from '../../constants/colors';
 import sharedStyles from '../../views/Styles';
 
-const Button = React.memo(({ children, onPress, split }) => (
+const Button = React.memo(({
+	children, onPress, split, theme
+}) => (
 	<Touchable
 		onPress={onPress}
 		style={[styles.imageContainer, split && sharedStyles.tabletContent]}
-		background={Touchable.Ripple('#fff')}
+		background={Touchable.Ripple(themes[theme].bannerBackground)}
 	>
 		{children}
 	</Touchable>
 ));
 
-const Image = React.memo(({ img }) => (
+const Image = React.memo(({ img, theme }) => (
 	<FastImage
-		style={styles.image}
+		style={[styles.image, { borderColor: themes[theme].borderColor }]}
 		source={{ uri: encodeURI(img) }}
 		resizeMode={FastImage.resizeMode.cover}
 	/>
 ));
 
 const ImageContainer = React.memo(({
-	file, baseUrl, user, useMarkdown, onOpenFileModal, getCustomEmoji, split
+	file, baseUrl, user, useMarkdown, onOpenFileModal, getCustomEmoji, split, theme
 }) => {
 	const img = formatAttachmentUrl(file.image_url, user.id, user.token, baseUrl);
 	if (!img) {
@@ -41,21 +44,21 @@ const ImageContainer = React.memo(({
 
 	if (file.description) {
 		return (
-			<Button split={split} onPress={onPress}>
+			<Button split={split} theme={theme} onPress={onPress}>
 				<View>
-					<Image img={img} />
-					<Markdown msg={file.description} baseUrl={baseUrl} username={user.username} getCustomEmoji={getCustomEmoji} useMarkdown={useMarkdown} />
+					<Image img={img} theme={theme} />
+					<Markdown msg={file.description} baseUrl={baseUrl} username={user.username} getCustomEmoji={getCustomEmoji} useMarkdown={useMarkdown} theme={theme} />
 				</View>
 			</Button>
 		);
 	}
 
 	return (
-		<Button split={split} onPress={onPress}>
-			<Image img={img} />
+		<Button split={split} theme={theme} onPress={onPress}>
+			<Image img={img} theme={theme} />
 		</Button>
 	);
-}, (prevProps, nextProps) => equal(prevProps.file, nextProps.file) && prevProps.split === nextProps.split);
+}, (prevProps, nextProps) => equal(prevProps.file, nextProps.file) && prevProps.split === nextProps.split && prevProps.theme === nextProps.theme);
 
 ImageContainer.propTypes = {
 	file: PropTypes.object,
@@ -63,19 +66,22 @@ ImageContainer.propTypes = {
 	user: PropTypes.object,
 	useMarkdown: PropTypes.bool,
 	onOpenFileModal: PropTypes.func,
+	theme: PropTypes.string,
 	getCustomEmoji: PropTypes.func,
 	split: PropTypes.bool
 };
 ImageContainer.displayName = 'MessageImageContainer';
 
 Image.propTypes = {
-	img: PropTypes.string
+	img: PropTypes.string,
+	theme: PropTypes.string
 };
 ImageContainer.displayName = 'MessageImage';
 
 Button.propTypes = {
 	children: PropTypes.node,
 	onPress: PropTypes.func,
+	theme: PropTypes.string,
 	split: PropTypes.bool
 };
 ImageContainer.displayName = 'MessageButton';

app/containers/message/Message.js

@@ -5,7 +5,6 @@ import Touchable from 'react-native-platform-touchable';
 
 import User from './User';
 import styles from './styles';
-import sharedStyles from '../../views/Styles';
 import RepliedThread from './RepliedThread';
 import MessageAvatar from './MessageAvatar';
 import Attachments from './Attachments';
@@ -56,7 +55,7 @@ const Message = React.memo((props) => {
 		return (
 			<View style={[styles.container, props.style]}>
 				{thread}
-				<View style={[styles.flex, sharedStyles.alignItemsCenter]}>
+				<View style={[styles.flex, styles.center]}>
 					<MessageAvatar small {...props} />
 					<View
 						style={[
@@ -85,6 +84,7 @@ const Message = React.memo((props) => {
 				<ReadReceipt
 					isReadReceiptEnabled={props.isReadReceiptEnabled}
 					unread={props.unread}
+					theme={props.theme}
 				/>
 			</View>
 		</View>
@@ -134,7 +134,8 @@ Message.propTypes = {
 	onLongPress: PropTypes.func,
 	onPress: PropTypes.func,
 	isReadReceiptEnabled: PropTypes.bool,
-	unread: PropTypes.bool
+	unread: PropTypes.bool,
+	theme: PropTypes.string
 };
 
 MessageInner.propTypes = {

app/containers/message/MessageError.js

@@ -3,24 +3,25 @@ import Touchable from 'react-native-platform-touchable';
 import PropTypes from 'prop-types';
 
 import { CustomIcon } from '../../lib/Icons';
-import { COLOR_DANGER } from '../../constants/colors';
 import styles from './styles';
 import { BUTTON_HIT_SLOP } from './utils';
+import { themes } from '../../constants/colors';
 
-const MessageError = React.memo(({ hasError, onErrorPress }) => {
+const MessageError = React.memo(({ hasError, onErrorPress, theme }) => {
 	if (!hasError) {
 		return null;
 	}
 	return (
 		<Touchable onPress={onErrorPress} style={styles.errorButton} hitSlop={BUTTON_HIT_SLOP}>
-			<CustomIcon name='warning' color={COLOR_DANGER} size={18} />
+			<CustomIcon name='warning' color={themes[theme].dangerColor} size={18} />
 		</Touchable>
 	);
-}, (prevProps, nextProps) => prevProps.hasError === nextProps.hasError);
+}, (prevProps, nextProps) => prevProps.hasError === nextProps.hasError && prevProps.theme === nextProps.theme);
 
 MessageError.propTypes = {
 	hasError: PropTypes.bool,
-	onErrorPress: PropTypes.func
+	onErrorPress: PropTypes.func,
+	theme: PropTypes.string
 };
 MessageError.displayName = 'MessageError';
 

app/containers/message/Reactions.js

@@ -7,24 +7,26 @@ import { CustomIcon } from '../../lib/Icons';
 import styles from './styles';
 import Emoji from './Emoji';
 import { BUTTON_HIT_SLOP } from './utils';
+import { themes } from '../../constants/colors';
+import { withTheme } from '../../theme';
 
-const AddReaction = React.memo(({ reactionInit }) => (
+const AddReaction = React.memo(({ reactionInit, theme }) => (
 	<Touchable
 		onPress={reactionInit}
 		key='message-add-reaction'
 		testID='message-add-reaction'
-		style={styles.reactionButton}
-		background={Touchable.Ripple('#fff')}
+		style={[styles.reactionButton, { backgroundColor: themes[theme].backgroundColor }]}
+		background={Touchable.Ripple(themes[theme].bannerBackground)}
 		hitSlop={BUTTON_HIT_SLOP}
 	>
-		<View style={styles.reactionContainer}>
-			<CustomIcon name='add-reaction' size={21} style={styles.addReaction} />
+		<View style={[styles.reactionContainer, { borderColor: themes[theme].borderColor }]}>
+			<CustomIcon name='add-reaction' size={21} color={themes[theme].tintColor} />
 		</View>
 	</Touchable>
 ));
 
 const Reaction = React.memo(({
-	reaction, user, onReactionLongPress, onReactionPress, baseUrl, getCustomEmoji
+	reaction, user, onReactionLongPress, onReactionPress, baseUrl, getCustomEmoji, theme
 }) => {
 	const reacted = reaction.usernames.findIndex(item => item === user.username) !== -1;
 	return (
@@ -33,11 +35,11 @@ const Reaction = React.memo(({
 			onLongPress={onReactionLongPress}
 			key={reaction.emoji}
 			testID={`message-reaction-${ reaction.emoji }`}
-			style={[styles.reactionButton, reacted && styles.reactionButtonReacted]}
-			background={Touchable.Ripple('#fff')}
+			style={[styles.reactionButton, { backgroundColor: reacted ? themes[theme].bannerBackground : themes[theme].backgroundColor }]}
+			background={Touchable.Ripple(themes[theme].bannerBackground)}
 			hitSlop={BUTTON_HIT_SLOP}
 		>
-			<View style={[styles.reactionContainer, reacted && styles.reactedContainer]}>
+			<View style={[styles.reactionContainer, { borderColor: reacted ? themes[theme].tintColor : themes[theme].borderColor }]}>
 				<Emoji
 					content={reaction.emoji}
 					standardEmojiStyle={styles.reactionEmoji}
@@ -45,14 +47,14 @@ const Reaction = React.memo(({
 					baseUrl={baseUrl}
 					getCustomEmoji={getCustomEmoji}
 				/>
-				<Text style={styles.reactionCount}>{ reaction.usernames.length }</Text>
+				<Text style={[styles.reactionCount, { color: themes[theme].tintColor }]}>{ reaction.usernames.length }</Text>
 			</View>
 		</Touchable>
 	);
 });
 
 const Reactions = React.memo(({
-	reactions, user, baseUrl, onReactionPress, reactionInit, onReactionLongPress, getCustomEmoji
+	reactions, user, baseUrl, onReactionPress, reactionInit, onReactionLongPress, getCustomEmoji, theme
 }) => {
 	if (!reactions || reactions.length === 0) {
 		return null;
@@ -68,9 +70,10 @@ const Reactions = React.memo(({
 					onReactionLongPress={onReactionLongPress}
 					onReactionPress={onReactionPress}
 					getCustomEmoji={getCustomEmoji}
+					theme={theme}
 				/>
 			))}
-			<AddReaction reactionInit={reactionInit} />
+			<AddReaction reactionInit={reactionInit} theme={theme} />
 		</View>
 	);
 });
@@ -81,7 +84,8 @@ Reaction.propTypes = {
 	baseUrl: PropTypes.string,
 	onReactionPress: PropTypes.func,
 	onReactionLongPress: PropTypes.func,
-	getCustomEmoji: PropTypes.func
+	getCustomEmoji: PropTypes.func,
+	theme: PropTypes.string
 };
 Reaction.displayName = 'MessageReaction';
 
@@ -92,13 +96,15 @@ Reactions.propTypes = {
 	onReactionPress: PropTypes.func,
 	reactionInit: PropTypes.func,
 	onReactionLongPress: PropTypes.func,
-	getCustomEmoji: PropTypes.func
+	getCustomEmoji: PropTypes.func,
+	theme: PropTypes.string
 };
 Reactions.displayName = 'MessageReactions';
 
 AddReaction.propTypes = {
-	reactionInit: PropTypes.func
+	reactionInit: PropTypes.func,
+	theme: PropTypes.string
 };
 AddReaction.displayName = 'MessageAddReaction';
 
-export default Reactions;
+export default withTheme(Reactions);

app/containers/message/ReadReceipt.js

@@ -1,13 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { COLOR_PRIMARY } from '../../constants/colors';
+import { themes } from '../../constants/colors';
 import { CustomIcon } from '../../lib/Icons';
 import styles from './styles';
 
-const ReadReceipt = React.memo(({ isReadReceiptEnabled, unread }) => {
+const ReadReceipt = React.memo(({ isReadReceiptEnabled, unread, theme }) => {
 	if (isReadReceiptEnabled && !unread && unread !== null) {
-		return <CustomIcon name='check' color={COLOR_PRIMARY} size={15} style={styles.readReceipt} />;
+		return <CustomIcon name='check' color={themes[theme].tintColor} size={15} style={styles.readReceipt} />;
 	}
 	return null;
 });
@@ -15,7 +15,8 @@ ReadReceipt.displayName = 'MessageReadReceipt';
 
 ReadReceipt.propTypes = {
 	isReadReceiptEnabled: PropTypes.bool,
-	unread: PropTypes.bool
+	unread: PropTypes.bool,
+	theme: PropTypes.bool
 };
 
 export default ReadReceipt;

app/containers/message/RepliedThread.js

@@ -7,9 +7,10 @@ import PropTypes from 'prop-types';
 import { CustomIcon } from '../../lib/Icons';
 import DisclosureIndicator from '../DisclosureIndicator';
 import styles from './styles';
+import { themes } from '../../constants/colors';
 
 const RepliedThread = React.memo(({
-	tmid, tmsg, isHeader, fetchThreadName, id
+	tmid, tmsg, isHeader, fetchThreadName, id, theme
 }) => {
 	if (!tmid || !isHeader) {
 		return null;
@@ -25,9 +26,9 @@ const RepliedThread = React.memo(({
 
 	return (
 		<View style={styles.repliedThread} testID={`message-thread-replied-on-${ msg }`}>
-			<CustomIcon name='thread' size={20} style={styles.repliedThreadIcon} />
-			<Text style={styles.repliedThreadName} numberOfLines={1}>{msg}</Text>
-			<DisclosureIndicator />
+			<CustomIcon name='thread' size={20} style={styles.repliedThreadIcon} color={themes[theme].tintColor} />
+			<Text style={[styles.repliedThreadName, { color: themes[theme].tintColor }]} numberOfLines={1}>{msg}</Text>
+			<DisclosureIndicator theme={theme} />
 		</View>
 	);
 }, (prevProps, nextProps) => {
@@ -40,6 +41,9 @@ const RepliedThread = React.memo(({
 	if (prevProps.isHeader !== nextProps.isHeader) {
 		return false;
 	}
+	if (prevProps.theme !== nextProps.theme) {
+		return false;
+	}
 	return true;
 });
 
@@ -48,6 +52,7 @@ RepliedThread.propTypes = {
 	tmsg: PropTypes.string,
 	id: PropTypes.string,
 	isHeader: PropTypes.bool,
+	theme: PropTypes.string,
 	fetchThreadName: PropTypes.func
 };
 RepliedThread.displayName = 'MessageRepliedThread';

app/containers/message/Reply.js

@@ -8,7 +8,7 @@ import isEqual from 'deep-equal';
 import Markdown from '../markdown';
 import openLink from '../../utils/openLink';
 import sharedStyles from '../../views/Styles';
-import { COLOR_BACKGROUND_CONTAINER, COLOR_BORDER } from '../../constants/colors';
+import { themes } from '../../constants/colors';
 import { withSplit } from '../../split';
 
 const styles = StyleSheet.create({
@@ -18,8 +18,6 @@ const styles = StyleSheet.create({
 		alignItems: 'center',
 		marginTop: 6,
 		alignSelf: 'flex-start',
-		backgroundColor: COLOR_BACKGROUND_CONTAINER,
-		borderColor: COLOR_BORDER,
 		borderWidth: 1,
 		borderRadius: 4
 	},
@@ -37,13 +35,11 @@ const styles = StyleSheet.create({
 	author: {
 		flex: 1,
 		fontSize: 16,
-		...sharedStyles.textColorNormal,
 		...sharedStyles.textMedium
 	},
 	time: {
 		fontSize: 12,
 		marginLeft: 10,
-		...sharedStyles.textColorDescription,
 		...sharedStyles.textRegular,
 		fontWeight: '300'
 	},
@@ -58,12 +54,10 @@ const styles = StyleSheet.create({
 	},
 	fieldTitle: {
 		fontSize: 14,
-		...sharedStyles.textColorNormal,
 		...sharedStyles.textSemibold
 	},
 	fieldValue: {
 		fontSize: 14,
-		...sharedStyles.textColorNormal,
 		...sharedStyles.textRegular
 	},
 	marginTop: {
@@ -71,21 +65,21 @@ const styles = StyleSheet.create({
 	}
 });
 
-const Title = React.memo(({ attachment, timeFormat }) => {
+const Title = React.memo(({ attachment, timeFormat, theme }) => {
 	if (!attachment.author_name) {
 		return null;
 	}
 	const time = attachment.ts ? moment(attachment.ts).format(timeFormat) : null;
 	return (
 		<View style={styles.authorContainer}>
-			{attachment.author_name ? <Text style={styles.author}>{attachment.author_name}</Text> : null}
-			{time ? <Text style={styles.time}>{ time }</Text> : null}
+			{attachment.author_name ? <Text style={[styles.author, { color: themes[theme].titleText }]}>{attachment.author_name}</Text> : null}
+			{time ? <Text style={[styles.time, { color: themes[theme].auxiliaryText }]}>{ time }</Text> : null}
 		</View>
 	);
-}, () => true);
+});
 
 const Description = React.memo(({
-	attachment, baseUrl, user, getCustomEmoji, useMarkdown
+	attachment, baseUrl, user, getCustomEmoji, useMarkdown, theme
 }) => {
 	const text = attachment.text || attachment.title;
 	if (!text) {
@@ -98,6 +92,7 @@ const Description = React.memo(({
 			username={user.username}
 			getCustomEmoji={getCustomEmoji}
 			useMarkdown={useMarkdown}
+			theme={theme}
 		/>
 	);
 }, (prevProps, nextProps) => {
@@ -107,10 +102,13 @@ const Description = React.memo(({
 	if (prevProps.attachment.title !== nextProps.attachment.title) {
 		return false;
 	}
+	if (prevProps.theme !== nextProps.theme) {
+		return false;
+	}
 	return true;
 });
 
-const Fields = React.memo(({ attachment }) => {
+const Fields = React.memo(({ attachment, theme }) => {
 	if (!attachment.fields) {
 		return null;
 	}
@@ -118,16 +116,16 @@ const Fields = React.memo(({ attachment }) => {
 		<View style={styles.fieldsContainer}>
 			{attachment.fields.map(field => (
 				<View key={field.title} style={[styles.fieldContainer, { width: field.short ? '50%' : '100%' }]}>
-					<Text style={styles.fieldTitle}>{field.title}</Text>
-					<Text style={styles.fieldValue}>{field.value}</Text>
+					<Text style={[styles.fieldTitle, { color: themes[theme].titleText }]}>{field.title}</Text>
+					<Text style={[styles.fieldValue, { color: themes[theme].titleText }]}>{field.value}</Text>
 				</View>
 			))}
 		</View>
 	);
-}, (prevProps, nextProps) => isEqual(prevProps.attachment.fields, nextProps.attachment.fields));
+}, (prevProps, nextProps) => isEqual(prevProps.attachment.fields, nextProps.attachment.fields) && prevProps.theme === nextProps.theme);
 
 const Reply = React.memo(({
-	attachment, timeFormat, baseUrl, user, index, getCustomEmoji, useMarkdown, split
+	attachment, timeFormat, baseUrl, user, index, getCustomEmoji, useMarkdown, split, theme
 }) => {
 	if (!attachment) {
 		return null;
@@ -141,17 +139,25 @@ const Reply = React.memo(({
 		if (attachment.type === 'file') {
 			url = `${ baseUrl }${ url }?rc_uid=${ user.id }&rc_token=${ user.token }`;
 		}
-		openLink(url);
+		openLink(url, theme);
 	};
 
 	return (
 		<Touchable
 			onPress={onPress}
-			style={[styles.button, index > 0 && styles.marginTop, split && sharedStyles.tabletContent]}
-			background={Touchable.Ripple('#fff')}
+			style={[
+				styles.button,
+				index > 0 && styles.marginTop,
+				{
+					backgroundColor: themes[theme].chatComponentBackground,
+					borderColor: themes[theme].borderColor
+				},
+				split && sharedStyles.tabletContent
+			]}
+			background={Touchable.Ripple(themes[theme].bannerBackground)}
 		>
 			<View style={styles.attachmentContainer}>
-				<Title attachment={attachment} timeFormat={timeFormat} />
+				<Title attachment={attachment} timeFormat={timeFormat} theme={theme} />
 				<Description
 					attachment={attachment}
 					timeFormat={timeFormat}
@@ -159,12 +165,13 @@ const Reply = React.memo(({
 					user={user}
 					getCustomEmoji={getCustomEmoji}
 					useMarkdown={useMarkdown}
+					theme={theme}
 				/>
-				<Fields attachment={attachment} />
+				<Fields attachment={attachment} theme={theme} />
 			</View>
 		</Touchable>
 	);
-}, (prevProps, nextProps) => isEqual(prevProps.attachment, nextProps.attachment) && prevProps.split === nextProps.split);
+}, (prevProps, nextProps) => isEqual(prevProps.attachment, nextProps.attachment) && prevProps.split === nextProps.split && prevProps.theme === nextProps.theme);
 
 Reply.propTypes = {
 	attachment: PropTypes.object,
@@ -173,6 +180,7 @@ Reply.propTypes = {
 	user: PropTypes.object,
 	index: PropTypes.number,
 	useMarkdown: PropTypes.bool,
+	theme: PropTypes.string,
 	getCustomEmoji: PropTypes.func,
 	split: PropTypes.bool
 };
@@ -180,7 +188,8 @@ Reply.displayName = 'MessageReply';
 
 Title.propTypes = {
 	attachment: PropTypes.object,
-	timeFormat: PropTypes.string
+	timeFormat: PropTypes.string,
+	theme: PropTypes.string
 };
 Title.displayName = 'MessageReplyTitle';
 
@@ -189,12 +198,14 @@ Description.propTypes = {
 	baseUrl: PropTypes.string,
 	user: PropTypes.object,
 	useMarkdown: PropTypes.bool,
-	getCustomEmoji: PropTypes.func
+	getCustomEmoji: PropTypes.func,
+	theme: PropTypes.string
 };
 Description.displayName = 'MessageReplyDescription';
 
 Fields.propTypes = {
-	attachment: PropTypes.object
+	attachment: PropTypes.object,
+	theme: PropTypes.string
 };
 Fields.displayName = 'MessageReplyFields';
 

app/containers/message/Thread.js

@@ -6,9 +6,10 @@ import { formatLastMessage, formatMessageCount } from './utils';
 import styles from './styles';
 import { CustomIcon } from '../../lib/Icons';
 import { THREAD } from './constants';
+import { themes } from '../../constants/colors';
 
 const Thread = React.memo(({
-	msg, tcount, tlm, customThreadTimeFormat, isThreadRoom
+	msg, tcount, tlm, customThreadTimeFormat, isThreadRoom, theme
 }) => {
 	if (!tlm || isThreadRoom || tcount === 0) {
 		return null;
@@ -19,25 +20,29 @@ const Thread = React.memo(({
 	return (
 		<View style={styles.buttonContainer}>
 			<View
-				style={[styles.button, styles.smallButton]}
+				style={[styles.button, styles.smallButton, { backgroundColor: themes[theme].tintColor }]}
 				testID={`message-thread-button-${ msg }`}
 			>
-				<CustomIcon name='thread' size={20} style={styles.buttonIcon} />
-				<Text style={styles.buttonText}>{buttonText}</Text>
+				<CustomIcon name='thread' size={20} style={[styles.buttonIcon, { color: themes[theme].buttonText }]} />
+				<Text style={[styles.buttonText, { color: themes[theme].buttonText }]}>{buttonText}</Text>
 			</View>
-			<Text style={styles.time}>{time}</Text>
+			<Text style={[styles.time, { color: themes[theme].auxiliaryText }]}>{time}</Text>
 		</View>
 	);
 }, (prevProps, nextProps) => {
 	if (prevProps.tcount !== nextProps.tcount) {
 		return false;
 	}
+	if (prevProps.theme !== nextProps.theme) {
+		return false;
+	}
 	return true;
 });
 
 Thread.propTypes = {
 	msg: PropTypes.string,
 	tcount: PropTypes.string,
+	theme: PropTypes.string,
 	tlm: PropTypes.string,
 	customThreadTimeFormat: PropTypes.string,
 	isThreadRoom: PropTypes.bool

app/containers/message/Urls.js

@@ -7,9 +7,8 @@ import isEqual from 'lodash/isEqual';
 
 import openLink from '../../utils/openLink';
 import sharedStyles from '../../views/Styles';
-import {
-	COLOR_BACKGROUND_CONTAINER, COLOR_BORDER, COLOR_PRIMARY
-} from '../../constants/colors';
+import { themes } from '../../constants/colors';
+import { withTheme } from '../../theme';
 import { withSplit } from '../../split';
 
 const styles = StyleSheet.create({
@@ -20,8 +19,6 @@ const styles = StyleSheet.create({
 		flex: 1,
 		flexDirection: 'column',
 		borderRadius: 4,
-		backgroundColor: COLOR_BACKGROUND_CONTAINER,
-		borderColor: COLOR_BORDER,
 		borderWidth: 1
 	},
 	textContainer: {
@@ -32,13 +29,11 @@ const styles = StyleSheet.create({
 		alignItems: 'flex-start'
 	},
 	title: {
-		color: COLOR_PRIMARY,
 		fontSize: 16,
 		...sharedStyles.textMedium
 	},
 	description: {
 		fontSize: 16,
-		...sharedStyles.textColorDescription,
 		...sharedStyles.textRegular
 	},
 	marginTop: {
@@ -60,10 +55,10 @@ const UrlImage = React.memo(({ image, user, baseUrl }) => {
 	return <FastImage source={{ uri: image }} style={styles.image} resizeMode={FastImage.resizeMode.cover} />;
 }, (prevProps, nextProps) => prevProps.image === nextProps.image);
 
-const UrlContent = React.memo(({ title, description }) => (
+const UrlContent = React.memo(({ title, description, theme }) => (
 	<View style={styles.textContainer}>
-		{title ? <Text style={styles.title} numberOfLines={2}>{title}</Text> : null}
-		{description ? <Text style={styles.description} numberOfLines={2}>{description}</Text> : null}
+		{title ? <Text style={[styles.title, { color: themes[theme].tintColor }]} numberOfLines={2}>{title}</Text> : null}
+		{description ? <Text style={[styles.description, { color: themes[theme].auxiliaryText }]} numberOfLines={2}>{description}</Text> : null}
 	</View>
 ), (prevProps, nextProps) => {
 	if (prevProps.title !== nextProps.title) {
@@ -72,43 +67,55 @@ const UrlContent = React.memo(({ title, description }) => (
 	if (prevProps.description !== nextProps.description) {
 		return false;
 	}
+	if (prevProps.theme !== nextProps.theme) {
+		return false;
+	}
 	return true;
 });
 
 const Url = React.memo(({
-	url, index, user, baseUrl, split
+	url, index, user, baseUrl, split, theme
 }) => {
 	if (!url) {
 		return null;
 	}
 
-	const onPress = () => openLink(url.url);
+	const onPress = () => openLink(url.url, theme);
 
 	return (
 		<Touchable
 			onPress={onPress}
-			style={[styles.button, index > 0 && styles.marginTop, styles.container, split && sharedStyles.tabletContent]}
-			background={Touchable.Ripple('#fff')}
+			style={[
+				styles.button,
+				index > 0 && styles.marginTop,
+				styles.container,
+				{
+					backgroundColor: themes[theme].chatComponentBackground,
+					borderColor: themes[theme].borderColor
+				},
+				split && sharedStyles.tabletContent
+			]}
+			background={Touchable.Ripple(themes[theme].bannerBackground)}
 		>
 			<>
 				<UrlImage image={url.image} user={user} baseUrl={baseUrl} />
-				<UrlContent title={url.title} description={url.description} />
+				<UrlContent title={url.title} description={url.description} theme={theme} />
 			</>
 		</Touchable>
 	);
-}, (oldProps, newProps) => isEqual(oldProps.url, newProps.url) && oldProps.split === newProps.split);
+}, (oldProps, newProps) => isEqual(oldProps.url, newProps.url) && oldProps.split === newProps.split && oldProps.theme === newProps.theme);
 
 const Urls = React.memo(({
-	urls, user, baseUrl, split
+	urls, user, baseUrl, split, theme
 }) => {
 	if (!urls || urls.length === 0) {
 		return null;
 	}
 
 	return urls.map((url, index) => (
-		<Url url={url} key={url.url} index={index} user={user} baseUrl={baseUrl} split={split} />
+		<Url url={url} key={url.url} index={index} user={user} baseUrl={baseUrl} split={split} theme={theme} />
 	));
-}, (oldProps, newProps) => isEqual(oldProps.urls, newProps.urls) && oldProps.split === newProps.split);
+}, (oldProps, newProps) => isEqual(oldProps.urls, newProps.urls) && oldProps.split === newProps.split && oldProps.theme === newProps.theme);
 
 UrlImage.propTypes = {
 	image: PropTypes.string,
@@ -119,7 +126,8 @@ UrlImage.displayName = 'MessageUrlImage';
 
 UrlContent.propTypes = {
 	title: PropTypes.string,
-	description: PropTypes.string
+	description: PropTypes.string,
+	theme: PropTypes.string
 };
 UrlContent.displayName = 'MessageUrlContent';
 
@@ -128,6 +136,7 @@ Url.propTypes = {
 	index: PropTypes.number,
 	user: PropTypes.object,
 	baseUrl: PropTypes.string,
+	theme: PropTypes.string,
 	split: PropTypes.bool
 };
 Url.displayName = 'MessageUrl';
@@ -136,8 +145,9 @@ Urls.propTypes = {
 	urls: PropTypes.array,
 	user: PropTypes.object,
 	baseUrl: PropTypes.string,
+	theme: PropTypes.string,
 	split: PropTypes.bool
 };
 Urls.displayName = 'MessageUrls';
 
-export default withSplit(Urls);
+export default withTheme(withSplit(Urls));

app/containers/message/User.js

@@ -3,6 +3,9 @@ import PropTypes from 'prop-types';
 import { View, Text, StyleSheet } from 'react-native';
 import moment from 'moment';
 
+import { themes } from '../../constants/colors';
+import { withTheme } from '../../theme';
+
 import MessageError from './MessageError';
 import sharedStyles from '../../views/Styles';
 import messageStyles from './styles';
@@ -16,7 +19,6 @@ const styles = StyleSheet.create({
 	username: {
 		fontSize: 16,
 		lineHeight: 22,
-		...sharedStyles.textColorNormal,
 		...sharedStyles.textMedium
 	},
 	titleContainer: {
@@ -26,29 +28,28 @@ const styles = StyleSheet.create({
 	},
 	alias: {
 		fontSize: 14,
-		...sharedStyles.textColorDescription,
 		...sharedStyles.textRegular
 	}
 });
 
 const User = React.memo(({
-	isHeader, useRealName, author, alias, ts, timeFormat, hasError, ...props
+	isHeader, useRealName, author, alias, ts, timeFormat, hasError, theme, ...props
 }) => {
 	if (isHeader || hasError) {
 		const username = (useRealName && author.name) || author.username;
-		const aliasUsername = alias ? (<Text style={styles.alias}> @{username}</Text>) : null;
+		const aliasUsername = alias ? (<Text style={[styles.alias, { color: themes[theme].auxiliaryText }]}> @{username}</Text>) : null;
 		const time = moment(ts).format(timeFormat);
 
 		return (
 			<View style={styles.container}>
 				<View style={styles.titleContainer}>
-					<Text style={styles.username} numberOfLines={1}>
+					<Text style={[styles.username, { color: themes[theme].titleText }]} numberOfLines={1}>
 						{alias || username}
 						{aliasUsername}
 					</Text>
 				</View>
-				<Text style={messageStyles.time}>{time}</Text>
-				{ hasError && <MessageError hasError={hasError} {...props} /> }
+				<Text style={[messageStyles.time, { color: themes[theme].auxiliaryText }]}>{time}</Text>
+				{ hasError && <MessageError hasError={hasError} theme={theme} {...props} /> }
 			</View>
 		);
 	}
@@ -62,8 +63,9 @@ User.propTypes = {
 	author: PropTypes.object,
 	alias: PropTypes.string,
 	ts: PropTypes.instanceOf(Date),
-	timeFormat: PropTypes.string
+	timeFormat: PropTypes.string,
+	theme: PropTypes.string
 };
 User.displayName = 'MessageUser';
 
-export default User;
+export default withTheme(User);

app/containers/message/Video.js

@@ -9,6 +9,7 @@ import openLink from '../../utils/openLink';
 import { isIOS, isTablet } from '../../utils/deviceInfo';
 import { CustomIcon } from '../../lib/Icons';
 import { formatAttachmentUrl } from '../../lib/utils';
+import { themes } from '../../constants/colors';
 import sharedStyles from '../../views/Styles';
 
 const SUPPORTED_TYPES = ['video/quicktime', 'video/mp4', ...(isIOS ? [] : ['video/3gp', 'video/mkv'])];
@@ -19,22 +20,14 @@ const styles = StyleSheet.create({
 		flex: 1,
 		borderRadius: 4,
 		height: 150,
-		backgroundColor: '#1f2329',
 		marginBottom: 6,
 		alignItems: 'center',
 		justifyContent: 'center'
-	},
-	modal: {
-		margin: 0,
-		backgroundColor: '#000'
-	},
-	image: {
-		color: 'white'
 	}
 });
 
 const Video = React.memo(({
-	file, baseUrl, user, useMarkdown, onOpenFileModal, getCustomEmoji
+	file, baseUrl, user, useMarkdown, onOpenFileModal, getCustomEmoji, theme
 }) => {
 	if (!baseUrl) {
 		return null;
@@ -45,26 +38,26 @@ const Video = React.memo(({
 			return onOpenFileModal(file);
 		}
 		const uri = formatAttachmentUrl(file.video_url, user.id, user.token, baseUrl);
-		openLink(uri);
+		openLink(uri, theme);
 	};
 
 	return (
 		<>
 			<Touchable
 				onPress={onPress}
-				style={[styles.button, isTablet && sharedStyles.tabletContent]}
-				background={Touchable.Ripple('#fff')}
+				style={[styles.button, { backgroundColor: themes[theme].videoBackground }, isTablet && sharedStyles.tabletContent]}
+				background={Touchable.Ripple(themes[theme].bannerBackground)}
 			>
 				<CustomIcon
 					name='play'
 					size={54}
-					style={styles.image}
+					color={themes[theme].buttonText}
 				/>
 			</Touchable>
-			<Markdown msg={file.description} baseUrl={baseUrl} username={user.username} getCustomEmoji={getCustomEmoji} useMarkdown={useMarkdown} />
+			<Markdown msg={file.description} baseUrl={baseUrl} username={user.username} getCustomEmoji={getCustomEmoji} useMarkdown={useMarkdown} theme={theme} />
 		</>
 	);
-}, (prevProps, nextProps) => isEqual(prevProps.file, nextProps.file));
+}, (prevProps, nextProps) => isEqual(prevProps.file, nextProps.file) && prevProps.theme === nextProps.theme);
 
 Video.propTypes = {
 	file: PropTypes.object,
@@ -72,7 +65,8 @@ Video.propTypes = {
 	user: PropTypes.object,
 	useMarkdown: PropTypes.bool,
 	onOpenFileModal: PropTypes.func,
-	getCustomEmoji: PropTypes.func
+	getCustomEmoji: PropTypes.func,
+	theme: PropTypes.string
 };
 
 export default Video;

app/containers/message/index.js

@@ -6,8 +6,9 @@ import Message from './Message';
 import debounce from '../../utils/debounce';
 import { SYSTEM_MESSAGES, getMessageTranslation } from './utils';
 import messagesStatus from '../../constants/messagesStatus';
+import { withTheme } from '../../theme';
 
-export default class MessageContainer extends React.Component {
+class MessageContainer extends React.Component {
 	static propTypes = {
 		item: PropTypes.object.isRequired,
 		user: PropTypes.shape({
@@ -42,13 +43,15 @@ export default class MessageContainer extends React.Component {
 		onOpenFileModal: PropTypes.func,
 		onReactionLongPress: PropTypes.func,
 		navToRoomInfo: PropTypes.func,
-		callJitsi: PropTypes.func
+		callJitsi: PropTypes.func,
+		theme: PropTypes.string
 	}
 
 	static defaultProps = {
 		onLongPress: () => {},
 		archived: false,
-		broadcast: false
+		broadcast: false,
+		theme: 'light'
 	}
 
 	componentDidMount() {
@@ -61,7 +64,11 @@ export default class MessageContainer extends React.Component {
 		}
 	}
 
-	shouldComponentUpdate() {
+	shouldComponentUpdate(nextProps) {
+		const { theme } = this.props;
+		if (nextProps.theme !== theme) {
+			return true;
+		}
 		return false;
 	}
 
@@ -205,7 +212,7 @@ export default class MessageContainer extends React.Component {
 
 	render() {
 		const {
-			item, user, style, archived, baseUrl, useRealName, broadcast, fetchThreadName, customThreadTimeFormat, onOpenFileModal, timeFormat, useMarkdown, isReadReceiptEnabled, autoTranslateRoom, autoTranslateLanguage, navToRoomInfo, getCustomEmoji, isThreadRoom, callJitsi
+			item, user, style, archived, baseUrl, useRealName, broadcast, fetchThreadName, customThreadTimeFormat, onOpenFileModal, timeFormat, useMarkdown, isReadReceiptEnabled, autoTranslateRoom, autoTranslateLanguage, navToRoomInfo, getCustomEmoji, isThreadRoom, callJitsi, theme
 		} = this.props;
 		const {
 			id, msg, ts, attachments, urls, reactions, t, avatar, u, alias, editedBy, role, drid, dcount, dlm, tmid, tcount, tlm, tmsg, mentions, channels, unread, autoTranslate: autoTranslateMessage
@@ -272,7 +279,10 @@ export default class MessageContainer extends React.Component {
 				getCustomEmoji={getCustomEmoji}
 				navToRoomInfo={navToRoomInfo}
 				callJitsi={callJitsi}
+				theme={theme}
 			/>
 		);
 	}
 }
+
+export default withTheme(MessageContainer);

app/containers/message/styles.js

@@ -1,9 +1,6 @@
 import { StyleSheet } from 'react-native';
 
 import sharedStyles from '../../views/Styles';
-import {
-	COLOR_BORDER, COLOR_PRIMARY, COLOR_WHITE
-} from '../../constants/colors';
 import { isTablet } from '../../utils/deviceInfo';
 
 export default StyleSheet.create({
@@ -26,6 +23,9 @@ export default StyleSheet.create({
 	messageContentWithError: {
 		marginLeft: 0
 	},
+	center: {
+		alignItems: 'center'
+	},
 	flex: {
 		flexDirection: 'row'
 		// flex: 1
@@ -44,27 +44,19 @@ export default StyleSheet.create({
 		marginBottom: 6,
 		borderRadius: 2
 	},
-	reactionButtonReacted: {
-		backgroundColor: '#e8f2ff'
-	},
 	reactionContainer: {
 		flexDirection: 'row',
 		justifyContent: 'center',
 		alignItems: 'center',
 		borderRadius: 2,
 		borderWidth: 1,
-		borderColor: COLOR_BORDER,
 		height: 28,
 		minWidth: 46.3
 	},
-	reactedContainer: {
-		borderColor: COLOR_PRIMARY
-	},
 	reactionCount: {
 		fontSize: 14,
 		marginLeft: 3,
 		marginRight: 8.5,
-		color: COLOR_PRIMARY,
 		...sharedStyles.textSemibold
 	},
 	reactionEmoji: {
@@ -82,9 +74,6 @@ export default StyleSheet.create({
 	avatarSmall: {
 		marginLeft: 16
 	},
-	addReaction: {
-		color: COLOR_PRIMARY
-	},
 	errorButton: {
 		paddingLeft: 10,
 		paddingVertical: 5
@@ -100,18 +89,15 @@ export default StyleSheet.create({
 		flexDirection: 'row',
 		alignItems: 'center',
 		justifyContent: 'center',
-		backgroundColor: COLOR_PRIMARY,
 		borderRadius: 2
 	},
 	smallButton: {
 		height: 30
 	},
 	buttonIcon: {
-		color: COLOR_WHITE,
 		marginRight: 6
 	},
 	buttonText: {
-		color: COLOR_WHITE,
 		fontSize: 14,
 		...sharedStyles.textMedium
 	},
@@ -125,7 +111,6 @@ export default StyleSheet.create({
 		// maxWidth: 400,
 		minHeight: isTablet ? 300 : 200,
 		borderRadius: 4,
-		borderColor: COLOR_BORDER,
 		borderWidth: 1
 	},
 	imagePressed: {
@@ -138,27 +123,23 @@ export default StyleSheet.create({
 	},
 	text: {
 		fontSize: 16,
-		...sharedStyles.textColorNormal,
 		...sharedStyles.textRegular
 	},
 	textInfo: {
 		fontStyle: 'italic',
 		fontSize: 16,
-		...sharedStyles.textColorDescription,
 		...sharedStyles.textRegular
 	},
 	startedDiscussion: {
 		fontStyle: 'italic',
 		fontSize: 16,
 		marginBottom: 6,
-		...sharedStyles.textColorDescription,
 		...sharedStyles.textRegular
 	},
 	time: {
 		fontSize: 12,
 		paddingLeft: 10,
 		lineHeight: 22,
-		...sharedStyles.textColorDescription,
 		...sharedStyles.textRegular,
 		fontWeight: '300'
 	},
@@ -170,14 +151,12 @@ export default StyleSheet.create({
 		marginBottom: 12
 	},
 	repliedThreadIcon: {
-		color: COLOR_PRIMARY,
 		marginRight: 10,
 		marginLeft: 16
 	},
 	repliedThreadName: {
 		fontSize: 16,
 		flex: 1,
-		color: COLOR_PRIMARY,
 		...sharedStyles.textRegular
 	},
 	readReceipt: {

app/i18n/locales/en.js

@@ -95,6 +95,7 @@ export default {
 	announcement: 'announcement',
 	Announcement: 'Announcement',
 	Apply_Your_Certificate: 'Apply Your Certificate',
+	Applying_a_theme_will_change_how_the_app_looks: 'Applying a theme will change how the app looks.',
 	ARCHIVE: 'ARCHIVE',
 	archive: 'archive',
 	are_typing: 'are typing',
@@ -102,11 +103,13 @@ export default {
 	Are_you_sure_you_want_to_leave_the_room: 'Are you sure you want to leave the room {{room}}?',
 	Audio: 'Audio',
 	Authenticating: 'Authenticating',
+	Automatic: 'Automatic',
 	Auto_Translate: 'Auto-Translate',
 	Avatar_changed_successfully: 'Avatar changed successfully!',
 	Avatar_Url: 'Avatar URL',
 	Away: 'Away',
 	Back: 'Back',
+	Black: 'Black',
 	Block_user: 'Block user',
 	Broadcast_channel_Description: 'Only authorized users can write new messages, but the other users will be able to reply',
 	Broadcast_Channel: 'Broadcast Channel',
@@ -148,6 +151,8 @@ export default {
 	Created_snippet: 'Created a snippet',
 	Create_a_new_workspace: 'Create a new workspace',
 	Create: 'Create',
+	Dark: 'Dark',
+	Dark_level: 'Dark Level',
 	Default: 'Default',
 	Delete_Room_Warning: 'Deleting a room will delete all messages posted within the room. This cannot be undone.',
 	delete: 'delete',
@@ -212,6 +217,7 @@ export default {
 	leaving_room: 'leaving room',
 	leave: 'leave',
 	Legal: 'Legal',
+	Light: 'Light',
 	License: 'License',
 	Livechat: 'Livechat',
 	Login: 'Login',

app/i18n/locales/pt-BR.js

@@ -99,16 +99,19 @@ export default {
 	and: 'e',
 	announcement: 'anúncio',
 	Announcement: 'Anúncio',
+	Applying_a_theme_will_change_how_the_app_looks: 'Aplicar um tema mudará a aparência do app.',
 	ARCHIVE: 'ARQUIVAR',
 	archive: 'arquivar',
 	are_typing: 'estão digitando',
 	Are_you_sure_question_mark: 'Você tem certeza?',
 	Are_you_sure_you_want_to_leave_the_room: 'Tem certeza de que deseja sair da sala {{room}}?',
 	Authenticating: 'Autenticando',
+	Automatic: 'Automático',
 	Avatar_changed_successfully: 'Avatar alterado com sucesso!',
 	Avatar_Url: 'Avatar URL',
 	Away: 'Ausente',
 	Back: 'Voltar',
+	Black: 'Preto',
 	Block_user: 'Bloquear usuário',
 	Broadcast_channel_Description: 'Somente usuários autorizados podem escrever novas mensagens, mas os outros usuários poderão responder',
 	Broadcast_Channel: 'Canal de Transmissão',
@@ -147,6 +150,8 @@ export default {
 	Created_snippet: 'Criou um snippet',
 	Create_a_new_workspace: 'Criar nova área de trabalho',
 	Create: 'Criar',
+	Dark: 'Escuro',
+	Dark_level: 'Nível escuro',
 	Delete_Room_Warning: 'A exclusão de uma sala irá apagar todas as mensagens postadas na sala. Isso não pode ser desfeito.',
 	delete: 'excluir',
 	Delete: 'Excluir',
@@ -200,6 +205,7 @@ export default {
 	leaving_room: 'saindo do canal',
 	leave: 'sair',
 	Legal: 'Legal',
+	Light: 'Claro',
 	Livechat: 'Livechat',
 	Login: 'Entrar',
 	Login_error: 'Suas credenciais foram rejeitadas. Tente novamente por favor!',
@@ -337,6 +343,7 @@ export default {
 	Take_a_photo: 'Tirar uma foto',
 	Take_a_video: 'Gravar um vídeo',
 	Terms_of_Service: ' Termos de Serviço ',
+	Theme: 'Tema',
 	The_URL_is_invalid: 'A URL fornecida é inválida ou incapaz de estabelecer uma conexão segura.\n{{contact}}',
 	There_was_an_error_while_action: 'Aconteceu um erro {{action}}!',
 	This_room_is_blocked: 'Este quarto está bloqueado',

app/index.js

@@ -3,11 +3,19 @@ import { View, Linking, BackHandler } from 'react-native';
 import { createAppContainer, createSwitchNavigator } from 'react-navigation';
 import { createStackNavigator } from 'react-navigation-stack';
 import { createDrawerNavigator } from 'react-navigation-drawer';
+import { AppearanceProvider } from 'react-native-appearance';
 import { Provider } from 'react-redux';
 import PropTypes from 'prop-types';
+import RNUserDefaults from 'rn-user-defaults';
 import Modal from 'react-native-modal';
 import KeyCommands, { KeyCommandsEmitter } from 'react-native-keycommands';
 
+import {
+	defaultTheme,
+	newThemeState,
+	subscribeTheme,
+	unsubscribeTheme
+} from './utils/theme';
 import EventEmitter from './utils/events';
 import { appInit } from './actions';
 import { deepLinkingOpen } from './actions/deepLinking';
@@ -17,13 +25,14 @@ import parseQuery from './lib/methods/helpers/parseQuery';
 import { initializePushNotifications, onNotification } from './notifications/push';
 import store from './lib/createStore';
 import NotificationBadge from './notifications/inApp';
-import { defaultHeader, onNavigationStateChange } from './utils/navigation';
+import { defaultHeader, onNavigationStateChange, cardStyle } from './utils/navigation';
 import { loggerConfig, analytics } from './utils/log';
 import Toast from './containers/Toast';
-import RocketChat from './lib/rocketchat';
+import { ThemeContext } from './theme';
+import RocketChat, { THEME_PREFERENCES_KEY } from './lib/rocketchat';
 import { MIN_WIDTH_SPLIT_LAYOUT } from './constants/tablet';
 import {
-	isTablet, isSplited, isIOS, setWidth
+	isTablet, isSplited, isIOS, setWidth, supportSystemTheme
 } from './utils/deviceInfo';
 import { KEY_COMMAND } from './commands';
 import Tablet, { initTabletNav } from './tablet';
@@ -74,7 +83,8 @@ const OutsideStack = createStackNavigator({
 		getScreen: () => require('./views/LegalView').default
 	}
 }, {
-	defaultNavigationOptions: defaultHeader
+	defaultNavigationOptions: defaultHeader,
+	cardStyle
 });
 
 const AuthenticationWebViewStack = createStackNavigator({
@@ -82,7 +92,8 @@ const AuthenticationWebViewStack = createStackNavigator({
 		getScreen: () => require('./views/AuthenticationWebView').default
 	}
 }, {
-	defaultNavigationOptions: defaultHeader
+	defaultNavigationOptions: defaultHeader,
+	cardStyle
 });
 
 const OutsideStackModal = createStackNavigator({
@@ -91,7 +102,8 @@ const OutsideStackModal = createStackNavigator({
 },
 {
 	mode: 'modal',
-	headerMode: 'none'
+	headerMode: 'none',
+	cardStyle
 });
 
 const RoomRoutes = {
@@ -146,14 +158,16 @@ const ChatsStack = createStackNavigator({
 	},
 	...RoomRoutes
 }, {
-	defaultNavigationOptions: defaultHeader
+	defaultNavigationOptions: defaultHeader,
+	cardStyle
 });
 
 // Inside
 const RoomStack = createStackNavigator({
 	...RoomRoutes
 }, {
-	defaultNavigationOptions: defaultHeader
+	defaultNavigationOptions: defaultHeader,
+	cardStyle
 });
 
 ChatsStack.navigationOptions = ({ navigation }) => {
@@ -171,7 +185,8 @@ const ProfileStack = createStackNavigator({
 		getScreen: () => require('./views/ProfileView').default
 	}
 }, {
-	defaultNavigationOptions: defaultHeader
+	defaultNavigationOptions: defaultHeader,
+	cardStyle
 });
 
 ProfileStack.navigationOptions = ({ navigation }) => {
@@ -190,9 +205,13 @@ const SettingsStack = createStackNavigator({
 	},
 	LanguageView: {
 		getScreen: () => require('./views/LanguageView').default
+	},
+	ThemeView: {
+		getScreen: () => require('./views/ThemeView').default
 	}
 }, {
-	defaultNavigationOptions: defaultHeader
+	defaultNavigationOptions: defaultHeader,
+	cardStyle
 });
 
 const AdminPanelStack = createStackNavigator({
@@ -200,7 +219,8 @@ const AdminPanelStack = createStackNavigator({
 		getScreen: () => require('./views/AdminPanelView').default
 	}
 }, {
-	defaultNavigationOptions: defaultHeader
+	defaultNavigationOptions: defaultHeader,
+	cardStyle
 });
 
 SettingsStack.navigationOptions = ({ navigation }) => {
@@ -234,7 +254,8 @@ const NewMessageStack = createStackNavigator({
 		getScreen: () => require('./views/CreateChannelView').default
 	}
 }, {
-	defaultNavigationOptions: defaultHeader
+	defaultNavigationOptions: defaultHeader,
+	cardStyle
 });
 
 const InsideStackModal = createStackNavigator({
@@ -246,13 +267,17 @@ const InsideStackModal = createStackNavigator({
 },
 {
 	mode: 'modal',
-	headerMode: 'none'
+	headerMode: 'none',
+	cardStyle
 });
 
 const SetUsernameStack = createStackNavigator({
 	SetUsernameView: {
 		getScreen: () => require('./views/SetUsernameView').default
 	}
+},
+{
+	cardStyle
 });
 
 class CustomInsideStack extends React.Component {
@@ -305,7 +330,8 @@ const MessagesStack = createStackNavigator({
 		getScreen: () => require('./views/CreateChannelView').default
 	}
 }, {
-	defaultNavigationOptions: defaultHeader
+	defaultNavigationOptions: defaultHeader,
+	cardStyle
 });
 
 const DirectoryStack = createStackNavigator({
@@ -313,7 +339,8 @@ const DirectoryStack = createStackNavigator({
 		getScreen: () => require('./views/DirectoryView').default
 	}
 }, {
-	defaultNavigationOptions: defaultHeader
+	defaultNavigationOptions: defaultHeader,
+	cardStyle
 });
 
 const SidebarStack = createStackNavigator({
@@ -327,7 +354,8 @@ const SidebarStack = createStackNavigator({
 		getScreen: () => require('./views/AdminPanelView').default
 	}
 }, {
-	defaultNavigationOptions: defaultHeader
+	defaultNavigationOptions: defaultHeader,
+	cardStyle
 });
 
 const RoomActionsStack = createStackNavigator({
@@ -362,7 +390,8 @@ const RoomActionsStack = createStackNavigator({
 		getScreen: () => require('./views/NotificationPreferencesView').default
 	}
 }, {
-	defaultNavigationOptions: defaultHeader
+	defaultNavigationOptions: defaultHeader,
+	cardStyle
 });
 
 
@@ -431,12 +460,13 @@ class CustomNotificationStack extends React.Component {
 	static router = InsideStackModal.router;
 
 	static propTypes = {
-		navigation: PropTypes.object
+		navigation: PropTypes.object,
+		screenProps: PropTypes.object
 	}
 
 	render() {
-		const { navigation } = this.props;
-		return <NotificationBadge navigation={navigation} />;
+		const { navigation, screenProps } = this.props;
+		return <NotificationBadge navigation={navigation} screenProps={screenProps} />;
 	}
 }
 
@@ -468,7 +498,12 @@ export default class Root extends React.Component {
 		this.state = {
 			split: false,
 			inside: false,
-			showModal: false
+			showModal: false,
+			theme: defaultTheme(),
+			themePreferences: {
+				currentTheme: supportSystemTheme() ? 'automatic' : 'light',
+				darkLevel: 'dark'
+			}
 		};
 		if (isTablet) {
 			this.initTablet();
@@ -500,12 +535,19 @@ export default class Root extends React.Component {
 
 	componentWillUnmount() {
 		clearTimeout(this.listenerTimeout);
+
+		unsubscribeTheme();
+
 		if (this.onKeyCommands && this.onKeyCommands.remove) {
 			this.onKeyCommands.remove();
 		}
 	}
 
 	init = async() => {
+		if (isIOS) {
+			await RNUserDefaults.setName('group.ios.chat.rocket');
+		}
+		RNUserDefaults.objectForKey(THEME_PREFERENCES_KEY).then(this.setTheme);
 		const [notification, deepLinking] = await Promise.all([initializePushNotifications(), Linking.getInitialURL()]);
 		const parsedDeepLinkingURL = parseDeepLinking(deepLinking);
 		if (notification) {
@@ -517,6 +559,15 @@ export default class Root extends React.Component {
 		}
 	}
 
+	setTheme = (newTheme = {}) => {
+		// change theme state
+		this.setState(prevState => newThemeState(prevState, newTheme), () => {
+			const { themePreferences } = this.state;
+			// subscribe to Appearance changes
+			subscribeTheme(themePreferences, this.setTheme);
+		});
+	}
+
 	initTablet = async() => {
 		initTabletNav(args => this.setState(args));
 		await KeyCommands.setKeyCommands([]);
@@ -547,14 +598,14 @@ export default class Root extends React.Component {
 	closeModal = () => this.setState({ showModal: false });
 
 	render() {
-		const { split } = this.state;
+		const { split, themePreferences, theme } = this.state;
 
 		let content = (
 			<App
 				ref={(navigatorRef) => {
 					Navigation.setTopLevelNavigator(navigatorRef);
 				}}
-				screenProps={{ split }}
+				screenProps={{ split, theme }}
 				onNavigationStateChange={onNavigationStateChange}
 			/>
 		);
@@ -564,6 +615,7 @@ export default class Root extends React.Component {
 			content = (
 				<SplitContext.Provider value={{ split }}>
 					<Tablet
+						theme={theme}
 						tablet={split}
 						inside={inside}
 						showModal={showModal}
@@ -576,9 +628,19 @@ export default class Root extends React.Component {
 			);
 		}
 		return (
-			<Provider store={store}>
-				{content}
-			</Provider>
+			<AppearanceProvider>
+				<Provider store={store}>
+					<ThemeContext.Provider
+						value={{
+							theme,
+							themePreferences,
+							setTheme: this.setTheme
+						}}
+					>
+						{content}
+					</ThemeContext.Provider>
+				</Provider>
+			</AppearanceProvider>
 		);
 	}
 }

app/lib/rocketchat.js

@@ -51,6 +51,7 @@ import I18n from '../i18n';
 const TOKEN_KEY = 'reactnativemeteor_usertoken';
 const SORT_PREFS_KEY = 'RC_SORT_PREFS_KEY';
 export const MARKDOWN_KEY = 'RC_MARKDOWN_KEY';
+export const THEME_PREFERENCES_KEY = 'RC_THEME_PREFERENCES_KEY';
 export const CRASH_REPORT_KEY = 'RC_CRASH_REPORT_KEY';
 const returnAnArray = obj => obj || [];
 const MIN_ROCKETCHAT_VERSION = '0.70.0';

app/notifications/inApp/index.js

@@ -10,11 +10,12 @@ import Touchable from 'react-native-platform-touchable';
 
 import { isNotch, isIOS, isTablet } from '../../utils/deviceInfo';
 import { CustomIcon } from '../../lib/Icons';
-import { COLOR_BACKGROUND_NOTIFICATION, COLOR_SEPARATOR, COLOR_TEXT } from '../../constants/colors';
+import { themes } from '../../constants/colors';
 import Avatar from '../../containers/Avatar';
 import { removeNotification as removeNotificationAction } from '../../actions/notification';
 import sharedStyles from '../../views/Styles';
 import { ROW_HEIGHT } from '../../presentation/RoomItem';
+import { withTheme } from '../../theme';
 
 const AVATAR_SIZE = 48;
 const ANIMATION_DURATION = 300;
@@ -38,10 +39,8 @@ const styles = StyleSheet.create({
 		justifyContent: 'space-between',
 		position: 'absolute',
 		zIndex: 2,
-		backgroundColor: COLOR_BACKGROUND_NOTIFICATION,
 		width: '100%',
-		borderBottomWidth: StyleSheet.hairlineWidth,
-		borderColor: COLOR_SEPARATOR
+		borderBottomWidth: StyleSheet.hairlineWidth
 	},
 	content: {
 		flex: 1,
@@ -57,17 +56,14 @@ const styles = StyleSheet.create({
 	roomName: {
 		fontSize: 17,
 		lineHeight: 20,
-		...sharedStyles.textColorNormal,
 		...sharedStyles.textMedium
 	},
 	message: {
 		fontSize: 14,
 		lineHeight: 17,
-		...sharedStyles.textRegular,
-		...sharedStyles.textColorNormal
+		...sharedStyles.textRegular
 	},
 	close: {
-		color: COLOR_TEXT,
 		marginLeft: 10
 	}
 });
@@ -80,7 +76,8 @@ class NotificationBadge extends React.Component {
 		userId: PropTypes.string,
 		notification: PropTypes.object,
 		window: PropTypes.object,
-		removeNotification: PropTypes.func
+		removeNotification: PropTypes.func,
+		theme: PropTypes.string
 	}
 
 	constructor(props) {
@@ -91,8 +88,11 @@ class NotificationBadge extends React.Component {
 	shouldComponentUpdate(nextProps) {
 		const { notification: nextNotification } = nextProps;
 		const {
-			notification: { payload }, window
+			notification: { payload }, window, theme
 		} = this.props;
+		if (nextProps.theme !== theme) {
+			return true;
+		}
 		if (!equal(nextNotification.payload, payload)) {
 			return true;
 		}
@@ -173,7 +173,7 @@ class NotificationBadge extends React.Component {
 
 	render() {
 		const {
-			baseUrl, token, userId, notification, window
+			baseUrl, token, userId, notification, window, theme
 		} = this.props;
 		const { message, payload } = notification;
 		const { type } = payload;
@@ -194,7 +194,16 @@ class NotificationBadge extends React.Component {
 			outputRange: [-top - ROW_HEIGHT, top]
 		});
 		return (
-			<Animated.View style={[styles.container, { transform: [{ translateY }] }]}>
+			<Animated.View
+				style={[
+					styles.container,
+					{
+						transform: [{ translateY }],
+						backgroundColor: themes[theme].focusedBackground,
+						borderColor: themes[theme].separatorColor
+					}
+				]}
+			>
 				<Touchable
 					style={styles.content}
 					onPress={this.goToRoom}
@@ -204,13 +213,13 @@ class NotificationBadge extends React.Component {
 					<>
 						<Avatar text={name} size={AVATAR_SIZE} type={type} baseUrl={baseUrl} style={styles.avatar} userId={userId} token={token} />
 						<View style={styles.inner}>
-							<Text style={styles.roomName} numberOfLines={1}>{name}</Text>
-							<Text style={styles.message} numberOfLines={1}>{message}</Text>
+							<Text style={[styles.roomName, { color: themes[theme].titleText }]} numberOfLines={1}>{name}</Text>
+							<Text style={[styles.message, { color: themes[theme].titleText }]} numberOfLines={1}>{message}</Text>
 						</View>
 					</>
 				</Touchable>
 				<TouchableOpacity onPress={this.hide}>
-					<CustomIcon name='circle-cross' style={styles.close} size={20} />
+					<CustomIcon name='circle-cross' style={[styles.close, { color: themes[theme].titleText }]} size={20} />
 				</TouchableOpacity>
 			</Animated.View>
 		);
@@ -228,4 +237,4 @@ const mapDispatchToProps = dispatch => ({
 	removeNotification: () => dispatch(removeNotificationAction())
 });
 
-export default responsive(connect(mapStateToProps, mapDispatchToProps)(NotificationBadge));
+export default responsive(connect(mapStateToProps, mapDispatchToProps)(withTheme(NotificationBadge)));

app/presentation/DirectoryItem/index.js

@@ -2,25 +2,31 @@ import React from 'react';
 import { Text, View } from 'react-native';
 import PropTypes from 'prop-types';
 
-import Avatar from '../../containers/Avatar';
 import Touch from '../../utils/touch';
+import Avatar from '../../containers/Avatar';
 import RoomTypeIcon from '../../containers/RoomTypeIcon';
 import styles, { ROW_HEIGHT } from './styles';
+import { themes } from '../../constants/colors';
 
 export { ROW_HEIGHT };
 
-const DirectoryItemLabel = React.memo(({ text }) => {
+const DirectoryItemLabel = React.memo(({ text, theme }) => {
 	if (!text) {
 		return null;
 	}
-	return <Text style={styles.directoryItemLabel}>{text}</Text>;
+	return <Text style={[styles.directoryItemLabel, { color: themes[theme].auxiliaryText }]}>{text}</Text>;
 });
 
 const DirectoryItem = ({
-	title, description, avatar, onPress, testID, style, baseUrl, user, rightLabel, type
+	title, description, avatar, onPress, testID, style, baseUrl, user, rightLabel, type, theme
 }) => (
-	<Touch onPress={onPress} style={styles.directoryItemButton} testID={testID}>
-		<View style={[styles.directoryItemContainer, style]}>
+	<Touch
+		onPress={onPress}
+		style={{ backgroundColor: themes[theme].backgroundColor }}
+		testID={testID}
+		theme={theme}
+	>
+		<View style={[styles.directoryItemContainer, styles.directoryItemButton, style]}>
 			<Avatar
 				text={avatar}
 				size={30}
@@ -32,12 +38,12 @@ const DirectoryItem = ({
 			/>
 			<View style={styles.directoryItemTextContainer}>
 				<View style={styles.directoryItemTextTitle}>
-					<RoomTypeIcon type={type} />
-					<Text style={styles.directoryItemName} numberOfLines={1}>{title}</Text>
+					<RoomTypeIcon type={type} theme={theme} />
+					<Text style={[styles.directoryItemName, { color: themes[theme].titleText }]} numberOfLines={1}>{title}</Text>
 				</View>
-				{ description ? <Text style={styles.directoryItemUsername} numberOfLines={1}>{description}</Text> : null }
+				{ description ? <Text style={[styles.directoryItemUsername, { color: themes[theme].auxiliaryText }]} numberOfLines={1}>{description}</Text> : null }
 			</View>
-			<DirectoryItemLabel text={rightLabel} />
+			<DirectoryItemLabel text={rightLabel} theme={theme} />
 		</View>
 	</Touch>
 );
@@ -55,11 +61,13 @@ DirectoryItem.propTypes = {
 	onPress: PropTypes.func.isRequired,
 	testID: PropTypes.string.isRequired,
 	style: PropTypes.any,
-	rightLabel: PropTypes.string
+	rightLabel: PropTypes.string,
+	theme: PropTypes.string
 };
 
 DirectoryItemLabel.propTypes = {
-	text: PropTypes.string
+	text: PropTypes.string,
+	theme: PropTypes.string
 };
 
 export default DirectoryItem;

app/presentation/DirectoryItem/styles.js

@@ -1,14 +1,12 @@
 import { StyleSheet } from 'react-native';
 
-import { COLOR_WHITE } from '../../constants/colors';
 import sharedStyles from '../../views/Styles';
 
 export const ROW_HEIGHT = 54;
 
 export default StyleSheet.create({
 	directoryItemButton: {
-		height: ROW_HEIGHT,
-		backgroundColor: COLOR_WHITE
+		height: ROW_HEIGHT
 	},
 	directoryItemContainer: {
 		flex: 1,
@@ -32,18 +30,15 @@ export default StyleSheet.create({
 	directoryItemName: {
 		flex: 1,
 		fontSize: 17,
-		...sharedStyles.textMedium,
-		...sharedStyles.textColorNormal
+		...sharedStyles.textMedium
 	},
 	directoryItemUsername: {
 		fontSize: 14,
-		...sharedStyles.textRegular,
-		...sharedStyles.textColorDescription
+		...sharedStyles.textRegular
 	},
 	directoryItemLabel: {
 		fontSize: 14,
 		paddingLeft: 10,
-		...sharedStyles.textRegular,
-		...sharedStyles.textColorDescription
+		...sharedStyles.textRegular
 	}
 });

app/presentation/RoomItem/Actions.js

@@ -6,9 +6,10 @@ import PropTypes from 'prop-types';
 import I18n from '../../i18n';
 import styles, { ACTION_WIDTH, LONG_SWIPE } from './styles';
 import { CustomIcon } from '../../lib/Icons';
+import { themes } from '../../constants/colors';
 
 export const LeftActions = React.memo(({
-	transX, isRead, width, onToggleReadPress
+	theme, transX, isRead, width, onToggleReadPress
 }) => {
 	const translateX = transX.interpolate({
 		inputRange: [0, ACTION_WIDTH],
@@ -30,7 +31,8 @@ export const LeftActions = React.memo(({
 					{
 						right: width - ACTION_WIDTH,
 						width,
-						transform: [{ translateX }]
+						transform: [{ translateX }],
+						backgroundColor: themes[theme].tintColor
 					}
 				]}
 			>
@@ -46,7 +48,7 @@ export const LeftActions = React.memo(({
 					<RectButton style={styles.actionButton} onPress={onToggleReadPress}>
 						<>
 							<CustomIcon size={20} name={isRead ? 'flag' : 'check'} color='white' />
-							<Text style={styles.actionText}>{I18n.t(isRead ? 'Unread' : 'Read')}</Text>
+							<Text style={[styles.actionText, { color: themes[theme].buttonText }]}>{I18n.t(isRead ? 'Unread' : 'Read')}</Text>
 						</>
 					</RectButton>
 				</Animated.View>
@@ -56,7 +58,7 @@ export const LeftActions = React.memo(({
 });
 
 export const RightActions = React.memo(({
-	transX, favorite, width, toggleFav, onHidePress
+	transX, favorite, width, toggleFav, onHidePress, theme
 }) => {
 	const translateXFav = transX.interpolate({
 		inputRange: [-width / 2, -ACTION_WIDTH * 2, 0],
@@ -82,14 +84,15 @@ export const RightActions = React.memo(({
 					styles.actionRightButtonContainer,
 					{
 						width,
-						transform: [{ translateX: translateXFav }]
+						transform: [{ translateX: translateXFav }],
+						backgroundColor: themes[theme].hideBackground
 					}
 				]}
 			>
-				<RectButton style={[styles.actionButton, { backgroundColor: '#ffbb00' }]} onPress={toggleFav}>
+				<RectButton style={[styles.actionButton, { backgroundColor: themes[theme].favoriteBackground }]} onPress={toggleFav}>
 					<>
-						<CustomIcon size={20} name={favorite ? 'Star-filled' : 'star'} color='white' />
-						<Text style={styles.actionText}>{I18n.t(favorite ? 'Unfavorite' : 'Favorite')}</Text>
+						<CustomIcon size={20} name={favorite ? 'Star-filled' : 'star'} color={themes[theme].buttonText} />
+						<Text style={[styles.actionText, { color: themes[theme].buttonText }]}>{I18n.t(favorite ? 'Unfavorite' : 'Favorite')}</Text>
 					</>
 				</RectButton>
 			</Animated.View>
@@ -102,10 +105,10 @@ export const RightActions = React.memo(({
 					}
 				]}
 			>
-				<RectButton style={[styles.actionButton, { backgroundColor: '#54585e' }]} onPress={onHidePress}>
+				<RectButton style={[styles.actionButton, { backgroundColor: themes[theme].hideBackground }]} onPress={onHidePress}>
 					<>
-						<CustomIcon size={20} name='eye-off' color='white' />
-						<Text style={styles.actionText}>{I18n.t('Hide')}</Text>
+						<CustomIcon size={20} name='eye-off' color={themes[theme].buttonText} />
+						<Text style={[styles.actionText, { color: themes[theme].buttonText }]}>{I18n.t('Hide')}</Text>
 					</>
 				</RectButton>
 			</Animated.View>
@@ -114,6 +117,7 @@ export const RightActions = React.memo(({
 });
 
 LeftActions.propTypes = {
+	theme: PropTypes.string,
 	transX: PropTypes.object,
 	isRead: PropTypes.bool,
 	width: PropTypes.number,
@@ -121,6 +125,7 @@ LeftActions.propTypes = {
 };
 
 RightActions.propTypes = {
+	theme: PropTypes.string,
 	transX: PropTypes.object,
 	favorite: PropTypes.bool,
 	width: PropTypes.number,

app/presentation/RoomItem/LastMessage.js

@@ -6,6 +6,7 @@ import _ from 'lodash';
 import I18n from '../../i18n';
 import styles from './styles';
 import Markdown from '../../containers/markdown';
+import { themes } from '../../constants/colors';
 
 const formatMsg = ({
 	lastMessage, type, showLastMessage, username
@@ -45,20 +46,22 @@ const formatMsg = ({
 const arePropsEqual = (oldProps, newProps) => _.isEqual(oldProps, newProps);
 
 const LastMessage = React.memo(({
-	lastMessage, type, showLastMessage, username, alert
+	lastMessage, type, showLastMessage, username, alert, theme
 }) => (
 	<Markdown
 		msg={formatMsg({
 			lastMessage, type, showLastMessage, username
 		})}
-		style={[styles.markdownText, alert && styles.markdownTextAlert]}
+		style={[styles.markdownText, { color: alert ? themes[theme].bodyText : themes[theme].auxiliaryText }]}
 		customEmojis={false}
 		numberOfLines={2}
 		preview
+		theme={theme}
 	/>
 ), arePropsEqual);
 
 LastMessage.propTypes = {
+	theme: PropTypes.string,
 	lastMessage: PropTypes.object,
 	type: PropTypes.string,
 	showLastMessage: PropTypes.bool,

app/presentation/RoomItem/Touchable.js

@@ -1,16 +1,15 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Animated } from 'react-native';
+import { PanGestureHandler, State } from 'react-native-gesture-handler';
+
+import Touch from '../../utils/touch';
 import {
-	RectButton,
-	PanGestureHandler,
-	State
-} from 'react-native-gesture-handler';
-import styles, {
 	ACTION_WIDTH,
 	SMALL_SWIPE,
 	LONG_SWIPE
 } from './styles';
+import { themes } from '../../constants/colors';
 import { LeftActions, RightActions } from './Actions';
 
 class Touchable extends React.Component {
@@ -25,7 +24,8 @@ class Touchable extends React.Component {
 		toggleFav: PropTypes.func,
 		toggleRead: PropTypes.func,
 		hideChannel: PropTypes.func,
-		children: PropTypes.element
+		children: PropTypes.element,
+		theme: PropTypes.string
 	}
 
 	constructor(props) {
@@ -167,7 +167,7 @@ class Touchable extends React.Component {
 
 		render() {
 			const {
-				testID, isRead, width, favorite, children
+				testID, isRead, width, favorite, children, theme
 			} = this.props;
 
 			return (
@@ -183,6 +183,7 @@ class Touchable extends React.Component {
 							isRead={isRead}
 							width={width}
 							onToggleReadPress={this.onToggleReadPress}
+							theme={theme}
 						/>
 						<RightActions
 							transX={this.transX}
@@ -190,21 +191,23 @@ class Touchable extends React.Component {
 							width={width}
 							toggleFav={this.toggleFav}
 							onHidePress={this.onHidePress}
+							theme={theme}
 						/>
 						<Animated.View
 							style={{
 								transform: [{ translateX: this.transX }]
 							}}
 						>
-							<RectButton
+							<Touch
 								onPress={this.onPress}
-								activeOpacity={0.8}
-								underlayColor='#e1e5e8'
+								theme={theme}
 								testID={testID}
-								style={styles.button}
+								style={{
+									backgroundColor: themes[theme].backgroundColor
+								}}
 							>
 								{children}
-							</RectButton>
+							</Touch>
 						</Animated.View>
 					</Animated.View>
 

app/presentation/RoomItem/TypeIcon.js

@@ -5,14 +5,17 @@ import Status from '../../containers/Status/Status';
 import RoomTypeIcon from '../../containers/RoomTypeIcon';
 import styles from './styles';
 
-const TypeIcon = React.memo(({ type, prid, status }) => {
+const TypeIcon = React.memo(({
+	theme, type, prid, status
+}) => {
 	if (type === 'd') {
 		return <Status style={styles.status} size={10} status={status} />;
 	}
-	return <RoomTypeIcon type={prid ? 'discussion' : type} />;
+	return <RoomTypeIcon theme={theme} type={prid ? 'discussion' : type} />;
 });
 
 TypeIcon.propTypes = {
+	theme: PropTypes.string,
 	type: PropTypes.string,
 	status: PropTypes.string,
 	prid: PropTypes.string

app/presentation/RoomItem/UnreadBadge.js

@@ -3,8 +3,11 @@ import PropTypes from 'prop-types';
 import { View, Text } from 'react-native';
 
 import styles from './styles';
+import { themes } from '../../constants/colors';
 
-const UnreadBadge = React.memo(({ unread, userMentions, type }) => {
+const UnreadBadge = React.memo(({
+	theme, unread, userMentions, type
+}) => {
 	if (!unread || unread <= 0) {
 		return;
 	}
@@ -14,13 +17,25 @@ const UnreadBadge = React.memo(({ unread, userMentions, type }) => {
 	const mentioned = userMentions > 0 && type !== 'd';
 
 	return (
-		<View style={[styles.unreadNumberContainer, mentioned && styles.unreadMentionedContainer]}>
-			<Text style={[styles.unreadText, mentioned && styles.unreadMentionedText]}>{ unread }</Text>
+		<View
+			style={[
+				styles.unreadNumberContainer,
+				{ backgroundColor: mentioned ? themes[theme].tintColor : themes[theme].borderColor }
+			]}
+		>
+			<Text
+				style={[
+					styles.unreadText,
+					{ color: mentioned ? themes[theme].buttonText : themes[theme].bodyText }
+				]}
+			>{ unread }
+			</Text>
 		</View>
 	);
 });
 
 UnreadBadge.propTypes = {
+	theme: PropTypes.string,
 	unread: PropTypes.number,
 	userMentions: PropTypes.number,
 	type: PropTypes.string

app/presentation/RoomItem/index.js

@@ -11,6 +11,7 @@ import TypeIcon from './TypeIcon';
 import LastMessage from './LastMessage';
 import { capitalize, formatDate } from '../../utils/room';
 import Touchable from './Touchable';
+import { themes } from '../../constants/colors';
 
 export { ROW_HEIGHT };
 
@@ -24,7 +25,8 @@ const attrs = [
 	'width',
 	'isRead',
 	'favorite',
-	'status'
+	'status',
+	'theme'
 ];
 
 const arePropsEqual = (oldProps, newProps) => {
@@ -37,7 +39,7 @@ const arePropsEqual = (oldProps, newProps) => {
 };
 
 const RoomItem = React.memo(({
-	onPress, width, favorite, toggleFav, isRead, rid, toggleRead, hideChannel, testID, unread, userMentions, name, _updatedAt, alert, type, avatarSize, baseUrl, userId, username, token, id, prid, showLastMessage, hideUnreadStatus, lastMessage, status, avatar
+	onPress, width, favorite, toggleFav, isRead, rid, toggleRead, hideChannel, testID, unread, userMentions, name, _updatedAt, alert, type, avatarSize, baseUrl, userId, username, token, id, prid, showLastMessage, hideUnreadStatus, lastMessage, status, avatar, theme
 }) => {
 	const date = formatDate(_updatedAt);
 
@@ -68,6 +70,7 @@ const RoomItem = React.memo(({
 			hideChannel={hideChannel}
 			testID={testID}
 			type={type}
+			theme={theme}
 		>
 			<View
 				style={styles.container}
@@ -82,18 +85,27 @@ const RoomItem = React.memo(({
 					userId={userId}
 					token={token}
 				/>
-				<View style={styles.centerContainer}>
+				<View
+					style={[
+						styles.centerContainer,
+						{
+							borderColor: themes[theme].separatorColor
+						}
+					]}
+				>
 					<View style={styles.titleContainer}>
 						<TypeIcon
 							type={type}
 							id={id}
 							prid={prid}
 							status={status}
+							theme={theme}
 						/>
 						<Text
 							style={[
 								styles.title,
-								alert && !hideUnreadStatus && styles.alert
+								alert && !hideUnreadStatus && styles.alert,
+								{ color: themes[theme].titleText }
 							]}
 							ellipsizeMode='tail'
 							numberOfLines={1}
@@ -104,7 +116,19 @@ const RoomItem = React.memo(({
 							<Text
 								style={[
 									styles.date,
-									alert && !hideUnreadStatus && styles.updateAlert
+									{
+										color:
+											themes[theme]
+												.auxiliaryText
+									},
+									alert && !hideUnreadStatus && [
+										styles.updateAlert,
+										{
+											color:
+												themes[theme]
+													.tintColor
+										}
+									]
 								]}
 								ellipsizeMode='tail'
 								numberOfLines={1}
@@ -120,11 +144,13 @@ const RoomItem = React.memo(({
 							showLastMessage={showLastMessage}
 							username={username}
 							alert={alert && !hideUnreadStatus}
+							theme={theme}
 						/>
 						<UnreadBadge
 							unread={unread}
 							userMentions={userMentions}
 							type={type}
+							theme={theme}
 						/>
 					</View>
 				</View>
@@ -160,7 +186,8 @@ RoomItem.propTypes = {
 	toggleRead: PropTypes.func,
 	hideChannel: PropTypes.func,
 	avatar: PropTypes.bool,
-	hideUnreadStatus: PropTypes.bool
+	hideUnreadStatus: PropTypes.bool,
+	theme: PropTypes.string
 };
 
 RoomItem.defaultProps = {
@@ -169,7 +196,10 @@ RoomItem.defaultProps = {
 };
 
 const mapStateToProps = (state, ownProps) => ({
-	status: state.meteor.connected && ownProps.type === 'd' ? state.activeUsers[ownProps.id] : 'offline'
+	status:
+		state.meteor.connected && ownProps.type === 'd'
+			? state.activeUsers[ownProps.id]
+			: 'offline'
 });
 
 export default connect(mapStateToProps)(RoomItem);

app/presentation/RoomItem/styles.js

@@ -1,9 +1,6 @@
 import { StyleSheet, PixelRatio } from 'react-native';
 
 import sharedStyles from '../../views/Styles';
-import {
-	COLOR_SEPARATOR, COLOR_PRIMARY, COLOR_WHITE, COLOR_UNREAD, COLOR_TEXT
-} from '../../constants/colors';
 
 export const ROW_HEIGHT = 75 * PixelRatio.getFontScale();
 export const ACTION_WIDTH = 80;
@@ -17,21 +14,16 @@ export default StyleSheet.create({
 		paddingLeft: 14,
 		height: ROW_HEIGHT
 	},
-	button: {
-		backgroundColor: COLOR_WHITE
-	},
 	centerContainer: {
 		flex: 1,
 		paddingVertical: 10,
 		paddingRight: 14,
-		borderBottomWidth: StyleSheet.hairlineWidth,
-		borderColor: COLOR_SEPARATOR
+		borderBottomWidth: StyleSheet.hairlineWidth
 	},
 	title: {
 		flex: 1,
 		fontSize: 17,
 		lineHeight: 20,
-		...sharedStyles.textColorNormal,
 		...sharedStyles.textMedium
 	},
 	alert: {
@@ -51,11 +43,9 @@ export default StyleSheet.create({
 	date: {
 		fontSize: 13,
 		marginLeft: 4,
-		...sharedStyles.textColorDescription,
 		...sharedStyles.textRegular
 	},
 	updateAlert: {
-		color: COLOR_PRIMARY,
 		...sharedStyles.textSemibold
 	},
 	unreadNumberContainer: {
@@ -64,25 +54,17 @@ export default StyleSheet.create({
 		paddingVertical: 3,
 		paddingHorizontal: 5,
 		borderRadius: 10.5,
-		backgroundColor: COLOR_UNREAD,
 		alignItems: 'center',
 		justifyContent: 'center',
 		marginLeft: 10
 	},
-	unreadMentionedContainer: {
-		backgroundColor: COLOR_PRIMARY
-	},
 	unreadText: {
-		color: COLOR_TEXT,
 		overflow: 'hidden',
 		fontSize: 13,
 		...sharedStyles.textMedium,
 		letterSpacing: 0.56,
 		textAlign: 'center'
 	},
-	unreadMentionedText: {
-		color: COLOR_WHITE
-	},
 	status: {
 		marginRight: 7,
 		marginTop: 3
@@ -91,11 +73,7 @@ export default StyleSheet.create({
 		flex: 1,
 		fontSize: 14,
 		lineHeight: 17,
-		...sharedStyles.textRegular,
-		...sharedStyles.textColorDescription
-	},
-	markdownTextAlert: {
-		...sharedStyles.textColorNormal
+		...sharedStyles.textRegular
 	},
 	avatar: {
 		marginRight: 10
@@ -110,20 +88,14 @@ export default StyleSheet.create({
 		height: ROW_HEIGHT
 	},
 	actionText: {
-		color: COLOR_WHITE,
 		fontSize: 15,
-		backgroundColor: 'transparent',
 		justifyContent: 'center',
 		marginTop: 4,
 		...sharedStyles.textSemibold
 	},
-	actionLeftContainer: {
-		backgroundColor: COLOR_PRIMARY
-	},
 	actionLeftButtonContainer: {
 		position: 'absolute',
 		height: ROW_HEIGHT,
-		backgroundColor: COLOR_PRIMARY,
 		justifyContent: 'center',
 		top: 0
 	},
@@ -131,8 +103,7 @@ export default StyleSheet.create({
 		position: 'absolute',
 		height: ROW_HEIGHT,
 		justifyContent: 'center',
-		top: 0,
-		backgroundColor: '#54585e'
+		top: 0
 	},
 	actionButton: {
 		width: ACTION_WIDTH,

app/presentation/ServerItem/index.js

@@ -2,17 +2,23 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { View, Text } from 'react-native';
 import FastImage from 'react-native-fast-image';
-import { RectButton } from 'react-native-gesture-handler';
 
+import Touch from '../../utils/touch';
 import Check from '../../containers/Check';
 import styles, { ROW_HEIGHT } from './styles';
+import { themes } from '../../constants/colors';
 
 export { ROW_HEIGHT };
 
 const ServerItem = React.memo(({
-	server, item, onPress, hasCheck
+	server, item, onPress, hasCheck, theme
 }) => (
-	<RectButton onPress={onPress} style={styles.serverItem} testID={`rooms-list-header-server-${ item.id }`}>
+	<Touch
+		onPress={onPress}
+		style={[styles.serverItem, { backgroundColor: themes[theme].backgroundColor }]}
+		testID={`rooms-list-header-server-${ item.id }`}
+		theme={theme}
+	>
 		<View style={styles.serverItemContainer}>
 			{item.iconURL
 				? (
@@ -34,19 +40,20 @@ const ServerItem = React.memo(({
 				)
 			}
 			<View style={styles.serverTextContainer}>
-				<Text style={styles.serverName}>{item.name || item.id}</Text>
-				<Text style={styles.serverUrl}>{item.id}</Text>
+				<Text style={[styles.serverName, { color: themes[theme].titleText }]}>{item.name || item.id}</Text>
+				<Text style={[styles.serverUrl, { color: themes[theme].auxiliaryText }]}>{item.id}</Text>
 			</View>
-			{item.id === server && hasCheck ? <Check /> : null}
+			{item.id === server && hasCheck ? <Check theme={theme} /> : null}
 		</View>
-	</RectButton>
+	</Touch>
 ));
 
 ServerItem.propTypes = {
 	onPress: PropTypes.func.isRequired,
 	item: PropTypes.object.isRequired,
 	hasCheck: PropTypes.bool,
-	server: PropTypes.string
+	server: PropTypes.string,
+	theme: PropTypes.string
 };
 
 export default ServerItem;

app/presentation/ServerItem/styles.js

@@ -1,14 +1,12 @@
 import { StyleSheet } from 'react-native';
 
 import sharedStyles from '../../views/Styles';
-import { COLOR_WHITE } from '../../constants/colors';
 
 export const ROW_HEIGHT = 56;
 
 export default StyleSheet.create({
 	serverItem: {
 		height: ROW_HEIGHT,
-		backgroundColor: COLOR_WHITE,
 		justifyContent: 'center'
 	},
 	serverItemContainer: {
@@ -28,12 +26,10 @@ export default StyleSheet.create({
 	},
 	serverName: {
 		fontSize: 18,
-		...sharedStyles.textColorNormal,
 		...sharedStyles.textSemibold
 	},
 	serverUrl: {
 		fontSize: 15,
-		...sharedStyles.textColorDescription,
 		...sharedStyles.textRegular
 	}
 });

app/presentation/TextInput.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { TextInput } from 'react-native';
+import PropTypes from 'prop-types';
+
+import { themes } from '../constants/colors';
+
+const ThemedTextInput = React.forwardRef(({ style, theme, ...props }, ref) => (
+	<TextInput
+		ref={ref}
+		style={[{ color: themes[theme].titleText }, style]}
+		placeholderTextColor={themes[theme].auxiliaryText}
+		keyboardAppearance={theme === 'light' ? 'light' : 'dark'}
+		{...props}
+	/>
+));
+
+ThemedTextInput.propTypes = {
+	style: PropTypes.object,
+	theme: PropTypes.string
+};
+
+export default ThemedTextInput;

app/presentation/UserItem.js

@@ -1,17 +1,17 @@
 import React from 'react';
 import { Text, View, StyleSheet } from 'react-native';
 import PropTypes from 'prop-types';
+import { LongPressGestureHandler, State } from 'react-native-gesture-handler';
 
 import Avatar from '../containers/Avatar';
-import Touch from '../utils/touch';
 import { CustomIcon } from '../lib/Icons';
 import sharedStyles from '../views/Styles';
-import { COLOR_PRIMARY, COLOR_WHITE } from '../constants/colors';
+import { themes } from '../constants/colors';
+import Touch from '../utils/touch';
 
 const styles = StyleSheet.create({
 	button: {
-		height: 54,
-		backgroundColor: COLOR_WHITE
+		height: 54
 	},
 	container: {
 		flexDirection: 'row'
@@ -27,35 +27,50 @@ const styles = StyleSheet.create({
 	},
 	name: {
 		fontSize: 17,
-		...sharedStyles.textMedium,
-		...sharedStyles.textColorNormal
+		...sharedStyles.textMedium
 	},
 	username: {
 		fontSize: 14,
-		...sharedStyles.textRegular,
-		...sharedStyles.textColorDescription
+		...sharedStyles.textRegular
 	},
 	icon: {
 		marginHorizontal: 15,
-		alignSelf: 'center',
-		color: COLOR_PRIMARY
+		alignSelf: 'center'
 	}
 });
 
 const UserItem = ({
-	name, username, onPress, testID, onLongPress, style, icon, baseUrl, user
-}) => (
-	<Touch onPress={onPress} onLongPress={onLongPress} style={styles.button} testID={testID}>
-		<View style={[styles.container, style]}>
-			<Avatar text={username} size={30} type='d' style={styles.avatar} baseUrl={baseUrl} userId={user.id} token={user.token} />
-			<View style={styles.textContainer}>
-				<Text style={styles.name}>{name}</Text>
-				<Text style={styles.username}>@{username}</Text>
-			</View>
-			{icon ? <CustomIcon name={icon} size={22} style={styles.icon} /> : null}
-		</View>
-	</Touch>
-);
+	name, username, onPress, testID, onLongPress, style, icon, baseUrl, user, theme
+}) => {
+	const longPress = ({ nativeEvent }) => {
+		if (nativeEvent.state === State.ACTIVE) {
+			onLongPress();
+		}
+	};
+
+	return (
+		<LongPressGestureHandler
+			onHandlerStateChange={longPress}
+			minDurationMs={800}
+		>
+			<Touch
+				onPress={onPress}
+				style={{ backgroundColor: themes[theme].backgroundColor }}
+				testID={testID}
+				theme={theme}
+			>
+				<View style={[styles.container, styles.button, style]}>
+					<Avatar text={username} size={30} type='d' style={styles.avatar} baseUrl={baseUrl} userId={user.id} token={user.token} />
+					<View style={styles.textContainer}>
+						<Text style={[styles.name, { color: themes[theme].titleText }]}>{name}</Text>
+						<Text style={[styles.username, { color: themes[theme].auxiliaryText }]}>@{username}</Text>
+					</View>
+					{icon ? <CustomIcon name={icon} size={22} style={[styles.icon, { color: themes[theme].actionTintColor }]} /> : null}
+				</View>
+			</Touch>
+		</LongPressGestureHandler>
+	);
+};
 
 UserItem.propTypes = {
 	name: PropTypes.string.isRequired,
@@ -69,7 +84,8 @@ UserItem.propTypes = {
 	testID: PropTypes.string.isRequired,
 	onLongPress: PropTypes.func,
 	style: PropTypes.any,
-	icon: PropTypes.string
+	icon: PropTypes.string,
+	theme: PropTypes.string
 };
 
 export default UserItem;

app/sagas/deepLinking.js

@@ -10,7 +10,6 @@ import database from '../lib/database';
 import RocketChat from '../lib/rocketchat';
 import EventEmitter from '../utils/events';
 import { appStart } from '../actions';
-import { isIOS } from '../utils/deviceInfo';
 
 const roomTypes = {
 	channel: 'c', direct: 'd', group: 'p'
@@ -33,10 +32,6 @@ const handleOpen = function* handleOpen({ params }) {
 		return;
 	}
 
-	if (isIOS) {
-		yield RNUserDefaults.setName('group.ios.chat.rocket');
-	}
-
 	let { host } = params;
 	if (!/^(http|https)/.test(host)) {
 		host = `https://${ params.host }`;

app/sagas/init.js

@@ -24,7 +24,6 @@ const restore = function* restore() {
 	try {
 		let hasMigration;
 		if (isIOS) {
-			yield RNUserDefaults.setName('group.ios.chat.rocket');
 			hasMigration = yield AsyncStorage.getItem('hasMigration');
 		}
 

app/share.js

@@ -1,16 +1,24 @@
 import React from 'react';
 import { View } from 'react-native';
 import { createAppContainer, createSwitchNavigator } from 'react-navigation';
+import { AppearanceProvider } from 'react-native-appearance';
 import { createStackNavigator } from 'react-navigation-stack';
 import { Provider } from 'react-redux';
 import RNUserDefaults from 'rn-user-defaults';
 
+import {
+	defaultTheme,
+	newThemeState,
+	subscribeTheme,
+	unsubscribeTheme
+} from './utils/theme';
 import Navigation from './lib/ShareNavigation';
 import store from './lib/createStore';
 import sharedStyles from './views/Styles';
-import { isNotch, isIOS } from './utils/deviceInfo';
-import { defaultHeader, onNavigationStateChange } from './utils/navigation';
-import RocketChat from './lib/rocketchat';
+import { isNotch, isIOS, supportSystemTheme } from './utils/deviceInfo';
+import { defaultHeader, onNavigationStateChange, cardStyle } from './utils/navigation';
+import RocketChat, { THEME_PREFERENCES_KEY } from './lib/rocketchat';
+import { ThemeContext } from './theme';
 
 const InsideNavigator = createStackNavigator({
 	ShareListView: {
@@ -24,7 +32,8 @@ const InsideNavigator = createStackNavigator({
 	}
 }, {
 	initialRouteName: 'ShareListView',
-	defaultNavigationOptions: defaultHeader
+	defaultNavigationOptions: defaultHeader,
+	cardStyle
 });
 
 const OutsideNavigator = createStackNavigator({
@@ -33,7 +42,8 @@ const OutsideNavigator = createStackNavigator({
 	}
 }, {
 	initialRouteName: 'WithoutServersView',
-	defaultNavigationOptions: defaultHeader
+	defaultNavigationOptions: defaultHeader,
+	cardStyle
 });
 
 const AppContainer = createAppContainer(createSwitchNavigator({
@@ -51,15 +61,25 @@ class Root extends React.Component {
 	constructor(props) {
 		super(props);
 		this.state = {
-			isLandscape: false
+			isLandscape: false,
+			theme: defaultTheme(),
+			themePreferences: {
+				currentTheme: supportSystemTheme() ? 'automatic' : 'light',
+				darkLevel: 'dark'
+			}
 		};
 		this.init();
 	}
 
+	componentWillUnmount() {
+		unsubscribeTheme();
+	}
+
 	init = async() => {
 		if (isIOS) {
 			await RNUserDefaults.setName('group.ios.chat.rocket');
 		}
+		RNUserDefaults.objectForKey(THEME_PREFERENCES_KEY).then(this.setTheme);
 		const currentServer = await RNUserDefaults.get('currentServer');
 		const token = await RNUserDefaults.get(RocketChat.TOKEN_KEY);
 
@@ -71,27 +91,41 @@ class Root extends React.Component {
 		}
 	}
 
+	setTheme = (newTheme = {}) => {
+		// change theme state
+		this.setState(prevState => newThemeState(prevState, newTheme), () => {
+			const { themePreferences } = this.state;
+			// subscribe to Appearance changes
+			subscribeTheme(themePreferences, this.setTheme);
+		});
+	}
+
 	handleLayout = (event) => {
 		const { width, height } = event.nativeEvent.layout;
 		this.setState({ isLandscape: width > height });
 	}
 
 	render() {
-		const { isLandscape } = this.state;
+		const { isLandscape, theme } = this.state;
 		return (
-			<View
-				style={[sharedStyles.container, isLandscape && isNotch ? sharedStyles.notchLandscapeContainer : {}]}
-				onLayout={this.handleLayout}
-			>
-				<Provider store={store}>
-					<AppContainer
-						ref={(navigatorRef) => {
-							Navigation.setTopLevelNavigator(navigatorRef);
-						}}
-						onNavigationStateChange={onNavigationStateChange}
-					/>
-				</Provider>
-			</View>
+			<AppearanceProvider>
+				<View
+					style={[sharedStyles.container, isLandscape && isNotch ? sharedStyles.notchLandscapeContainer : {}]}
+					onLayout={this.handleLayout}
+				>
+					<Provider store={store}>
+						<ThemeContext.Provider value={{ theme }}>
+							<AppContainer
+								ref={(navigatorRef) => {
+									Navigation.setTopLevelNavigator(navigatorRef);
+								}}
+								onNavigationStateChange={onNavigationStateChange}
+								screenProps={{ theme }}
+							/>
+						</ThemeContext.Provider>
+					</Provider>
+				</View>
+			</AppearanceProvider>
 		);
 	}
 }

app/tablet.js

@@ -12,6 +12,7 @@ import {
 import { MAX_SIDEBAR_WIDTH } from './constants/tablet';
 import ModalNavigation from './lib/ModalNavigation';
 import { keyCommands, defaultCommands } from './commands';
+import { themes } from './constants/colors';
 
 import sharedStyles from './views/Styles';
 
@@ -144,15 +145,15 @@ export const initTabletNav = (setState) => {
 };
 
 const Split = ({
-	split, tablet, showModal, closeModal, setModalRef
+	split, tablet, showModal, closeModal, setModalRef, theme
 }) => {
 	if (split) {
 		return (
 			<>
-				<View style={[sharedStyles.container, sharedStyles.separatorLeft]}>
-					<RoomContainer ref={ref => roomRef = ref} screenProps={{ split: tablet }} />
+				<View style={[sharedStyles.container, sharedStyles.separatorLeft, { borderColor: themes[theme].separatorColor }]}>
+					<RoomContainer ref={ref => roomRef = ref} screenProps={{ split: tablet, theme }} />
 				</View>
-				<ModalContainer showModal={showModal} closeModal={closeModal} ref={setModalRef} screenProps={{ split: tablet }} />
+				<ModalContainer showModal={showModal} closeModal={closeModal} ref={setModalRef} screenProps={{ split: tablet, theme }} />
 			</>
 		);
 	}
@@ -160,7 +161,7 @@ const Split = ({
 };
 
 const Tablet = ({
-	children, tablet, inside, showModal, closeModal, onLayout
+	children, tablet, theme, inside, showModal, closeModal, onLayout
 }) => {
 	const setModalRef = (ref) => {
 		modalRef = ref;
@@ -173,8 +174,8 @@ const Tablet = ({
 			<View style={[sharedStyles.container, split && { maxWidth: MAX_SIDEBAR_WIDTH }]}>
 				{children}
 			</View>
-			<Split split={split} tablet={tablet} showModal={showModal} closeModal={closeModal} setModalRef={setModalRef} />
-			<NotificationContainer ref={ref => notificationRef = ref} />
+			<Split split={split} tablet={tablet} theme={theme} showModal={showModal} closeModal={closeModal} setModalRef={setModalRef} />
+			<NotificationContainer ref={ref => notificationRef = ref} screenProps={{ theme }} />
 		</View>
 	);
 };
@@ -184,7 +185,8 @@ Split.propTypes = {
 	tablet: PropTypes.bool,
 	showModal: PropTypes.bool,
 	closeModal: PropTypes.func,
-	setModalRef: PropTypes.func
+	setModalRef: PropTypes.func,
+	theme: PropTypes.string
 };
 
 Tablet.propTypes = {
@@ -193,7 +195,8 @@ Tablet.propTypes = {
 	inside: PropTypes.bool,
 	showModal: PropTypes.bool,
 	closeModal: PropTypes.func,
-	onLayout: PropTypes.func
+	onLayout: PropTypes.func,
+	theme: PropTypes.string
 };
 
 export default Tablet;

app/theme.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import hoistNonReactStatics from 'hoist-non-react-statics';
+
+export const ThemeContext = React.createContext(null);
+
+export function withTheme(Component) {
+	const ThemedComponent = props => (
+		<ThemeContext.Consumer>
+			{contexts => <Component {...props} {...contexts} />}
+		</ThemeContext.Consumer>
+	);
+	hoistNonReactStatics(ThemedComponent, Component);
+	return ThemedComponent;
+}

app/utils/deviceInfo.js

@@ -12,6 +12,12 @@ export const getReadableVersion = DeviceInfo.getReadableVersion();
 export const getBundleId = DeviceInfo.getBundleId();
 export const getDeviceModel = DeviceInfo.getModel();
 
+// Theme is supported by system on iOS 13+ or Android 10+
+export const supportSystemTheme = () => {
+	const systemVersion = parseInt(DeviceInfo.getSystemVersion(), 10);
+	return systemVersion >= (isIOS ? 13 : 10);
+};
+
 // Tablet info
 export const isTablet = DeviceInfo.isTablet();