diff --git a/app/views/DiscussionsView/DiscussionDetails.tsx b/app/views/DiscussionsView/DiscussionDetails.tsx
index 169c1348..1897f58d 100644
--- a/app/views/DiscussionsView/DiscussionDetails.tsx
+++ b/app/views/DiscussionsView/DiscussionDetails.tsx
@@ -2,7 +2,6 @@ import React from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 
 import { CustomIcon } from '../../lib/Icons';
-import { themes } from '../../lib/constants';
 import sharedStyles from '../Styles';
 import { useTheme } from '../../theme';
 import { IMessageFromServer } from '../../definitions';
@@ -35,8 +34,8 @@ interface IDiscussionDetails {
 	date: string;
 }
 
-const DiscussionDetails = ({ item, date }: IDiscussionDetails): JSX.Element => {
-	const { theme } = useTheme();
+const DiscussionDetails = ({ item, date }: IDiscussionDetails): React.ReactElement => {
+	const { colors } = useTheme();
 	let count: string | number | undefined = item.dcount;
 	if (count && count >= 1000) {
 		count = '+999';
@@ -46,15 +45,15 @@ const DiscussionDetails = ({ item, date }: IDiscussionDetails): JSX.Element => {
 		<View style={[styles.container]}>
 			<View style={styles.detailsContainer}>
 				<View style={styles.detailContainer}>
-					<CustomIcon name={'discussions'} size={24} color={themes[theme!].auxiliaryText} />
-					<Text style={[styles.detailText, { color: themes[theme!].auxiliaryText }]} numberOfLines={1}>
+					<CustomIcon name={'discussions'} size={24} color={colors.auxiliaryText} />
+					<Text style={[styles.detailText, { color: colors.auxiliaryText }]} numberOfLines={1}>
 						{count}
 					</Text>
 				</View>
 
 				<View style={styles.detailContainer}>
-					<CustomIcon name={'clock'} size={24} color={themes[theme!].auxiliaryText} />
-					<Text style={[styles.detailText, { color: themes[theme!].auxiliaryText }]} numberOfLines={1}>
+					<CustomIcon name={'clock'} size={24} color={colors.auxiliaryText} />
+					<Text style={[styles.detailText, { color: colors.auxiliaryText }]} numberOfLines={1}>
 						{date}
 					</Text>
 				</View>
diff --git a/app/views/DiscussionsView/Item.stories.js b/app/views/DiscussionsView/Item.stories.js
index d47ecd71..c14f287b 100644
--- a/app/views/DiscussionsView/Item.stories.js
+++ b/app/views/DiscussionsView/Item.stories.js
@@ -5,7 +5,7 @@ import { ScrollView } from 'react-native';
 import { Provider } from 'react-redux';
 
 import * as List from '../../containers/List';
-import { themes } from '../../lib/constants';
+import { themes, colors } from '../../lib/constants';
 import { ThemeContext } from '../../theme';
 import { store } from '../../../storybook/stories';
 import Item from './Item';
@@ -82,7 +82,7 @@ stories.add('content', () => (
 ));
 
 const ThemeStory = ({ theme }) => (
-	<ThemeContext.Provider value={{ theme }}>
+	<ThemeContext.Provider value={{ theme, colors: colors[theme] }}>
 		<BaseItem badgeColor={themes[theme].mentionMeColor} />
 	</ThemeContext.Provider>
 );
diff --git a/app/views/DiscussionsView/Item.tsx b/app/views/DiscussionsView/Item.tsx
index c86bf42e..aa1a0b46 100644
--- a/app/views/DiscussionsView/Item.tsx
+++ b/app/views/DiscussionsView/Item.tsx
@@ -6,7 +6,6 @@ import moment from 'moment';
 import { useTheme } from '../../theme';
 import Avatar from '../../containers/Avatar';
 import sharedStyles from '../Styles';
-import { themes } from '../../lib/constants';
 import { MarkdownPreview } from '../../containers/markdown';
 import { formatDateThreads, makeThreadName } from '../../utils/room';
 import DiscussionDetails from './DiscussionDetails';
@@ -55,15 +54,14 @@ interface IItem {
 	};
 }
 
-const Item = ({ item, onPress }: IItem): JSX.Element => {
-	const { theme } = useTheme();
+const Item = ({ item, onPress }: IItem): React.ReactElement => {
+	const { colors } = useTheme();
 	const username = item?.u?.username;
 	let messageTime = '';
 	let messageDate = '';
 
 	if (item?.ts) {
 		messageTime = moment(item.ts).format('LT');
-		// @ts-ignore TODO: Unify IMessage
 		messageDate = formatDateThreads(item.ts);
 	}
 
@@ -71,15 +69,15 @@ const Item = ({ item, onPress }: IItem): JSX.Element => {
 		<Touchable
 			onPress={() => onPress(item)}
 			testID={`discussions-view-${item.msg}`}
-			style={{ backgroundColor: themes[theme].backgroundColor }}>
+			style={{ backgroundColor: colors.backgroundColor }}>
 			<View style={styles.container}>
 				<Avatar style={styles.avatar} text={item?.u?.username} size={36} borderRadius={4} />
 				<View style={styles.contentContainer}>
 					<View style={styles.titleContainer}>
-						<Text style={[styles.title, { color: themes[theme].titleText }]} numberOfLines={1}>
+						<Text style={[styles.title, { color: colors.titleText }]} numberOfLines={1}>
 							{username}
 						</Text>
-						{messageTime ? <Text style={[styles.time, { color: themes[theme].auxiliaryText }]}>{messageTime}</Text> : null}
+						{messageTime ? <Text style={[styles.time, { color: colors.auxiliaryText }]}>{messageTime}</Text> : null}
 					</View>
 					<View style={styles.messageContainer}>
 						{username ? <MarkdownPreview msg={makeThreadName(item)} numberOfLines={2} style={[styles.markdown]} /> : null}
diff --git a/app/views/DiscussionsView/index.tsx b/app/views/DiscussionsView/index.tsx
index 84313ce0..13d70161 100644
--- a/app/views/DiscussionsView/index.tsx
+++ b/app/views/DiscussionsView/index.tsx
@@ -12,7 +12,6 @@ import I18n from '../../i18n';
 import StatusBar from '../../containers/StatusBar';
 import log from '../../utils/log';
 import debounce from '../../utils/debounce';
-import { themes } from '../../lib/constants';
 import SafeAreaView from '../../containers/SafeAreaView';
 import * as HeaderButton from '../../containers/HeaderButton';
 import * as List from '../../containers/List';
@@ -39,7 +38,7 @@ interface IDiscussionsViewProps {
 	item: TThreadModel;
 }
 
-const DiscussionsView = ({ navigation, route }: IDiscussionsViewProps): JSX.Element => {
+const DiscussionsView = ({ navigation, route }: IDiscussionsViewProps): React.ReactElement => {
 	const rid = route.params?.rid;
 	const t = route.params?.t;
 
@@ -53,7 +52,7 @@ const DiscussionsView = ({ navigation, route }: IDiscussionsViewProps): JSX.Elem
 	const [total, setTotal] = useState(0);
 	const [searchTotal, setSearchTotal] = useState(0);
 
-	const { theme } = useTheme();
+	const { colors } = useTheme();
 	const insets = useSafeAreaInsets();
 
 	const load = async (text = '') => {
@@ -126,7 +125,7 @@ const DiscussionsView = ({ navigation, route }: IDiscussionsViewProps): JSX.Elem
 
 		options = {
 			headerLeft: () => (
-				<HeaderBackButton labelVisible={false} onPress={() => navigation.pop()} tintColor={themes[theme].headerTintColor} />
+				<HeaderBackButton labelVisible={false} onPress={() => navigation.pop()} tintColor={colors.headerTintColor} />
 			),
 			headerTitleAlign: 'center',
 			headerTitle: I18n.t('Discussions'),
@@ -192,7 +191,7 @@ const DiscussionsView = ({ navigation, route }: IDiscussionsViewProps): JSX.Elem
 				data={isSearching ? search : discussions}
 				renderItem={renderItem}
 				keyExtractor={(item: any) => item.msg}
-				style={{ backgroundColor: themes[theme].backgroundColor }}
+				style={{ backgroundColor: colors.backgroundColor }}
 				contentContainerStyle={styles.contentContainer}
 				onEndReachedThreshold={0.5}
 				removeClippedSubviews={isIOS}