Chore: update `theme` type (#4025)

* chore: update `theme` type

* update: components

* update: storyshots

* add: `theme` type to `DirectoryItem`

* chore: update theme type on `message/index.tsx`

* update: `RoomTypeIcon`'s useTheme

app/containers/AppVersion.tsx

@@ -5,6 +5,7 @@ import { themes } from '../lib/constants';
 import sharedStyles from '../views/Styles';
 import { getReadableVersion } from '../utils/deviceInfo';
 import I18n from '../i18n';
+import { TSupportedThemes } from '../theme';
 
 const styles = StyleSheet.create({
 	container: {
@@ -20,7 +21,7 @@ const styles = StyleSheet.create({
 	}
 });
 
-const AppVersion = React.memo(({ theme }: { theme: string }) => (
+const AppVersion = React.memo(({ theme }: { theme: TSupportedThemes }) => (
 	<View style={styles.container}>
 		<Text style={[styles.text, { color: themes[theme].auxiliaryText }]}>
 			{I18n.t('Version_no', { version: '' })}

app/containers/Button/index.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { StyleSheet, Text } from 'react-native';
 import Touchable from 'react-native-platform-touchable';
 
+import { TSupportedThemes } from '../../theme';
 import { themes } from '../../lib/constants';
 import sharedStyles from '../../views/Styles';
 import ActivityIndicator from '../ActivityIndicator';
@@ -13,7 +14,7 @@ interface IButtonProps {
 	disabled: boolean;
 	backgroundColor: string;
 	loading: boolean;
-	theme: string;
+	theme: TSupportedThemes;
 	color: string;
 	fontSize: any;
 	style: any;

app/containers/DirectoryItem/index.tsx

@@ -6,13 +6,13 @@ import Avatar from '../Avatar';
 import RoomTypeIcon from '../RoomTypeIcon';
 import styles, { ROW_HEIGHT } from './styles';
 import { themes } from '../../lib/constants';
-import { useTheme } from '../../theme';
+import { TSupportedThemes, useTheme } from '../../theme';
 
 export { ROW_HEIGHT };
 
 interface IDirectoryItemLabel {
 	text?: string;
-	theme: string;
+	theme: TSupportedThemes;
 }
 
 interface IDirectoryItem {
@@ -54,7 +54,7 @@ const DirectoryItem = ({
 				<Avatar text={avatar} size={30} type={type} rid={rid} style={styles.directoryItemAvatar} />
 				<View style={styles.directoryItemTextContainer}>
 					<View style={styles.directoryItemTextTitle}>
-						<RoomTypeIcon type={type} teamMain={teamMain} theme={theme} />
+						<RoomTypeIcon type={type} teamMain={teamMain} />
 						<Text style={[styles.directoryItemName, { color: themes[theme].titleText }]} numberOfLines={1}>
 							{title}
 						</Text>

app/containers/EmojiPicker/TabBar.tsx

@@ -3,13 +3,14 @@ import { Text, TouchableOpacity, View } from 'react-native';
 
 import styles from './styles';
 import { themes } from '../../lib/constants';
+import { TSupportedThemes } from '../../theme';
 
 interface ITabBarProps {
 	goToPage: Function;
 	activeTab: number;
 	tabs: [];
 	tabEmojiStyle: object;
-	theme: string;
+	theme: TSupportedThemes;
 }
 
 export default class TabBar extends React.Component<Partial<ITabBarProps>> {

app/containers/EmojiPicker/index.tsx

@@ -16,7 +16,7 @@ import protectedFunction from '../../lib/methods/helpers/protectedFunction';
 import shortnameToUnicode from '../../utils/shortnameToUnicode';
 import log from '../../utils/log';
 import { themes } from '../../lib/constants';
-import { withTheme } from '../../theme';
+import { TSupportedThemes, withTheme } from '../../theme';
 import { IEmoji } from '../../definitions/IEmoji';
 
 const scrollProps = {
@@ -30,7 +30,7 @@ interface IEmojiPickerProps {
 	baseUrl: string;
 	customEmojis?: any;
 	style: object;
-	theme?: string;
+	theme: TSupportedThemes;
 	onEmojiSelected?: ((emoji: any) => void) | ((keyboardId: any, params?: any) => void);
 	tabEmojiStyle?: object;
 }
@@ -186,7 +186,7 @@ class EmojiPicker extends Component<IEmojiPickerProps, IEmojiPickerState> {
 					renderTabBar={() => <TabBar tabEmojiStyle={tabEmojiStyle} theme={theme} />}
 					/* @ts-ignore*/
 					contentProps={scrollProps}
-					style={{ backgroundColor: themes[theme!].focusedBackground }}>
+					style={{ backgroundColor: themes[theme].focusedBackground }}>
 					{categories.tabs.map((tab, i) =>
 						i === 0 && frequentlyUsed.length === 0
 							? null // when no frequentlyUsed don't show the tab

app/containers/List/ListIcon.tsx

@@ -8,7 +8,7 @@ import { ICON_SIZE } from './constants';
 
 interface IListIcon {
 	name: string;
-	color?: string;
+	color?: string | null;
 	style?: StyleProp<ViewStyle>;
 	testID?: string;
 }

app/containers/List/ListItem.tsx

@@ -4,7 +4,7 @@ import { I18nManager, StyleSheet, Text, View } from 'react-native';
 import Touch from '../../utils/touch';
 import { themes } from '../../lib/constants';
 import sharedStyles from '../../views/Styles';
-import { useTheme } from '../../theme';
+import { TSupportedThemes, useTheme } from '../../theme';
 import I18n from '../../i18n';
 import { Icon } from '.';
 import { BASE_HEIGHT, ICON_SIZE, PADDING_HORIZONTAL } from './constants';
@@ -59,7 +59,7 @@ interface IListItemContent {
 	left?: () => JSX.Element | null;
 	right?: () => JSX.Element | null;
 	disabled?: boolean;
-	theme: string;
+	theme: TSupportedThemes;
 	testID?: string;
 	color?: string;
 	translateTitle?: boolean;
@@ -121,7 +121,7 @@ interface IListButtonPress extends IListItemButton {
 interface IListItemButton {
 	title?: string;
 	disabled?: boolean;
-	theme: string;
+	theme: TSupportedThemes;
 	backgroundColor?: string;
 	underlayColor?: string;
 }

app/containers/Loading.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Animated, Modal, StyleSheet, View } from 'react-native';
 
-import { withTheme } from '../theme';
+import { TSupportedThemes, withTheme } from '../theme';
 import { themes } from '../lib/constants';
 
 const styles = StyleSheet.create({
@@ -19,7 +19,7 @@ const styles = StyleSheet.create({
 
 interface ILoadingProps {
 	visible: boolean;
-	theme?: string;
+	theme?: TSupportedThemes;
 }
 
 interface ILoadingState {

app/containers/LoginServices.tsx

@@ -5,7 +5,7 @@ import { Base64 } from 'js-base64';
 import * as AppleAuthentication from 'expo-apple-authentication';
 import { StackNavigationProp } from '@react-navigation/stack';
 
-import { withTheme } from '../theme';
+import { TSupportedThemes, withTheme } from '../theme';
 import sharedStyles from '../views/Styles';
 import { themes } from '../lib/constants';
 import Button from './Button';
@@ -100,7 +100,7 @@ interface ILoginServicesProps {
 	CAS_enabled: boolean;
 	CAS_login_url: string;
 	separator: boolean;
-	theme: string;
+	theme: TSupportedThemes;
 }
 
 interface ILoginServicesState {

app/containers/MessageActions/Header.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { FlatList, StyleSheet, Text, View } from 'react-native';
 
-import { useTheme } from '../../theme';
+import { TSupportedThemes, useTheme } from '../../theme';
 import { themes } from '../../lib/constants';
 import { CustomIcon } from '../../lib/Icons';
 import shortnameToUnicode from '../../utils/shortnameToUnicode';
@@ -29,12 +29,12 @@ interface THeaderItem {
 	item: TItem;
 	onReaction: TOnReaction;
 	server: string;
-	theme: string;
+	theme: TSupportedThemes;
 }
 
 interface THeaderFooter {
 	onReaction: TOnReaction;
-	theme: string;
+	theme: TSupportedThemes;
 }
 
 export const HEADER_HEIGHT = 36;

app/containers/MessageBox/EmojiKeyboard.tsx

@@ -6,11 +6,11 @@ import { store } from '../../lib/store/auxStore';
 import EmojiPicker from '../EmojiPicker';
 import styles from './styles';
 import { themes } from '../../lib/constants';
-import { withTheme } from '../../theme';
+import { TSupportedThemes, withTheme } from '../../theme';
 import { IEmoji } from '../../definitions/IEmoji';
 
 interface IMessageBoxEmojiKeyboard {
-	theme: string;
+	theme: TSupportedThemes;
 }
 
 export default class EmojiKeyboard extends React.PureComponent<IMessageBoxEmojiKeyboard, any> {

app/containers/MessageBox/RecordAudio.tsx

@@ -10,9 +10,10 @@ import I18n from '../../i18n';
 import { themes } from '../../lib/constants';
 import { CustomIcon } from '../../lib/Icons';
 import { events, logEvent } from '../../utils/log';
+import { TSupportedThemes } from '../../theme';
 
 interface IMessageBoxRecordAudioProps {
-	theme: string;
+	theme: TSupportedThemes;
 	permissionToUpload: boolean;
 	recordingCallback: Function;
 	onFinish: Function;

app/containers/MessageBox/index.tsx

@@ -52,6 +52,7 @@ import { IMessage } from '../../definitions/IMessage';
 import { forceJpgExtension } from './forceJpgExtension';
 import { IBaseScreen, IPreviewItem, IUser, TSubscriptionModel, TThreadModel } from '../../definitions';
 import { MasterDetailInsideStackParamList } from '../../stacks/MasterDetailStack/types';
+import { TSupportedThemes } from '../../theme';
 
 if (isAndroid) {
 	require('./EmojiKeyboard');
@@ -95,7 +96,7 @@ export interface IMessageBoxProps extends IBaseScreen<MasterDetailInsideStackPar
 	editRequest: Function;
 	onSubmit: Function;
 	typing: Function;
-	theme: string;
+	theme: TSupportedThemes;
 	replyCancel(): void;
 	showSend: boolean;
 	children: JSX.Element;

app/containers/OrSeparator.tsx

@@ -4,6 +4,7 @@ import { StyleSheet, Text, View } from 'react-native';
 import I18n from '../i18n';
 import sharedStyles from '../views/Styles';
 import { themes } from '../lib/constants';
+import { TSupportedThemes } from '../theme';
 
 const styles = StyleSheet.create({
 	container: {
@@ -24,7 +25,7 @@ const styles = StyleSheet.create({
 });
 
 interface IOrSeparator {
-	theme: string;
+	theme: TSupportedThemes;
 }
 
 const OrSeparator = React.memo(({ theme }: IOrSeparator) => {

app/containers/ReactionsModal.tsx

@@ -8,7 +8,7 @@ import I18n from '../i18n';
 import { CustomIcon } from '../lib/Icons';
 import sharedStyles from '../views/Styles';
 import { themes } from '../lib/constants';
-import { useTheme, withTheme } from '../theme';
+import { TSupportedThemes, useTheme, withTheme } from '../theme';
 import { TGetCustomEmoji } from '../definitions/IEmoji';
 import { TMessageModel, ILoggedUser } from '../definitions';
 import SafeAreaView from './SafeAreaView';
@@ -77,7 +77,7 @@ interface IItem extends ISharedFields {
 interface IModalContent extends ISharedFields {
 	message?: TMessageModel;
 	onClose: () => void;
-	theme: string;
+	theme: TSupportedThemes;
 }
 
 interface IReactionsModal extends ISharedFields {

app/containers/RoomHeader/RoomHeader.tsx

@@ -67,7 +67,6 @@ interface IRoomHeader {
 	tmid: string;
 	teamMain: boolean;
 	status: TUserStatus;
-	theme?: string;
 	usersTyping: [];
 	isGroupChat: boolean;
 	parentTitle: string;

app/containers/RoomTypeIcon.tsx

@@ -4,7 +4,7 @@ import { StyleSheet, ViewStyle } from 'react-native';
 import { CustomIcon } from '../lib/Icons';
 import { STATUS_COLORS, themes } from '../lib/constants';
 import Status from './Status/Status';
-import { withTheme } from '../theme';
+import { useTheme } from '../theme';
 import { TUserStatus } from '../definitions';
 
 const styles = StyleSheet.create({
@@ -14,7 +14,6 @@ const styles = StyleSheet.create({
 });
 
 interface IRoomTypeIcon {
-	theme?: string;
 	type: string;
 	isGroupChat?: boolean;
 	teamMain?: boolean;
@@ -23,12 +22,12 @@ interface IRoomTypeIcon {
 	style?: ViewStyle;
 }
 
-const RoomTypeIcon = React.memo(({ type, isGroupChat, status, style, theme, teamMain, size = 16 }: IRoomTypeIcon) => {
+const RoomTypeIcon = React.memo(({ type, isGroupChat, status, style, teamMain, size = 16 }: IRoomTypeIcon) => {
+	const { theme } = useTheme();
 	if (!type) {
 		return null;
 	}
-
-	const color = themes[theme!].titleText;
+	const color = themes[theme].titleText;
 	const iconStyle = [styles.icon, { color }, style];
 
 	if (type === 'd' && !isGroupChat) {
@@ -59,4 +58,4 @@ const RoomTypeIcon = React.memo(({ type, isGroupChat, status, style, theme, team
 	return <CustomIcon name={icon} size={size} style={iconStyle} />;
 });
 
-export default withTheme(RoomTypeIcon);
+export default RoomTypeIcon;

app/containers/TextInput.tsx

@@ -7,6 +7,7 @@ import TextInput from '../presentation/TextInput';
 import { themes } from '../lib/constants';
 import { CustomIcon } from '../lib/Icons';
 import ActivityIndicator from './ActivityIndicator';
+import { TSupportedThemes } from '../theme';
 
 const styles = StyleSheet.create({
 	error: {
@@ -62,7 +63,7 @@ export interface IRCTextInputProps extends TextInputProps {
 	iconRight?: string;
 	left?: JSX.Element;
 	onIconRightPress?(): void;
-	theme: string;
+	theme: TSupportedThemes;
 }
 
 interface IRCTextInputState {

app/containers/Toast.tsx

@@ -5,7 +5,7 @@ import EasyToast from 'react-native-easy-toast';
 import { themes } from '../lib/constants';
 import sharedStyles from '../views/Styles';
 import EventEmitter from '../utils/events';
-import { withTheme } from '../theme';
+import { TSupportedThemes, withTheme } from '../theme';
 
 const styles = StyleSheet.create({
 	toast: {
@@ -22,7 +22,7 @@ const styles = StyleSheet.create({
 export const LISTENER = 'Toast';
 
 interface IToastProps {
-	theme?: string;
+	theme?: TSupportedThemes;
 }
 
 class Toast extends React.Component<IToastProps, any> {

app/containers/UIKit/MultiSelect/Chips.tsx

@@ -8,19 +8,20 @@ import { textParser } from '../utils';
 import { CustomIcon } from '../../../lib/Icons';
 import styles from './styles';
 import { IItemData } from '.';
+import { TSupportedThemes } from '../../../theme';
 
 interface IChip {
 	item: IItemData;
 	onSelect: (item: IItemData) => void;
 	style?: object;
-	theme: string;
+	theme: TSupportedThemes;
 }
 
 interface IChips {
 	items: IItemData[];
 	onSelect: (item: IItemData) => void;
 	style?: object;
-	theme: string;
+	theme: TSupportedThemes;
 }
 
 const keyExtractor = (item: IItemData) => item.value.toString();

app/containers/UIKit/MultiSelect/Input.tsx

@@ -6,11 +6,12 @@ import { CustomIcon } from '../../../lib/Icons';
 import { themes } from '../../../lib/constants';
 import ActivityIndicator from '../../ActivityIndicator';
 import styles from './styles';
+import { TSupportedThemes } from '../../../theme';
 
 interface IInput {
 	children?: JSX.Element;
 	onPress: () => void;
-	theme: string;
+	theme: TSupportedThemes;
 	inputStyle?: object;
 	disabled?: boolean | null;
 	placeholder?: string;

app/containers/UIKit/MultiSelect/Items.tsx

@@ -9,19 +9,20 @@ import { textParser } from '../utils';
 import { themes } from '../../../lib/constants';
 import styles from './styles';
 import { IItemData } from '.';
+import { TSupportedThemes } from '../../../theme';
 
 interface IItem {
 	item: IItemData;
 	selected?: string;
 	onSelect: Function;
-	theme: string;
+	theme: TSupportedThemes;
 }
 
 interface IItems {
 	items: IItemData[];
 	selected: string[];
 	onSelect: Function;
-	theme: string;
+	theme: TSupportedThemes;
 }
 
 const keyExtractor = (item: IItemData) => item.value.toString();

app/containers/UIKit/interfaces.ts

@@ -1,3 +1,5 @@
+import { TSupportedThemes } from '../../theme';
+
 export enum ElementTypes {
 	IMAGE = 'image',
 	BUTTON = 'button',
@@ -199,7 +201,7 @@ export interface IInput extends Partial<Block> {
 	description: string;
 	error: string;
 	hint: string;
-	theme: string;
+	theme: TSupportedThemes;
 }
 
 export interface IInputIndex {
@@ -231,7 +233,7 @@ export interface IOverflow extends Partial<Block> {
 interface PropsOption {
 	onOptionPress: Function;
 	parser: IParser;
-	theme: string;
+	theme: TSupportedThemes;
 }
 export interface IOptions extends PropsOption {
 	options: Option[];
@@ -265,6 +267,6 @@ export interface ISection {
 
 export interface IFields {
 	parser: IParser;
-	theme: string;
+	theme: TSupportedThemes;
 	fields: any[];
 }

app/containers/UserItem.tsx

@@ -6,6 +6,7 @@ import { CustomIcon } from '../lib/Icons';
 import sharedStyles from '../views/Styles';
 import { themes } from '../lib/constants';
 import { isIOS } from '../utils/deviceInfo';
+import { TSupportedThemes } from '../theme';
 
 const styles = StyleSheet.create({
 	button: {
@@ -46,7 +47,7 @@ interface IUserItem {
 	onLongPress?: () => void;
 	style?: StyleProp<ViewStyle>;
 	icon?: string | null;
-	theme: string;
+	theme: TSupportedThemes;
 }
 
 const UserItem = ({ name, username, onPress, testID, onLongPress, style, icon, theme }: IUserItem) => (

app/containers/markdown/BlockQuote.tsx

@@ -1,12 +1,13 @@
 import React from 'react';
 import { View } from 'react-native';
 
+import { TSupportedThemes } from '../../theme';
 import { themes } from '../../lib/constants';
 import styles from './styles';
 
 interface IBlockQuote {
 	children: React.ReactElement | null;
-	theme: string;
+	theme: TSupportedThemes;
 }
 
 const BlockQuote = React.memo(({ children, theme }: IBlockQuote) => (

app/containers/markdown/Emoji.tsx

@@ -5,6 +5,7 @@ import shortnameToUnicode from '../../utils/shortnameToUnicode';
 import CustomEmoji from '../EmojiPicker/CustomEmoji';
 import { themes } from '../../lib/constants';
 import styles from './styles';
+import { TSupportedThemes } from '../../theme';
 
 interface IEmoji {
 	literal: string;
@@ -13,7 +14,7 @@ interface IEmoji {
 	baseUrl: string;
 	customEmojis?: any;
 	style?: object;
-	theme: string;
+	theme: TSupportedThemes;
 	onEmojiSelected?: Function;
 	tabEmojiStyle?: object;
 }

app/containers/markdown/Link.tsx

@@ -9,11 +9,12 @@ import EventEmitter from '../../utils/events';
 import I18n from '../../i18n';
 import openLink from '../../utils/openLink';
 import { TOnLinkPress } from './interfaces';
+import { TSupportedThemes } from '../../theme';
 
 interface ILink {
 	children: React.ReactElement | null;
 	link: string;
-	theme: string;
+	theme: TSupportedThemes;
 	onLinkPress?: TOnLinkPress;
 }
 

app/containers/markdown/ListItem.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 
+import { TSupportedThemes } from '../../theme';
 import { themes } from '../../lib/constants';
 
 const style = StyleSheet.create({
@@ -23,7 +24,7 @@ interface IListItem {
 	level: number;
 	ordered: boolean;
 	continue: boolean;
-	theme: string;
+	theme: TSupportedThemes;
 	index: number;
 }
 

app/containers/markdown/Table.tsx

@@ -5,12 +5,13 @@ import { CELL_WIDTH } from './TableCell';
 import styles from './styles';
 import Navigation from '../../lib/navigation/appNavigation';
 import I18n from '../../i18n';
+import { TSupportedThemes } from '../../theme';
 import { themes } from '../../lib/constants';
 
 interface ITable {
 	children: React.ReactElement | null;
 	numColumns: number;
-	theme: string;
+	theme: TSupportedThemes;
 }
 
 const MAX_HEIGHT = 300;

app/containers/markdown/TableCell.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Text, View, ViewStyle } from 'react-native';
 
+import { TSupportedThemes } from '../../theme';
 import { themes } from '../../lib/constants';
 import styles from './styles';
 
@@ -8,7 +9,7 @@ interface ITableCell {
 	align: '' | 'left' | 'center' | 'right';
 	children: React.ReactElement | null;
 	isLastCell: boolean;
-	theme: string;
+	theme: TSupportedThemes;
 }
 
 export const CELL_WIDTH = 100;

app/containers/markdown/TableRow.tsx

@@ -1,13 +1,14 @@
 import React from 'react';
 import { View, ViewStyle } from 'react-native';
 
+import { TSupportedThemes } from '../../theme';
 import { themes } from '../../lib/constants';
 import styles from './styles';
 
 interface ITableRow {
 	children: React.ReactElement | null;
 	isLastRow: boolean;
-	theme: string;
+	theme: TSupportedThemes;
 }
 
 const TableRow = React.memo(({ isLastRow, children: _children, theme }: ITableRow) => {

app/containers/markdown/index.tsx

@@ -23,13 +23,14 @@ import { formatText } from './formatText';
 import { IUserMention, IUserChannel, TOnLinkPress } from './interfaces';
 import { TGetCustomEmoji } from '../../definitions/IEmoji';
 import { formatHyperlink } from './formatHyperlink';
+import { TSupportedThemes } from '../../theme';
 import { themes } from '../../lib/constants';
 
 export { default as MarkdownPreview } from './Preview';
 
 interface IMarkdownProps {
 	msg?: string;
-	theme: string;
+	theme: TSupportedThemes;
 	md?: MarkdownAST;
 	mentions?: IUserMention[];
 	getCustomEmoji?: TGetCustomEmoji;

app/containers/markdown/new/Image.tsx

@@ -4,7 +4,7 @@ import { createImageProgress } from 'react-native-image-progress';
 import * as Progress from 'react-native-progress';
 import FastImage from '@rocket.chat/react-native-fast-image';
 
-import { useTheme } from '../../../theme';
+import { TSupportedThemes, useTheme } from '../../../theme';
 import { themes } from '../../../lib/constants';
 import styles from '../../message/styles';
 
@@ -14,7 +14,7 @@ interface IImageProps {
 
 type TMessageImage = {
 	img: string;
-	theme: string;
+	theme: TSupportedThemes;
 };
 
 const ImageProgress = createImageProgress(FastImage);

app/containers/message/Audio.tsx

@@ -18,11 +18,12 @@ import ActivityIndicator from '../ActivityIndicator';
 import { withDimensions } from '../../dimensions';
 import { TGetCustomEmoji } from '../../definitions/IEmoji';
 import { IAttachment } from '../../definitions';
+import { TSupportedThemes } from '../../theme';
 
 interface IButton {
 	loading: boolean;
 	paused: boolean;
-	theme: string;
+	theme: TSupportedThemes;
 	disabled?: boolean;
 	onPress: () => void;
 }
@@ -31,7 +32,7 @@ interface IMessageAudioProps {
 	file: IAttachment;
 	isReply?: boolean;
 	style?: StyleProp<TextStyle>[];
-	theme: string;
+	theme: TSupportedThemes;
 	getCustomEmoji: TGetCustomEmoji;
 	scale?: number;
 }
@@ -264,6 +265,13 @@ class MessageAudio extends React.Component<IMessageAudioProps, IMessageAudioStat
 			return null;
 		}
 
+		let thumbColor;
+		if (isAndroid && isReply) {
+			thumbColor = themes[theme].tintDisabled;
+		} else if (isAndroid) {
+			thumbColor = themes[theme].tintColor;
+		}
+
 		return (
 			<>
 				<Markdown
@@ -286,7 +294,7 @@ class MessageAudio extends React.Component<IMessageAudioProps, IMessageAudioStat
 						value={currentTime}
 						maximumValue={duration}
 						minimumValue={0}
-						thumbTintColor={isReply && isAndroid ? themes[theme].tintDisabled : isAndroid && themes[theme].tintColor}
+						thumbTintColor={thumbColor}
 						minimumTrackTintColor={themes[theme].tintColor}
 						maximumTrackTintColor={themes[theme].auxiliaryText}
 						onValueChange={this.onValueChange}

app/containers/message/Image.tsx

@@ -12,14 +12,14 @@ import { themes } from '../../lib/constants';
 import MessageContext from './Context';
 import { TGetCustomEmoji } from '../../definitions/IEmoji';
 import { IAttachment } from '../../definitions';
-import { useTheme } from '../../theme';
+import { TSupportedThemes, useTheme } from '../../theme';
 import { formatAttachmentUrl } from '../../lib/methods/helpers/formatAttachmentUrl';
 
 interface IMessageButton {
 	children: React.ReactElement;
 	disabled?: boolean;
 	onPress: () => void;
-	theme: string;
+	theme: TSupportedThemes;
 }
 
 interface IMessageImage {
@@ -43,7 +43,7 @@ const Button = React.memo(({ children, onPress, disabled, theme }: IMessageButto
 	</Touchable>
 ));
 
-export const MessageImage = React.memo(({ imgUri, theme }: { imgUri: string; theme: string }) => (
+export const MessageImage = React.memo(({ imgUri, theme }: { imgUri: string; theme: TSupportedThemes }) => (
 	<ImageProgress
 		style={[styles.image, { borderColor: themes[theme].borderColor }]}
 		source={{ uri: encodeURI(imgUri) }}

app/containers/message/Message.tsx

@@ -126,7 +126,7 @@ const MessageTouchable = React.memo((props: IMessageTouchable & IMessage) => {
 			onLongPress={onLongPress}
 			onPress={onPress}
 			disabled={(props.isInfo && !props.isThreadReply) || props.archived || props.isTemp || props.type === 'jitsi_call_started'}
-			style={{ backgroundColor: props.highlighted ? themes[theme].headerBackground : null }}>
+			style={{ backgroundColor: props.highlighted ? themes[theme].headerBackground : undefined }}>
 			<View>
 				<Message {...props} />
 			</View>

app/containers/message/Reactions.tsx

@@ -7,7 +7,7 @@ import styles from './styles';
 import Emoji from './Emoji';
 import { BUTTON_HIT_SLOP } from './utils';
 import { themes } from '../../lib/constants';
-import { useTheme } from '../../theme';
+import { TSupportedThemes, useTheme } from '../../theme';
 import MessageContext from './Context';
 import { TGetCustomEmoji } from '../../definitions/IEmoji';
 
@@ -20,7 +20,7 @@ interface IReaction {
 interface IMessageReaction {
 	reaction: IReaction;
 	getCustomEmoji: TGetCustomEmoji;
-	theme: string;
+	theme: TSupportedThemes;
 }
 
 interface IMessageReactions {
@@ -28,7 +28,7 @@ interface IMessageReactions {
 	getCustomEmoji: TGetCustomEmoji;
 }
 
-const AddReaction = React.memo(({ theme }: { theme: string }) => {
+const AddReaction = React.memo(({ theme }: { theme: TSupportedThemes }) => {
 	const { reactionInit } = useContext(MessageContext);
 	return (
 		<Touchable

app/containers/message/Reply.tsx

@@ -15,7 +15,7 @@ import { IAttachment } from '../../definitions/IAttachment';
 import { TGetCustomEmoji } from '../../definitions/IEmoji';
 import RCActivityIndicator from '../ActivityIndicator';
 import Attachments from './Attachments';
-import { useTheme } from '../../theme';
+import { TSupportedThemes, useTheme } from '../../theme';
 import { formatAttachmentUrl } from '../../lib/methods/helpers/formatAttachmentUrl';
 
 const styles = StyleSheet.create({
@@ -98,7 +98,8 @@ interface IMessageReply {
 	getCustomEmoji: TGetCustomEmoji;
 }
 
-const Title = React.memo(({ attachment, timeFormat, theme }: { attachment: IAttachment; timeFormat?: string; theme: string }) => {
+const Title = React.memo(
+	({ attachment, timeFormat, theme }: { attachment: IAttachment; timeFormat?: string; theme: TSupportedThemes }) => {
 		const time = attachment.message_link && attachment.ts ? moment(attachment.ts).format(timeFormat) : null;
 		return (
 			<View style={styles.authorContainer}>
@@ -109,10 +110,19 @@ const Title = React.memo(({ attachment, timeFormat, theme }: { attachment: IAtta
 				{time ? <Text style={[styles.time, { color: themes[theme].auxiliaryTintColor }]}>{time}</Text> : null}
 			</View>
 		);
-});
+	}
+);
 
 const Description = React.memo(
-	({ attachment, getCustomEmoji, theme }: { attachment: IAttachment; getCustomEmoji: TGetCustomEmoji; theme: string }) => {
+	({
+		attachment,
+		getCustomEmoji,
+		theme
+	}: {
+		attachment: IAttachment;
+		getCustomEmoji: TGetCustomEmoji;
+		theme: TSupportedThemes;
+	}) => {
 		const { baseUrl, user } = useContext(MessageContext);
 		const text = attachment.text || attachment.title;
 
@@ -160,7 +170,15 @@ const UrlImage = React.memo(
 );
 
 const Fields = React.memo(
-	({ attachment, theme, getCustomEmoji }: { attachment: IAttachment; theme: string; getCustomEmoji: TGetCustomEmoji }) => {
+	({
+		attachment,
+		theme,
+		getCustomEmoji
+	}: {
+		attachment: IAttachment;
+		theme: TSupportedThemes;
+		getCustomEmoji: TGetCustomEmoji;
+	}) => {
 		const { baseUrl, user } = useContext(MessageContext);
 
 		if (!attachment.fields) {

app/containers/message/Urls.tsx

@@ -8,7 +8,7 @@ import Touchable from './Touchable';
 import openLink from '../../utils/openLink';
 import sharedStyles from '../../views/Styles';
 import { themes } from '../../lib/constants';
-import { useTheme, withTheme } from '../../theme';
+import { TSupportedThemes, useTheme, withTheme } from '../../theme';
 import { LISTENER } from '../Toast';
 import EventEmitter from '../../utils/events';
 import I18n from '../../i18n';
@@ -66,7 +66,7 @@ const UrlImage = React.memo(
 );
 
 const UrlContent = React.memo(
-	({ title, description, theme }: { title: string; description: string; theme: string }) => (
+	({ title, description, theme }: { title: string; description: string; theme: TSupportedThemes }) => (
 		<View style={styles.textContainer}>
 			{title ? (
 				<Text style={[styles.title, { color: themes[theme].tintColor }]} numberOfLines={2}>
@@ -95,7 +95,7 @@ const UrlContent = React.memo(
 );
 
 const Url = React.memo(
-	({ url, index, theme }: { url: IUrl; index: number; theme: string }) => {
+	({ url, index, theme }: { url: IUrl; index: number; theme: TSupportedThemes }) => {
 		if (!url || url?.ignoreParse) {
 			return null;
 		}

app/containers/message/index.tsx

@@ -6,7 +6,7 @@ import Message from './Message';
 import MessageContext from './Context';
 import debounce from '../../utils/debounce';
 import { SYSTEM_MESSAGES, getMessageTranslation } from './utils';
-import { withTheme } from '../../theme';
+import { TSupportedThemes, withTheme } from '../../theme';
 import openLink from '../../utils/openLink';
 import { TGetCustomEmoji } from '../../definitions/IEmoji';
 import { IAttachment, TAnyMessageModel } from '../../definitions';
@@ -57,7 +57,7 @@ interface IMessageContainerProps {
 	toggleFollowThread?: (isFollowingThread: boolean, tmid?: string) => Promise<void>;
 	jumpToMessage?: (link: string) => void;
 	onPress?: () => void;
-	theme: string;
+	theme: TSupportedThemes;
 }
 
 interface IMessageContainerState {
@@ -73,7 +73,7 @@ class MessageContainer extends React.Component<IMessageContainerProps, IMessageC
 		archived: false,
 		broadcast: false,
 		isIgnored: false,
-		theme: 'light'
+		theme: 'light' as TSupportedThemes
 	};
 
 	state = { isManualUnignored: false };

app/definitions/ILivechatEditView.ts

@@ -1,11 +1,12 @@
 import { TextInput } from 'react-native';
 
+import { TSupportedThemes } from '../theme';
 import { ILivechatVisitor } from './ILivechatVisitor';
 import { ISubscription } from './ISubscription';
 
 export interface ITitle {
 	title: string;
-	theme: string;
+	theme: TSupportedThemes;
 }
 
 export interface IInputs {

app/definitions/IProfileViewInterfaces.ts

@@ -1,6 +1,7 @@
 import { StackNavigationProp } from '@react-navigation/stack';
 import React from 'react';
 
+import { TSupportedThemes } from '../theme';
 import { ProfileStackParamList } from '../stacks/types';
 import { IUser } from './IUser';
 
@@ -34,7 +35,7 @@ export interface IProfileViewProps {
 	Accounts_AllowUsernameChange: boolean;
 	Accounts_CustomFields: string;
 	setUser: Function;
-	theme: string;
+	theme: TSupportedThemes;
 }
 
 export interface IAvatar {

app/definitions/index.ts

@@ -2,7 +2,7 @@ import { RouteProp } from '@react-navigation/native';
 import { StackNavigationProp } from '@react-navigation/stack';
 import { Dispatch } from 'redux';
 
-import { TColors } from '../theme';
+import { TColors, TSupportedThemes } from '../theme';
 
 export * from './IAttachment';
 export * from './INotification';
@@ -36,7 +36,7 @@ export interface IBaseScreen<T extends Record<string, object | undefined>, S ext
 	dispatch: Dispatch;
 	isMasterDetail: boolean;
 	// TODO: remove after migrating all Class components
-	theme: string;
+	theme: TSupportedThemes;
 	colors: TColors;
 }
 

app/ee/omnichannel/views/QueueListView.tsx

@@ -9,7 +9,7 @@ import I18n from '../../../i18n';
 import RoomItem, { ROW_HEIGHT } from '../../../presentation/RoomItem';
 import { isIOS, isTablet } from '../../../utils/deviceInfo';
 import { getUserSelector } from '../../../selectors/login';
-import { withTheme } from '../../../theme';
+import { TSupportedThemes, withTheme } from '../../../theme';
 import { withDimensions } from '../../../dimensions';
 import SafeAreaView from '../../../containers/SafeAreaView';
 import StatusBar from '../../../containers/StatusBar';
@@ -42,7 +42,7 @@ interface IQueueListView extends INavigationOptions {
 	queued: IOmnichannelRoom[];
 	server: string;
 	useRealName?: TSettingsValues;
-	theme: string;
+	theme: TSupportedThemes;
 	showAvatar: any;
 	displayMode: DisplayMode;
 }

app/lib/constants/colors.ts

@@ -175,4 +175,4 @@ export const colors = {
 	}
 };
 
-export const themes: any = colors;
+export const themes = colors;

app/presentation/ImageViewer/ImageViewer.android.tsx

@@ -5,6 +5,7 @@ import Animated, { EasingNode } from 'react-native-reanimated';
 
 import { ImageComponent } from './ImageComponent';
 import { themes } from '../../lib/constants';
+import { TSupportedThemes } from '../../theme';
 
 const styles = StyleSheet.create({
 	flex: {
@@ -226,7 +227,7 @@ interface IImageViewerProps {
 	uri: string;
 	width: number;
 	height: number;
-	theme: string;
+	theme: TSupportedThemes;
 	imageComponentType: string;
 }
 

app/presentation/ImageViewer/ImageViewer.tsx

@@ -3,6 +3,7 @@ import { ScrollView, StyleSheet } from 'react-native';
 
 import { ImageComponent } from './ImageComponent';
 import { themes } from '../../lib/constants';
+import { TSupportedThemes } from '../../theme';
 
 const styles = StyleSheet.create({
 	scrollContent: {
@@ -19,7 +20,7 @@ interface IImageViewer {
 	imageComponentType?: string;
 	width: number;
 	height: number;
-	theme: string;
+	theme: TSupportedThemes;
 	onLoadEnd?: () => void;
 }
 

app/presentation/RoomItem/Actions.tsx

@@ -6,9 +6,10 @@ import { isRTL } from '../../i18n';
 import { CustomIcon } from '../../lib/Icons';
 import { DisplayMode, themes } from '../../lib/constants';
 import styles, { ACTION_WIDTH, LONG_SWIPE, ROW_HEIGHT_CONDENSED } from './styles';
+import { TSupportedThemes } from '../../theme';
 
 interface ILeftActions {
-	theme: string;
+	theme: TSupportedThemes;
 	transX: any;
 	isRead: boolean;
 	width: number;
@@ -17,7 +18,7 @@ interface ILeftActions {
 }
 
 interface IRightActions {
-	theme: string;
+	theme: TSupportedThemes;
 	transX: any;
 	favorite: boolean;
 	width: number;

app/presentation/RoomItem/LastMessage.tsx

@@ -5,9 +5,10 @@ import I18n from '../../i18n';
 import styles from './styles';
 import { MarkdownPreview } from '../../containers/markdown';
 import { E2E_MESSAGE_TYPE, E2E_STATUS, themes } from '../../lib/constants';
+import { TSupportedThemes } from '../../theme';
 
 interface ILastMessage {
-	theme: string;
+	theme: TSupportedThemes;
 	lastMessage: {
 		u: any;
 		pinned: boolean;

app/presentation/RoomItem/RoomItem.tsx

@@ -13,6 +13,7 @@ import Tag from './Tag';
 import I18n from '../../i18n';
 import { DisplayMode } from '../../lib/constants';
 import { TUserStatus } from '../../definitions';
+import { TSupportedThemes } from '../../theme';
 
 interface IRoomItem {
 	rid: string;
@@ -27,7 +28,7 @@ interface IRoomItem {
 	width: number;
 	status: TUserStatus;
 	useRealName: boolean;
-	theme: string;
+	theme: TSupportedThemes;
 	isFocused: boolean;
 	isGroupChat: boolean;
 	isRead: boolean;
@@ -137,7 +138,7 @@ const RoomItem = ({
 				<>
 					<View style={styles.titleContainer}>
 						{showAvatar ? (
-							<TypeIcon type={type} prid={prid} status={status} isGroupChat={isGroupChat} theme={theme} teamMain={teamMain} />
+							<TypeIcon type={type} prid={prid} status={status} isGroupChat={isGroupChat} teamMain={teamMain} />
 						) : null}
 						<Title name={name} theme={theme} hideUnreadStatus={hideUnreadStatus} alert={alert} />
 						{autoJoin ? <Tag testID='auto-join-tag' name={I18n.t('Auto-join')} /> : null}
@@ -170,7 +171,6 @@ const RoomItem = ({
 						prid={prid}
 						status={status}
 						isGroupChat={isGroupChat}
-						theme={theme}
 						teamMain={teamMain}
 						size={22}
 						style={{ marginRight: 8 }}

app/presentation/RoomItem/Tag.tsx

@@ -11,7 +11,7 @@ interface ITag {
 }
 
 const Tag = React.memo(({ name, testID }: ITag) => {
-	const { theme }: any = useTheme();
+	const { theme } = useTheme();
 
 	return (
 		<View style={[styles.tagContainer, { backgroundColor: themes[theme].borderColor }]}>

app/presentation/RoomItem/Title.tsx

@@ -3,10 +3,11 @@ import { Text } from 'react-native';
 
 import styles from './styles';
 import { themes } from '../../lib/constants';
+import { TSupportedThemes } from '../../theme';
 
 interface ITitle {
 	name: string;
-	theme: string;
+	theme: TSupportedThemes;
 	hideUnreadStatus: boolean;
 	alert: boolean;
 }

app/presentation/RoomItem/Touchable.tsx

@@ -7,6 +7,7 @@ import { ACTION_WIDTH, LONG_SWIPE, SMALL_SWIPE } from './styles';
 import { isRTL } from '../../i18n';
 import { themes } from '../../lib/constants';
 import { LeftActions, RightActions } from './Actions';
+import { TSupportedThemes } from '../../theme';
 
 interface ITouchableProps {
 	children: JSX.Element;
@@ -21,7 +22,7 @@ interface ITouchableProps {
 	toggleFav: Function;
 	toggleRead: Function;
 	hideChannel: Function;
-	theme: string;
+	theme: TSupportedThemes;
 	isFocused: boolean;
 	swipeEnabled: boolean;
 	displayMode: string;

app/presentation/RoomItem/TypeIcon.tsx

@@ -9,7 +9,6 @@ interface ITypeIcon {
 	prid: string;
 	isGroupChat: boolean;
 	teamMain: boolean;
-	theme?: string;
 	size?: number;
 	style?: object;
 }

app/presentation/RoomItem/UpdatedAt.tsx

@@ -4,10 +4,11 @@ import { Text } from 'react-native';
 import styles from './styles';
 import { themes } from '../../lib/constants';
 import { capitalize } from '../../utils/room';
+import { TSupportedThemes } from '../../theme';
 
 interface IUpdatedAt {
 	date: string;
-	theme: string;
+	theme: TSupportedThemes;
 	hideUnreadStatus: boolean;
 	alert: boolean;
 }

app/presentation/RoomItem/Wrapper.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { View } from 'react-native';
 
 import { DisplayMode, themes } from '../../lib/constants';
+import { TSupportedThemes } from '../../theme';
 import IconOrAvatar from './IconOrAvatar';
 import styles from './styles';
 
@@ -10,7 +11,7 @@ interface IWrapper {
 	avatar: string;
 	avatarSize: number;
 	type: string;
-	theme: string;
+	theme: TSupportedThemes;
 	rid: string;
 	children: JSX.Element;
 	displayMode: string;

app/presentation/RoomItem/index.tsx

@@ -6,6 +6,7 @@ import { ROW_HEIGHT, ROW_HEIGHT_CONDENSED } from './styles';
 import { formatDate } from '../../utils/room';
 import RoomItem from './RoomItem';
 import { TUserStatus } from '../../definitions';
+import { TSupportedThemes } from '../../theme';
 
 export { ROW_HEIGHT, ROW_HEIGHT_CONDENSED };
 interface IRoomItemContainerProps {
@@ -24,7 +25,7 @@ interface IRoomItemContainerProps {
 	useRealName: boolean;
 	getUserPresence: Function;
 	connected: boolean;
-	theme: string;
+	theme: TSupportedThemes;
 	isFocused: boolean;
 	getRoomTitle: Function;
 	getRoomAvatar: Function;

app/presentation/TextInput.tsx

@@ -3,6 +3,7 @@ import { I18nManager, StyleProp, StyleSheet, TextInput, TextStyle } from 'react-
 
 import { IRCTextInputProps } from '../containers/TextInput';
 import { themes } from '../lib/constants';
+import { TSupportedThemes } from '../theme';
 
 const styles = StyleSheet.create({
 	input: {
@@ -12,7 +13,7 @@ const styles = StyleSheet.create({
 
 export interface IThemedTextInput extends IRCTextInputProps {
 	style: StyleProp<TextStyle>;
-	theme: string;
+	theme: TSupportedThemes;
 }
 
 const ThemedTextInput = React.forwardRef<TextInput, IThemedTextInput>(({ style, theme, ...props }, ref) => (

app/presentation/UnreadBadge/getUnreadStyle.ts

@@ -1,17 +1,36 @@
 import { themes } from '../../lib/constants';
+import { TSupportedThemes } from '../../theme';
 
-export const getUnreadStyle = ({ unread, userMentions, groupMentions, theme, tunread, tunreadUser, tunreadGroup }: any) => {
+interface IGetUnreadStyle {
+	unread?: number;
+	userMentions?: number;
+	groupMentions?: number;
+	theme: TSupportedThemes;
+	tunread?: [];
+	tunreadUser?: [];
+	tunreadGroup?: [];
+}
+
+export const getUnreadStyle = ({
+	unread,
+	userMentions,
+	groupMentions,
+	theme,
+	tunread,
+	tunreadUser,
+	tunreadGroup
+}: IGetUnreadStyle) => {
 	if ((!unread || unread <= 0) && !tunread?.length) {
 		return {};
 	}
 
 	let backgroundColor = themes[theme].unreadColor;
 	const color = themes[theme].buttonText;
-	if (userMentions > 0 || tunreadUser?.length) {
+	if ((userMentions && userMentions > 0) || tunreadUser?.length) {
 		backgroundColor = themes[theme].mentionMeColor;
-	} else if (groupMentions > 0 || tunreadGroup?.length) {
+	} else if ((groupMentions && groupMentions > 0) || tunreadGroup?.length) {
 		backgroundColor = themes[theme].mentionGroupColor;
-	} else if (tunread?.length > 0) {
+	} else if (tunread && tunread?.length > 0) {
 		backgroundColor = themes[theme].tunreadColor;
 	}
 

app/presentation/UnreadBadge/index.tsx

@@ -3,7 +3,7 @@ import { StyleSheet, Text, View, ViewStyle } from 'react-native';
 
 import sharedStyles from '../../views/Styles';
 import { getUnreadStyle } from './getUnreadStyle';
-import { withTheme } from '../../theme';
+import { useTheme } from '../../theme';
 
 const styles = StyleSheet.create({
 	unreadNumberContainerNormal: {
@@ -30,7 +30,6 @@ const styles = StyleSheet.create({
 });
 
 interface IUnreadBadge {
-	theme?: string;
 	unread?: number;
 	userMentions?: number;
 	groupMentions?: number;
@@ -42,10 +41,12 @@ interface IUnreadBadge {
 }
 
 const UnreadBadge = React.memo(
-	({ theme, unread, userMentions, groupMentions, style, tunread, tunreadUser, tunreadGroup, small }: IUnreadBadge) => {
+	({ unread, userMentions, groupMentions, style, tunread, tunreadUser, tunreadGroup, small }: IUnreadBadge) => {
+		const { theme } = useTheme();
 		if ((!unread || unread <= 0) && !tunread?.length) {
 			return null;
 		}
+
 		const { backgroundColor, color } = getUnreadStyle({
 			theme,
 			unread,
@@ -88,4 +89,4 @@ const UnreadBadge = React.memo(
 	}
 );
 
-export default withTheme(UnreadBadge);
+export default UnreadBadge;

app/stacks/MasterDetailStack/ModalContainer.tsx

@@ -5,11 +5,12 @@ import { NavigationContainerProps } from '@react-navigation/core';
 
 import sharedStyles from '../../views/Styles';
 import { themes } from '../../lib/constants';
+import { TSupportedThemes } from '../../theme';
 
 interface IModalContainer extends NavigationContainerProps {
 	navigation: StackNavigationProp<any>;
 	children: React.ReactNode;
-	theme: string;
+	theme: TSupportedThemes;
 }
 
 const styles = StyleSheet.create({

app/theme.tsx

@@ -9,7 +9,7 @@ export type TSupportedThemes = keyof typeof colors;
 export type TColors = typeof colors[TSupportedThemes];
 
 interface IThemeContextProps {
-	theme: string;
+	theme: TSupportedThemes;
 	themePreferences?: IThemePreference;
 	setTheme?: (newTheme?: {}) => void;
 	colors: TColors;

app/utils/navigation/index.ts

@@ -2,6 +2,7 @@ import { StyleSheet } from 'react-native';
 import { DarkTheme, DefaultTheme } from '@react-navigation/native';
 
 import { themes } from '../../lib/constants';
+import { TSupportedThemes } from '../../theme';
 
 export * from './animations';
 
@@ -15,13 +16,13 @@ export const cardStyle = {
 	backgroundColor: 'rgba(0,0,0,0)'
 };
 
-export const borderBottom: any = (theme: any) => ({
+export const borderBottom: any = (theme: TSupportedThemes) => ({
 	borderBottomWidth: StyleSheet.hairlineWidth,
 	borderBottomColor: themes[theme].headerBorder,
 	elevation: 0
 });
 
-export const themedHeader = (theme: any) => ({
+export const themedHeader = (theme: TSupportedThemes) => ({
 	headerStyle: {
 		...borderBottom(theme),
 		backgroundColor: themes[theme].headerBackground
@@ -30,7 +31,7 @@ export const themedHeader = (theme: any) => ({
 	headerTitleStyle: { color: themes[theme].headerTitleColor }
 });
 
-export const navigationTheme = (theme: any) => {
+export const navigationTheme = (theme: TSupportedThemes) => {
 	const defaultNavTheme = theme === 'light' ? DefaultTheme : DarkTheme;
 
 	return {

app/utils/openLink.ts

@@ -3,6 +3,7 @@ import * as WebBrowser from 'expo-web-browser';
 import parse from 'url-parse';
 
 import { themes } from '../lib/constants';
+import { TSupportedThemes } from '../theme';
 import UserPreferences from '../lib/methods/userPreferences';
 
 export const DEFAULT_BROWSER_KEY = 'DEFAULT_BROWSER_KEY';
@@ -35,7 +36,7 @@ const appSchemeURL = (url: string, browser: string): string => {
 	return schemeUrl;
 };
 
-const openLink = async (url: string, theme = 'light'): Promise<void> => {
+const openLink = async (url: string, theme: TSupportedThemes = 'light'): Promise<void> => {
 	try {
 		const browser = UserPreferences.getString(DEFAULT_BROWSER_KEY);
 

app/utils/room.ts

@@ -4,6 +4,7 @@ import { themes } from '../lib/constants';
 import I18n from '../i18n';
 import { IAttachment } from '../definitions/IAttachment';
 import { SubscriptionType, TSubscriptionModel } from '../definitions/ISubscription';
+import { TSupportedThemes } from '../theme';
 
 export const isBlocked = (room: TSubscriptionModel): boolean => {
 	if (room) {
@@ -46,7 +47,7 @@ export const getBadgeColor = ({
 	// TODO: Refactor when migrate model folder
 	subscription: any;
 	messageId: string;
-	theme: string;
+	theme: TSupportedThemes;
 }): string | undefined => {
 	if (subscription?.tunreadUser?.includes(messageId)) {
 		return themes[theme].mentionMeColor;

app/utils/touch.tsx

@@ -1,11 +1,12 @@
 import React from 'react';
 import { RectButton, RectButtonProps } from 'react-native-gesture-handler';
 
+import { TSupportedThemes } from '../theme';
 import { themes } from '../lib/constants';
 
 interface ITouchProps extends RectButtonProps {
 	children: React.ReactNode;
-	theme: string;
+	theme: TSupportedThemes;
 	accessibilityLabel?: string;
 	testID?: string;
 }

app/views/AddExistingChannelView.tsx

@@ -14,7 +14,7 @@ import SearchBox from '../containers/SearchBox';
 import * as HeaderButton from '../containers/HeaderButton';
 import StatusBar from '../containers/StatusBar';
 import { themes } from '../lib/constants';
-import { withTheme } from '../theme';
+import { TSupportedThemes, withTheme } from '../theme';
 import SafeAreaView from '../containers/SafeAreaView';
 import Loading from '../containers/Loading';
 import { animateNextTransition } from '../utils/layoutAnimation';
@@ -34,7 +34,7 @@ interface IAddExistingChannelViewState {
 interface IAddExistingChannelViewProps {
 	navigation: StackNavigationProp<ChatsStackParamList, 'AddExistingChannelView'>;
 	route: RouteProp<ChatsStackParamList, 'AddExistingChannelView'>;
-	theme: string;
+	theme: TSupportedThemes;
 	isMasterDetail: boolean;
 	addTeamChannelPermission: string[];
 }

app/views/AttachmentView.tsx

@@ -13,7 +13,7 @@ import { withSafeAreaInsets } from 'react-native-safe-area-context';
 import { LISTENER } from '../containers/Toast';
 import EventEmitter from '../utils/events';
 import I18n from '../i18n';
-import { withTheme } from '../theme';
+import { TSupportedThemes, withTheme } from '../theme';
 import { ImageViewer } from '../presentation/ImageViewer';
 import { themes } from '../lib/constants';
 import RCActivityIndicator from '../containers/ActivityIndicator';
@@ -41,7 +41,7 @@ interface IAttachmentViewState {
 interface IAttachmentViewProps {
 	navigation: StackNavigationProp<InsideStackParamList, 'AttachmentView'>;
 	route: RouteProp<InsideStackParamList, 'AttachmentView'>;
-	theme: string;
+	theme: TSupportedThemes;
 	baseUrl: string;
 	width: number;
 	height: number;

app/views/AuthLoadingView.tsx

@@ -4,7 +4,7 @@ import { connect } from 'react-redux';
 
 import I18n from '../i18n';
 import StatusBar from '../containers/StatusBar';
-import { withTheme } from '../theme';
+import { TSupportedThemes, withTheme } from '../theme';
 import { themes } from '../lib/constants';
 import sharedStyles from './Styles';
 
@@ -23,7 +23,7 @@ const styles = StyleSheet.create({
 });
 
 interface IAuthLoadingView {
-	theme: string;
+	theme: TSupportedThemes;
 	text: string;
 }
 

app/views/AuthenticationWebView.tsx

@@ -11,7 +11,7 @@ import RocketChat from '../lib/rocketchat';
 import { isIOS } from '../utils/deviceInfo';
 import StatusBar from '../containers/StatusBar';
 import ActivityIndicator from '../containers/ActivityIndicator';
-import { withTheme } from '../theme';
+import { TSupportedThemes, withTheme } from '../theme';
 import debounce from '../utils/debounce';
 import * as HeaderButton from '../containers/HeaderButton';
 
@@ -52,7 +52,7 @@ interface IAuthenticationWebView extends INavigationOption {
 	server: string;
 	Accounts_Iframe_api_url: string;
 	Accounts_Iframe_api_method: string;
-	theme: string;
+	theme: TSupportedThemes;
 }
 
 interface IState {

app/views/AutoTranslateView/index.tsx

@@ -8,7 +8,7 @@ import I18n from '../../i18n';
 import StatusBar from '../../containers/StatusBar';
 import * as List from '../../containers/List';
 import { SWITCH_TRACK_COLOR, themes } from '../../lib/constants';
-import { withTheme } from '../../theme';
+import { TSupportedThemes, withTheme } from '../../theme';
 import SafeAreaView from '../../containers/SafeAreaView';
 import { events, logEvent } from '../../utils/log';
 import { ISubscription } from '../../definitions/ISubscription';
@@ -21,7 +21,7 @@ const styles = StyleSheet.create({
 
 interface IAutoTranslateViewProps {
 	route: RouteProp<ChatsStackParamList, 'AutoTranslateView'>;
-	theme: string;
+	theme: TSupportedThemes;
 }
 
 class AutoTranslateView extends React.Component<IAutoTranslateViewProps, any> {

app/views/CannedResponseDetail.tsx

@@ -8,7 +8,7 @@ import I18n from '../i18n';
 import SafeAreaView from '../containers/SafeAreaView';
 import StatusBar from '../containers/StatusBar';
 import Button from '../containers/Button';
-import { useTheme } from '../theme';
+import { TSupportedThemes, useTheme } from '../theme';
 import RocketChat from '../lib/rocketchat';
 import Navigation from '../lib/navigation/appNavigation';
 import { goRoom } from '../utils/goRoom';
@@ -74,7 +74,7 @@ const styles = StyleSheet.create({
 interface IItem {
 	label: string;
 	content?: string;
-	theme: string;
+	theme: TSupportedThemes;
 	testID?: string;
 }
 

app/views/CannedResponsesListView/CannedResponseItem.tsx

@@ -2,13 +2,14 @@ import React from 'react';
 import { View, Text } from 'react-native';
 import Touchable from 'react-native-platform-touchable';
 
+import { TSupportedThemes } from '../../theme';
 import { themes } from '../../lib/constants';
 import Button from '../../containers/Button';
 import I18n from '../../i18n';
 import styles from './styles';
 
 interface ICannedResponseItem {
-	theme: string;
+	theme: TSupportedThemes;
 	onPressDetail: () => void;
 	shortcut: string;
 	scope: string;

app/views/CannedResponsesListView/Dropdown/index.tsx

@@ -4,7 +4,7 @@ import { withSafeAreaInsets } from 'react-native-safe-area-context';
 
 import styles from '../styles';
 import { themes } from '../../../lib/constants';
-import { withTheme } from '../../../theme';
+import { TSupportedThemes, withTheme } from '../../../theme';
 import * as List from '../../../containers/List';
 import { IDepartment } from '../../../definitions/ICannedResponse';
 import DropdownItemFilter from './DropdownItemFilter';
@@ -14,7 +14,7 @@ import { ROW_HEIGHT } from './DropdownItem';
 const ANIMATION_DURATION = 200;
 
 interface IDropdownProps {
-	theme?: string;
+	theme?: TSupportedThemes;
 	currentDepartment: IDepartment;
 	onClose: () => void;
 	onDepartmentSelected: (value: IDepartment) => void;

app/views/CreateDiscussionView/interfaces.ts

@@ -1,6 +1,7 @@
 import { NewMessageStackParamList } from '../../stacks/types';
 import { SubscriptionType } from '../../definitions/ISubscription';
 import { IBaseScreen } from '../../definitions';
+import { TSupportedThemes } from '../../theme';
 
 export interface IResult {
 	rid: string;
@@ -36,7 +37,7 @@ export interface ICreateDiscussionViewSelectChannel {
 	onChannelSelect: Function;
 	blockUnauthenticatedAccess: boolean;
 	serverVersion: string;
-	theme: string;
+	theme: TSupportedThemes;
 }
 
 export interface ICreateDiscussionViewSelectUsers {
@@ -47,5 +48,5 @@ export interface ICreateDiscussionViewSelectUsers {
 	onUserSelect: Function;
 	blockUnauthenticatedAccess: boolean;
 	serverVersion: string;
-	theme: string;
+	theme: TSupportedThemes;
 }

app/views/DefaultBrowserView.tsx

@@ -3,7 +3,7 @@ import { StackNavigationOptions } from '@react-navigation/stack';
 import { FlatList, Linking } from 'react-native';
 
 import I18n from '../i18n';
-import { withTheme } from '../theme';
+import { TSupportedThemes, withTheme } from '../theme';
 import { themes } from '../lib/constants';
 import StatusBar from '../containers/StatusBar';
 import * as List from '../containers/List';
@@ -52,7 +52,7 @@ interface IDefaultBrowserViewState {
 }
 
 interface IDefaultBrowserViewProps {
-	theme: string;
+	theme: TSupportedThemes;
 }
 
 class DefaultBrowserView extends React.Component<IDefaultBrowserViewProps, IDefaultBrowserViewState> {

app/views/DirectoryView/Options.tsx

@@ -7,6 +7,7 @@ import Check from '../../containers/Check';
 import I18n from '../../i18n';
 import { SWITCH_TRACK_COLOR, themes } from '../../lib/constants';
 import styles from './styles';
+import { TSupportedThemes } from '../../theme';
 
 const ANIMATION_DURATION = 200;
 const ANIMATION_PROPS = {
@@ -22,7 +23,7 @@ interface IDirectoryOptionsProps {
 	close: Function;
 	changeType: Function;
 	toggleWorkspace(): void;
-	theme: string;
+	theme: TSupportedThemes;
 }
 
 export default class DirectoryOptions extends PureComponent<IDirectoryOptionsProps, any> {

app/views/DirectoryView/index.tsx

@@ -17,7 +17,7 @@ import ActivityIndicator from '../../containers/ActivityIndicator';
 import * as HeaderButton from '../../containers/HeaderButton';
 import debounce from '../../utils/debounce';
 import log, { events, logEvent } from '../../utils/log';
-import { withTheme } from '../../theme';
+import { TSupportedThemes, withTheme } from '../../theme';
 import { themes } from '../../lib/constants';
 import { getUserSelector } from '../../selectors/login';
 import SafeAreaView from '../../containers/SafeAreaView';
@@ -33,7 +33,7 @@ interface IDirectoryViewProps {
 		id: string;
 		token: string;
 	};
-	theme: string;
+	theme: TSupportedThemes;
 	directoryDefaultView: string;
 	isMasterDetail: boolean;
 }

app/views/E2EEncryptionSecurityView.tsx

@@ -8,7 +8,7 @@ import StatusBar from '../containers/StatusBar';
 import * as List from '../containers/List';
 import I18n from '../i18n';
 import log, { events, logEvent } from '../utils/log';
-import { withTheme } from '../theme';
+import { TSupportedThemes, withTheme } from '../theme';
 import SafeAreaView from '../containers/SafeAreaView';
 import TextInput from '../containers/TextInput';
 import Button from '../containers/Button';
@@ -48,7 +48,7 @@ interface IE2EEncryptionSecurityViewState {
 }
 
 interface IE2EEncryptionSecurityViewProps {
-	theme: string;
+	theme?: TSupportedThemes;
 	user: IUser;
 	server: string;
 	encryptionEnabled: boolean;
@@ -127,10 +127,10 @@ class E2EEncryptionSecurityView extends React.Component<IE2EEncryptionSecurityVi
 		return (
 			<>
 				<List.Section>
-					<Text style={[styles.title, { color: themes[theme].titleColor }]}>
+					<Text style={[styles.title, { color: themes[theme!].headerTitleColor }]}>
 						{I18n.t('E2E_encryption_change_password_title')}
 					</Text>
-					<Text style={[styles.description, { color: themes[theme].bodyText }]}>
+					<Text style={[styles.description, { color: themes[theme!].bodyText }]}>
 						{I18n.t('E2E_encryption_change_password_description')}
 					</Text>
 					<TextInput
@@ -161,15 +161,17 @@ class E2EEncryptionSecurityView extends React.Component<IE2EEncryptionSecurityVi
 	render() {
 		const { theme } = this.props;
 		return (
-			<SafeAreaView testID='e2e-encryption-security-view' style={{ backgroundColor: themes[theme].backgroundColor }}>
+			<SafeAreaView testID='e2e-encryption-security-view' style={{ backgroundColor: themes[theme!].backgroundColor }}>
 				<StatusBar />
 				<List.Container>
 					<View style={styles.container}>
 						{this.renderChangePassword()}
 
 						<List.Section>
-							<Text style={[styles.title, { color: themes[theme].titleColor }]}>{I18n.t('E2E_encryption_reset_title')}</Text>
-							<Text style={[styles.description, { color: themes[theme].bodyText }]}>
+							<Text style={[styles.title, { color: themes[theme!].headerTitleColor }]}>
+								{I18n.t('E2E_encryption_reset_title')}
+							</Text>
+							<Text style={[styles.description, { color: themes[theme!].bodyText }]}>
 								{I18n.t('E2E_encryption_reset_description')}
 							</Text>
 							<Button
@@ -177,7 +179,7 @@ class E2EEncryptionSecurityView extends React.Component<IE2EEncryptionSecurityVi
 								title={I18n.t('E2E_encryption_reset_button')}
 								theme={theme}
 								type='secondary'
-								backgroundColor={themes[theme].chatComponentBackground}
+								backgroundColor={themes[theme!].chatComponentBackground}
 								testID='e2e-encryption-security-view-reset-key'
 							/>
 						</List.Section>

app/views/E2EHowItWorksView.tsx

@@ -7,7 +7,7 @@ import SafeAreaView from '../containers/SafeAreaView';
 import { themes } from '../lib/constants';
 import * as HeaderButton from '../containers/HeaderButton';
 import Markdown from '../containers/markdown';
-import { withTheme } from '../theme';
+import { TSupportedThemes, withTheme } from '../theme';
 import I18n from '../i18n';
 import { E2ESaveYourPasswordStackParamList } from '../stacks/types';
 
@@ -29,7 +29,7 @@ interface INavigation {
 }
 
 interface IE2EHowItWorksViewProps extends INavigation {
-	theme: string;
+	theme: TSupportedThemes;
 }
 
 class E2EHowItWorksView extends React.Component<IE2EHowItWorksViewProps, any> {

app/views/ForgotPasswordView.tsx

@@ -9,7 +9,7 @@ import { showErrorAlert } from '../utils/info';
 import isValidEmail from '../utils/isValidEmail';
 import I18n from '../i18n';
 import RocketChat from '../lib/rocketchat';
-import { withTheme } from '../theme';
+import { TSupportedThemes, withTheme } from '../theme';
 import { themes } from '../lib/constants';
 import FormContainer, { FormContainerInner } from '../containers/FormContainer';
 import { events, logEvent } from '../utils/log';
@@ -25,7 +25,7 @@ interface IForgotPasswordViewState {
 interface IForgotPasswordViewProps {
 	navigation: StackNavigationProp<OutsideParamList, 'ForgotPasswordView'>;
 	route: RouteProp<OutsideParamList, 'ForgotPasswordView'>;
-	theme: string;
+	theme: TSupportedThemes;
 }
 
 class ForgotPasswordView extends React.Component<IForgotPasswordViewProps, IForgotPasswordViewState> {

app/views/JitsiMeetView.tsx

@@ -11,7 +11,7 @@ import { getUserSelector } from '../selectors/login';
 import ActivityIndicator from '../containers/ActivityIndicator';
 import { events, logEvent } from '../utils/log';
 import { isAndroid, isIOS } from '../utils/deviceInfo';
-import { withTheme } from '../theme';
+import { TSupportedThemes, withTheme } from '../theme';
 import { InsideStackParamList } from '../stacks/types';
 import { IApplicationState, IUser } from '../definitions';
 
@@ -30,7 +30,7 @@ interface IJitsiMeetViewProps {
 	navigation: StackNavigationProp<InsideStackParamList, 'JitsiMeetView'>;
 	route: RouteProp<InsideStackParamList, 'JitsiMeetView'>;
 	baseUrl: string;
-	theme: string;
+	theme: TSupportedThemes;
 	user: IUser;
 }
 

app/views/LegalView.tsx

@@ -5,13 +5,13 @@ import { StackNavigationOptions } from '@react-navigation/stack';
 import I18n from '../i18n';
 import StatusBar from '../containers/StatusBar';
 import openLink from '../utils/openLink';
-import { withTheme } from '../theme';
+import { TSupportedThemes, withTheme } from '../theme';
 import SafeAreaView from '../containers/SafeAreaView';
 import * as List from '../containers/List';
 
 interface ILegalView {
 	server: string;
-	theme: string;
+	theme: TSupportedThemes;
 }
 
 class LegalView extends React.Component<ILegalView, any> {

app/views/LivechatEditView.tsx

@@ -5,7 +5,7 @@ import { ScrollView, StyleSheet, Text } from 'react-native';
 import { connect } from 'react-redux';
 import { BLOCK_CONTEXT } from '@rocket.chat/ui-kit';
 
-import { withTheme } from '../theme';
+import { TSupportedThemes, withTheme } from '../theme';
 import { themes } from '../lib/constants';
 import TextInput from '../containers/TextInput';
 import KeyboardView from '../presentation/KeyboardView';
@@ -47,7 +47,7 @@ interface ILivechatEditViewProps {
 	user: any;
 	navigation: StackNavigationProp<ChatsStackParamList, 'LivechatEditView'>;
 	route: RouteProp<ChatsStackParamList, 'LivechatEditView'>;
-	theme: string;
+	theme: TSupportedThemes;
 	editOmnichannelContact: string[] | undefined;
 	editLivechatRoomCustomfields: string[] | undefined;
 }

app/views/MarkdownTableView.tsx

@@ -6,12 +6,12 @@ import { RouteProp } from '@react-navigation/native';
 import I18n from '../i18n';
 import { isIOS } from '../utils/deviceInfo';
 import { themes } from '../lib/constants';
-import { withTheme } from '../theme';
+import { TSupportedThemes, withTheme } from '../theme';
 import { ChatsStackParamList } from '../stacks/types';
 
 interface IMarkdownTableViewProps {
 	route: RouteProp<ChatsStackParamList, 'MarkdownTableView'>;
-	theme: string;
+	theme: TSupportedThemes;
 }
 
 class MarkdownTableView extends React.Component<IMarkdownTableViewProps> {

app/views/MessagesView/index.tsx

@@ -13,7 +13,7 @@ import RocketChat from '../../lib/rocketchat';
 import StatusBar from '../../containers/StatusBar';
 import getFileUrlFromMessage from '../../lib/methods/helpers/getFileUrlFromMessage';
 import { themes } from '../../lib/constants';
-import { withTheme } from '../../theme';
+import { TSupportedThemes, withTheme } from '../../theme';
 import { getUserSelector } from '../../selectors/login';
 import { withActionSheet } from '../../containers/ActionSheet';
 import SafeAreaView from '../../containers/SafeAreaView';
@@ -38,7 +38,7 @@ interface IMessagesViewProps {
 	>;
 	route: RouteProp<ChatsStackParamList, 'MessagesView'>;
 	customEmojis: { [key: string]: IEmoji };
-	theme: string;
+	theme: TSupportedThemes;
 	showActionSheet: Function;
 	useRealName: boolean;
 	isMasterDetail: boolean;

app/views/ModalBlockView.tsx

@@ -5,7 +5,7 @@ import { RouteProp } from '@react-navigation/native';
 import { connect } from 'react-redux';
 import { KeyboardAwareScrollView } from '@codler/react-native-keyboard-aware-scroll-view';
 
-import { withTheme } from '../theme';
+import { TSupportedThemes, withTheme } from '../theme';
 import EventEmitter from '../utils/events';
 import { themes } from '../lib/constants';
 import * as HeaderButton from '../containers/HeaderButton';
@@ -53,7 +53,7 @@ interface IModalBlockViewState {
 interface IModalBlockViewProps {
 	navigation: StackNavigationProp<MasterDetailInsideStackParamList, 'ModalBlockView'>;
 	route: RouteProp<MasterDetailInsideStackParamList, 'ModalBlockView'>;
-	theme: string;
+	theme: TSupportedThemes;
 	language: string;
 	user: {
 		id: string;

app/views/NewServerView/ServerInput/Item.tsx

@@ -7,6 +7,7 @@ import { CustomIcon } from '../../../lib/Icons';
 import sharedStyles from '../../Styles';
 import Touch from '../../../utils/touch';
 import { TServerHistoryModel } from '../../../definitions/IServerHistory';
+import { TSupportedThemes } from '../../../theme';
 
 const styles = StyleSheet.create({
 	container: {
@@ -29,7 +30,7 @@ const styles = StyleSheet.create({
 
 interface IItem {
 	item: TServerHistoryModel;
-	theme: string;
+	theme: TSupportedThemes;
 	onPress(url: string): void;
 	onDelete(item: TServerHistoryModel): void;
 }

app/views/NewServerView/ServerInput/index.tsx

@@ -7,6 +7,7 @@ import { themes } from '../../../lib/constants';
 import I18n from '../../../i18n';
 import { TServerHistoryModel } from '../../../definitions/IServerHistory';
 import Item from './Item';
+import { TSupportedThemes } from '../../../theme';
 
 const styles = StyleSheet.create({
 	container: {
@@ -30,7 +31,7 @@ const styles = StyleSheet.create({
 
 interface IServerInput extends TextInputProps {
 	text: string;
-	theme: string;
+	theme: TSupportedThemes;
 	serversHistory: any[];
 	onSubmit(): void;
 	onDelete(item: TServerHistoryModel): void;

app/views/NotificationPreferencesView/index.tsx

@@ -11,7 +11,7 @@ import StatusBar from '../../containers/StatusBar';
 import * as List from '../../containers/List';
 import I18n from '../../i18n';
 import RocketChat from '../../lib/rocketchat';
-import { withTheme } from '../../theme';
+import { TSupportedThemes, withTheme } from '../../theme';
 import protectedFunction from '../../lib/methods/helpers/protectedFunction';
 import SafeAreaView from '../../containers/SafeAreaView';
 import log, { events, logEvent } from '../../utils/log';
@@ -30,7 +30,7 @@ const styles = StyleSheet.create({
 interface INotificationPreferencesView {
 	navigation: StackNavigationProp<ChatsStackParamList, 'NotificationPrefView'>;
 	route: RouteProp<ChatsStackParamList, 'NotificationPrefView'>;
-	theme: string;
+	theme: TSupportedThemes;
 }
 
 class NotificationPreferencesView extends React.Component<INotificationPreferencesView, any> {

app/views/PickerView.tsx

@@ -4,7 +4,7 @@ import { RouteProp } from '@react-navigation/native';
 import { FlatList, StyleSheet, Text, View } from 'react-native';
 
 import I18n from '../i18n';
-import { withTheme } from '../theme';
+import { TSupportedThemes, withTheme } from '../theme';
 import { themes } from '../lib/constants';
 import debounce from '../utils/debounce';
 import * as List from '../containers/List';
@@ -34,7 +34,7 @@ interface IItem {
 	item: IOptionsField;
 	selected: boolean;
 	onItemPress: () => void;
-	theme: string;
+	theme: TSupportedThemes;
 }
 
 interface IRenderSearch {
@@ -52,7 +52,7 @@ interface IPickerViewState {
 interface IPickerViewProps {
 	navigation: StackNavigationProp<ChatsStackParamList, 'PickerView'>;
 	route: RouteProp<ChatsStackParamList, 'PickerView'>;
-	theme: string;
+	theme: TSupportedThemes;
 }
 
 const Item = React.memo(({ item, selected, onItemPress, theme }: IItem) => (

app/views/ReadReceiptView/index.tsx

@@ -12,7 +12,7 @@ import * as HeaderButton from '../../containers/HeaderButton';
 import I18n from '../../i18n';
 import RocketChat from '../../lib/rocketchat';
 import StatusBar from '../../containers/StatusBar';
-import { withTheme } from '../../theme';
+import { TSupportedThemes, withTheme } from '../../theme';
 import { themes } from '../../lib/constants';
 import SafeAreaView from '../../containers/SafeAreaView';
 import styles from './styles';
@@ -32,7 +32,7 @@ interface INavigationOption {
 
 interface IReadReceiptViewProps extends INavigationOption {
 	Message_TimeAndDateFormat: string;
-	theme: string;
+	theme: TSupportedThemes;
 }
 
 class ReadReceiptView extends React.Component<IReadReceiptViewProps, IReadReceiptViewState> {

app/views/RoomInfoEditView/SwitchContainer.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Switch, Text, TextStyle, View, ViewStyle } from 'react-native';
 
+import { TSupportedThemes } from '../../theme';
 import { SWITCH_TRACK_COLOR, themes } from '../../lib/constants';
 import styles from './styles';
 
@@ -12,7 +13,7 @@ interface ISwitchContainer {
 	rightLabelPrimary?: string;
 	rightLabelSecondary?: string;
 	onValueChange: (value: any) => void;
-	theme: string;
+	theme: TSupportedThemes;
 	testID: string;
 	labelContainerStyle?: ViewStyle;
 	leftLabelStyle?: TextStyle;

app/views/RoomInfoEditView/index.tsx

@@ -26,7 +26,7 @@ import KeyboardView from '../../presentation/KeyboardView';
 import { TSupportedPermissions } from '../../reducers/permissions';
 import { ModalStackParamList } from '../../stacks/MasterDetailStack/types';
 import { ChatsStackParamList } from '../../stacks/types';
-import { withTheme } from '../../theme';
+import { TSupportedThemes, withTheme } from '../../theme';
 import EventEmitter from '../../utils/events';
 import { showConfirmationAlert, showErrorAlert } from '../../utils/info';
 import log, { events, logEvent } from '../../utils/log';
@@ -62,7 +62,7 @@ interface IRoomInfoEditViewState {
 interface IRoomInfoEditViewProps extends IBaseScreen<ChatsStackParamList | ModalStackParamList, 'RoomInfoEditView'> {
 	serverVersion?: string;
 	encryptionEnabled: boolean;
-	theme: string;
+	theme: TSupportedThemes;
 	setReadOnlyPermission: string[];
 	setReactWhenReadOnlyPermission: string[];
 	archiveRoomPermission: string[];

app/views/RoomInfoView/Livechat.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { StyleSheet, Text } from 'react-native';
 
 import RocketChat from '../../lib/rocketchat';
-import { useTheme } from '../../theme';
+import { TSupportedThemes, useTheme } from '../../theme';
 import sharedStyles from '../Styles';
 import { themes } from '../../lib/constants';
 import I18n from '../../i18n';
@@ -21,7 +21,7 @@ const styles = StyleSheet.create({
 	}
 });
 
-const Title = ({ title, theme }: { title: string; theme: string }) => (
+const Title = ({ title, theme }: { title: string; theme: TSupportedThemes }) => (
 	<Text style={[styles.title, { color: themes[theme].titleText }]}>{title}</Text>
 );
 

app/views/RoomInfoView/index.tsx

@@ -19,7 +19,7 @@ import * as HeaderButton from '../../containers/HeaderButton';
 import StatusBar from '../../containers/StatusBar';
 import log, { events, logEvent } from '../../utils/log';
 import { themes } from '../../lib/constants';
-import { withTheme } from '../../theme';
+import { TSupportedThemes, withTheme } from '../../theme';
 import { MarkdownPreview } from '../../containers/markdown';
 import { LISTENER } from '../../containers/Toast';
 import EventEmitter from '../../utils/events';
@@ -41,7 +41,7 @@ interface IGetRoomTitle {
 	name?: string;
 	username: string;
 	statusText?: string;
-	theme: string;
+	theme: TSupportedThemes;
 }
 
 const getRoomTitle = ({ room, type, name, username, statusText, theme }: IGetRoomTitle) =>
@@ -82,7 +82,7 @@ interface IRoomInfoViewProps {
 	>;
 	route: RouteProp<ChatsStackParamList, 'RoomInfoView'>;
 	rooms: string[];
-	theme: string;
+	theme: TSupportedThemes;
 	isMasterDetail: boolean;
 	jitsiEnabled: boolean;
 	editRoomPermission?: string[];

app/views/RoomMembersView/index.tsx

@@ -22,7 +22,7 @@ import RocketChat from '../../lib/rocketchat';
 import UserItem from '../../containers/UserItem';
 import { getUserSelector } from '../../selectors/login';
 import { ModalStackParamList } from '../../stacks/MasterDetailStack/types';
-import { withTheme } from '../../theme';
+import { TSupportedThemes, withTheme } from '../../theme';
 import EventEmitter from '../../utils/events';
 import { goRoom, TGoRoomItem } from '../../utils/goRoom';
 import { showConfirmationAlert, showErrorAlert } from '../../utils/info';
@@ -44,7 +44,7 @@ interface IRoomMembersViewProps extends IBaseScreen<ModalStackParamList, 'RoomMe
 		roles: string[];
 	};
 	showActionSheet: (params: any) => {}; // TODO: this work?
-	theme: string;
+	theme: TSupportedThemes;
 	isMasterDetail: boolean;
 	useRealName: boolean;
 	muteUserPermission: string[];

app/views/RoomView/JoinCode.tsx

@@ -10,6 +10,7 @@ import RocketChat from '../../lib/rocketchat';
 import sharedStyles from '../Styles';
 import { themes } from '../../lib/constants';
 import { IApplicationState } from '../../definitions';
+import { TSupportedThemes } from '../../theme';
 
 const styles = StyleSheet.create({
 	container: {
@@ -46,7 +47,7 @@ export interface IJoinCodeProps {
 	t: string;
 	onJoin: Function;
 	isMasterDetail: boolean;
-	theme: string;
+	theme: TSupportedThemes;
 }
 
 const JoinCode = React.memo(

app/views/RoomView/LeftButtons.tsx

@@ -5,6 +5,7 @@ import { HeaderBackButton, StackNavigationProp } from '@react-navigation/stack';
 import { themes } from '../../lib/constants';
 import Avatar from '../../containers/Avatar';
 import { ChatsStackParamList } from '../../stacks/types';
+import { TSupportedThemes } from '../../theme';
 
 const styles = StyleSheet.create({
 	avatar: {
@@ -22,7 +23,7 @@ interface ILeftButtonsProps {
 	token?: string;
 	title?: string;
 	t: string;
-	theme: string;
+	theme: TSupportedThemes;
 	goRoomActionsView: Function;
 	isMasterDetail: boolean;
 }

app/views/RoomView/List/index.tsx

@@ -6,6 +6,7 @@ import { FlatListProps, RefreshControl, ViewToken } from 'react-native';
 import { event, Value } from 'react-native-reanimated';
 import { Observable, Subscription } from 'rxjs';
 
+import { TSupportedThemes } from '../../../theme';
 import { themes } from '../../../lib/constants';
 import ActivityIndicator from '../../../containers/ActivityIndicator';
 import { TAnyMessageModel, TMessageModel, TThreadMessageModel, TThreadModel } from '../../../definitions';
@@ -39,7 +40,7 @@ export interface IListContainerProps {
 	renderRow: Function;
 	rid: string;
 	tmid?: string;
-	theme: string;
+	theme: TSupportedThemes;
 	loading: boolean;
 	listRef: React.RefObject<IListProps>;
 	hideSystemMessages?: string[];