From a36bb292cf7a2600432953f1abaa64bac1a3e60e Mon Sep 17 00:00:00 2001
From: GleidsonDaniel <gleidson10daniel@hotmail.com>
Date: Mon, 18 Mar 2024 13:27:25 -0300
Subject: [PATCH] chore: background color

---
 app/containers/ActionSheet/ActionSheet.tsx    |   2 +-
 .../ActionSheet/BottomSheetContent.tsx        |   2 +-
 app/containers/ActionSheet/Item.tsx           |   6 +-
 app/containers/DirectoryItem/index.tsx        |   2 +-
 app/containers/FormContainer.tsx              |   4 +-
 .../IncomingCallNotification/style.tsx        |   6 +-
 .../InAppNotification/NotifierComponent.tsx   |   2 +-
 app/containers/List/ListItem.tsx              |   4 +-
 app/containers/MessageActions/Header.tsx      |   4 +-
 app/containers/Passcode/Base/Subtitle.tsx     |   2 +-
 app/containers/RoomItem/Touchable.tsx         |   2 +-
 app/containers/SearchBox/index.tsx            |   2 +-
 app/containers/ServerItem/index.tsx           |   2 +-
 .../SupportedVersionsExpired.tsx              |   2 +-
 .../SupportedVersionsWarning.tsx              |   2 +-
 app/containers/TextInput/FormTextInput.tsx    |   6 +-
 app/containers/TwoFactor/index.tsx            |   2 +-
 app/containers/UIKit/DatePicker.tsx           |   4 +-
 app/containers/UIKit/Input.tsx                |   4 +-
 app/containers/UIKit/MultiSelect/Input.tsx    |   2 +-
 .../UIKit/MultiSelect/MultiSelectContent.tsx  |   2 +-
 app/containers/UIKit/Select.tsx               |   2 +-
 app/containers/markdown/Markdown.stories.tsx  |   2 +-
 .../markdown/new/NewMarkdown.stories.tsx      |   2 +-
 app/containers/message/Message.stories.tsx    |   2 +-
 app/containers/message/Reactions.tsx          |   4 +-
 app/ee/omnichannel/views/QueueListView.tsx    |   4 +-
 app/index.tsx                                 |   2 +-
 app/lib/constants/colors.ts                   | 128 +++++++++++++-----
 app/lib/methods/helpers/navigation/index.ts   |   2 +-
 app/lib/methods/helpers/theme.ts              |   2 +-
 .../backgroundNotificationHandler.ts          |   4 +-
 app/views/AddExistingChannelView/index.tsx    |   2 +-
 app/views/AttachmentView.tsx                  |   2 +-
 app/views/AuthLoadingView.tsx                 |   2 +-
 .../Dropdown/DropdownItem.tsx                 |   2 +-
 .../Dropdown/index.tsx                        |   2 +-
 app/views/CannedResponsesListView/index.tsx   |   2 +-
 .../RoomSettings/SwitchItem.tsx               |   2 +-
 app/views/CreateChannelView/index.tsx         |   6 +-
 app/views/DirectoryView/Options.tsx           |   2 +-
 app/views/DirectoryView/index.tsx             |   2 +-
 app/views/DiscussionsView/Item.tsx            |   2 +-
 app/views/DiscussionsView/index.tsx           |   2 +-
 app/views/E2EEncryptionSecurityView/index.tsx |   2 +-
 app/views/E2EEnterYourPasswordView.tsx        |   4 +-
 app/views/E2EHowItWorksView.tsx               |   2 +-
 app/views/E2ESaveYourPasswordView.tsx         |   6 +-
 app/views/ForwardMessageView/index.tsx        |   2 +-
 app/views/InviteUsersView/index.tsx           |   2 +-
 app/views/JitsiMeetView/JitsiAuthModal.tsx    |   2 +-
 app/views/MarkdownTableView.tsx               |   4 +-
 app/views/MessagesView/index.tsx              |   6 +-
 app/views/NewMessageView/index.tsx            |   2 +-
 app/views/NewServerView/ServerInput/index.tsx |   2 +-
 .../DeleteAccountActionSheetContent/index.tsx |   2 +-
 app/views/ReadReceiptView/index.tsx           |   2 +-
 app/views/RoomActionsView/index.tsx           |   4 +-
 app/views/RoomInfoEditView/index.tsx          |   4 +-
 app/views/RoomInfoView/index.tsx              |   4 +-
 app/views/RoomMembersView/index.tsx           |   2 +-
 app/views/RoomView/JoinCode.tsx               |   2 +-
 .../RoomView/List/components/NavBottomFAB.tsx |   2 +-
 .../RoomView/LoadMore/LoadMore.stories.tsx    |   2 +-
 app/views/RoomView/Separator.tsx              |   2 +-
 app/views/RoomView/index.tsx                  |   2 +-
 app/views/RoomsListView/ServerDropdown.tsx    |   2 +-
 app/views/RoomsListView/index.tsx             |   6 +-
 app/views/SearchMessagesView/index.tsx        |   6 +-
 app/views/SelectListView.tsx                  |   4 +-
 app/views/SelectedUsersView/Header.tsx        |   2 +-
 app/views/SelectedUsersView/index.tsx         |   2 +-
 app/views/ShareListView/index.tsx             |   6 +-
 app/views/ShareView/Thumbs.tsx                |   2 +-
 app/views/ShareView/index.tsx                 |   6 +-
 app/views/SidebarView/index.tsx               |   6 +-
 .../Dropdown/DropdownItem.tsx                 |   2 +-
 .../ThreadMessagesView/Dropdown/index.tsx     |   2 +-
 app/views/ThreadMessagesView/Item.tsx         |   2 +-
 app/views/ThreadMessagesView/index.tsx        |   2 +-
 app/views/WithoutServersView.tsx              |   2 +-
 81 files changed, 213 insertions(+), 147 deletions(-)

diff --git a/app/containers/ActionSheet/ActionSheet.tsx b/app/containers/ActionSheet/ActionSheet.tsx
index 816b977d1..a94f4b215 100644
--- a/app/containers/ActionSheet/ActionSheet.tsx
+++ b/app/containers/ActionSheet/ActionSheet.tsx
@@ -161,7 +161,7 @@ const ActionSheet = React.memo(
 						handleComponent={renderHandle}
 						enablePanDownToClose
 						style={{ ...styles.container, ...bottomSheet }}
-						backgroundStyle={{ backgroundColor: colors.focusedBackground }}
+						backgroundStyle={{ backgroundColor: colors.surfaceLight }}
 						onChange={index => index === -1 && onClose()}
 						// We need this to allow horizontal swipe gesture inside the bottom sheet like in reaction picker
 						enableContentPanningGesture={data?.enableContentPanningGesture ?? true}
diff --git a/app/containers/ActionSheet/BottomSheetContent.tsx b/app/containers/ActionSheet/BottomSheetContent.tsx
index 9f07c0f49..cd95783e9 100644
--- a/app/containers/ActionSheet/BottomSheetContent.tsx
+++ b/app/containers/ActionSheet/BottomSheetContent.tsx
@@ -45,7 +45,7 @@ const BottomSheetContent = React.memo(({ options, hasCancel, hide, children, onL
 				keyExtractor={item => item.title}
 				bounces={false}
 				renderItem={renderItem}
-				style={{ backgroundColor: colors.focusedBackground }}
+				style={{ backgroundColor: colors.surfaceLight }}
 				keyboardDismissMode='interactive'
 				indicatorStyle='black'
 				contentContainerStyle={{ paddingBottom: bottom }}
diff --git a/app/containers/ActionSheet/Item.tsx b/app/containers/ActionSheet/Item.tsx
index 7a94423b1..64c405c35 100644
--- a/app/containers/ActionSheet/Item.tsx
+++ b/app/containers/ActionSheet/Item.tsx
@@ -29,17 +29,17 @@ export const Item = React.memo(({ item, hide }: IActionSheetItem) => {
 
 	let color = colors.fontDefault;
 	if (item.danger) {
-		color = colors.dangerColor;
+		color = colors.fontDanger;
 	}
 	if (!enabled) {
 		color = colors.fontDisabled;
 	}
 
 	return (
-		<Touch onPress={onPress} style={[styles.item, { backgroundColor: colors.focusedBackground }]} testID={item.testID}>
+		<Touch onPress={onPress} style={[styles.item, { backgroundColor: colors.surfaceLight }]} testID={item.testID}>
 			{item.icon ? <CustomIcon name={item.icon} size={20} color={color} /> : null}
 			<View style={styles.titleContainer}>
-				<Text numberOfLines={1} style={[styles.title, { color, marginLeft: item.icon ? 16 : 0 }]}>
+				<Text numberOfLines={1} style={[styles.title, { color: colors.fontDanger, marginLeft: item.icon ? 16 : 0 }]}>
 					{item.title}
 				</Text>
 			</View>
diff --git a/app/containers/DirectoryItem/index.tsx b/app/containers/DirectoryItem/index.tsx
index f8766b44c..785dc9029 100644
--- a/app/containers/DirectoryItem/index.tsx
+++ b/app/containers/DirectoryItem/index.tsx
@@ -50,7 +50,7 @@ const DirectoryItem = ({
 }: IDirectoryItem): React.ReactElement => {
 	const { theme } = useTheme();
 	return (
-		<Touch onPress={onPress} style={{ backgroundColor: themes[theme].backgroundColor }} testID={testID}>
+		<Touch onPress={onPress} style={{ backgroundColor: themes[theme].surfaceRoom }} testID={testID}>
 			<View style={[styles.directoryItemContainer, styles.directoryItemButton, style]}>
 				<Avatar text={avatar} size={30} type={type} rid={rid} style={styles.directoryItemAvatar} />
 				<View style={styles.directoryItemTextContainer}>
diff --git a/app/containers/FormContainer.tsx b/app/containers/FormContainer.tsx
index 985003313..2e0afd496 100644
--- a/app/containers/FormContainer.tsx
+++ b/app/containers/FormContainer.tsx
@@ -31,7 +31,7 @@ const FormContainer = ({ children, testID, ...props }: IFormContainer) => {
 
 	return (
 		<KeyboardView
-			style={{ backgroundColor: themes[theme].backgroundColor }}
+			style={{ backgroundColor: themes[theme].surfaceRoom }}
 			contentContainerStyle={sharedStyles.container}
 			keyboardVerticalOffset={128}
 		>
@@ -42,7 +42,7 @@ const FormContainer = ({ children, testID, ...props }: IFormContainer) => {
 				{...scrollPersistTaps}
 				{...props}
 			>
-				<SafeAreaView testID={testID} style={{ backgroundColor: themes[theme].backgroundColor }}>
+				<SafeAreaView testID={testID} style={{ backgroundColor: themes[theme].surfaceRoom }}>
 					{children}
 					<AppVersion theme={theme} />
 				</SafeAreaView>
diff --git a/app/containers/InAppNotification/IncomingCallNotification/style.tsx b/app/containers/InAppNotification/IncomingCallNotification/style.tsx
index 0b16cac28..d55f9fc92 100644
--- a/app/containers/InAppNotification/IncomingCallNotification/style.tsx
+++ b/app/containers/InAppNotification/IncomingCallNotification/style.tsx
@@ -13,7 +13,7 @@ export const useStyle = () => {
 			marginHorizontal: 10,
 			borderWidth: StyleSheet.hairlineWidth,
 			borderRadius: 4,
-			backgroundColor: colors.focusedBackground,
+			backgroundColor: colors.surfaceLight,
 			borderColor: colors.separatorColor,
 			flex: 1
 		},
@@ -36,7 +36,7 @@ export const useStyle = () => {
 		},
 		cancelButton: {
 			borderRadius: 4,
-			backgroundColor: colors.cancelCallButton,
+			backgroundColor: colors.dangerColor,
 			marginRight: 8,
 			flex: 2,
 			alignItems: 'center',
@@ -48,7 +48,7 @@ export const useStyle = () => {
 		},
 		acceptButton: {
 			borderRadius: 4,
-			backgroundColor: colors.acceptCallButton,
+			backgroundColor: colors.buttonBackgroundSuccessDefault,
 			flex: 2,
 			alignItems: 'center',
 			justifyContent: 'center'
diff --git a/app/containers/InAppNotification/NotifierComponent.tsx b/app/containers/InAppNotification/NotifierComponent.tsx
index 225bc3677..602e2f92b 100644
--- a/app/containers/InAppNotification/NotifierComponent.tsx
+++ b/app/containers/InAppNotification/NotifierComponent.tsx
@@ -103,7 +103,7 @@ const NotifierComponent = React.memo(({ notification, isMasterDetail }: INotifie
 				styles.container,
 				isMasterDetail && styles.small,
 				{
-					backgroundColor: themes[theme].focusedBackground,
+					backgroundColor: themes[theme].surfaceLight,
 					borderColor: themes[theme].separatorColor,
 					marginTop: insets.top
 				}
diff --git a/app/containers/List/ListItem.tsx b/app/containers/List/ListItem.tsx
index 39b2c5361..9df7f7d8f 100644
--- a/app/containers/List/ListItem.tsx
+++ b/app/containers/List/ListItem.tsx
@@ -136,7 +136,7 @@ interface IListItemButton {
 const Button = React.memo(({ onPress, backgroundColor, underlayColor, ...props }: IListButtonPress) => (
 	<Touch
 		onPress={() => onPress(props.title)}
-		style={{ backgroundColor: backgroundColor || themes[props.theme].backgroundColor }}
+		style={{ backgroundColor: backgroundColor || themes[props.theme].surfaceRoom }}
 		underlayColor={underlayColor}
 		enabled={!props.disabled}
 	>
@@ -157,7 +157,7 @@ const ListItem = React.memo(({ ...props }: IListItem) => {
 		return <Button {...props} theme={theme} onPress={onPress} />;
 	}
 	return (
-		<View style={{ backgroundColor: props.backgroundColor || themes[theme].backgroundColor }}>
+		<View style={{ backgroundColor: props.backgroundColor || themes[theme].surfaceRoom }}>
 			<Content {...props} theme={theme} />
 		</View>
 	);
diff --git a/app/containers/MessageActions/Header.tsx b/app/containers/MessageActions/Header.tsx
index e67f5242b..07635317a 100644
--- a/app/containers/MessageActions/Header.tsx
+++ b/app/containers/MessageActions/Header.tsx
@@ -108,12 +108,12 @@ const Header = React.memo(({ handleReaction, message, isMasterDetail }: IHeader)
 	}
 
 	return (
-		<View style={[styles.container, { backgroundColor: themes[theme].focusedBackground }]}>
+		<View style={[styles.container, { backgroundColor: themes[theme].surfaceLight }]}>
 			<FlatList
 				data={frequentlyUsed.slice(0, quantity)}
 				renderItem={renderItem}
 				ListFooterComponent={renderFooter}
-				style={{ backgroundColor: themes[theme].focusedBackground }}
+				style={{ backgroundColor: themes[theme].surfaceLight }}
 				keyExtractor={item => (typeof item === 'string' ? item : item.name)}
 				showsHorizontalScrollIndicator={false}
 				scrollEnabled={false}
diff --git a/app/containers/Passcode/Base/Subtitle.tsx b/app/containers/Passcode/Base/Subtitle.tsx
index 2ccde968f..4dcc05c4e 100644
--- a/app/containers/Passcode/Base/Subtitle.tsx
+++ b/app/containers/Passcode/Base/Subtitle.tsx
@@ -16,7 +16,7 @@ const Subtitle = React.memo(({ text }: IPasscodeSubtitle) => {
 	return (
 		<Row style={styles.row}>
 			<View style={styles.subtitleView}>
-				<Text style={[styles.textSubtitle, { color: themes[theme].dangerColor }]}>{text}</Text>
+				<Text style={[styles.textSubtitle, { color: themes[theme].fontDanger }]}>{text}</Text>
 			</View>
 		</Row>
 	);
diff --git a/app/containers/RoomItem/Touchable.tsx b/app/containers/RoomItem/Touchable.tsx
index 881a24cbf..9f5ab5fc6 100644
--- a/app/containers/RoomItem/Touchable.tsx
+++ b/app/containers/RoomItem/Touchable.tsx
@@ -223,7 +223,7 @@ const Touchable = ({
 								onPress={handlePress}
 								testID={testID}
 								style={{
-									backgroundColor: isFocused ? colors.chatComponentBackground : colors.backgroundColor
+									backgroundColor: isFocused ? colors.chatComponentBackground : colors.surfaceRoom
 								}}
 							>
 								{children}
diff --git a/app/containers/SearchBox/index.tsx b/app/containers/SearchBox/index.tsx
index c1d1243df..bc3826b09 100644
--- a/app/containers/SearchBox/index.tsx
+++ b/app/containers/SearchBox/index.tsx
@@ -23,7 +23,7 @@ const SearchBox = ({ onChangeText, onSubmitEditing, testID }: TextInputProps): J
 	}, []);
 
 	return (
-		<View testID='searchbox' style={{ backgroundColor: colors.backgroundColor }}>
+		<View testID='searchbox' style={{ backgroundColor: colors.surfaceRoom }}>
 			<FormTextInput
 				autoCapitalize='none'
 				autoCorrect={false}
diff --git a/app/containers/ServerItem/index.tsx b/app/containers/ServerItem/index.tsx
index cd7fb0085..0ca8310a4 100644
--- a/app/containers/ServerItem/index.tsx
+++ b/app/containers/ServerItem/index.tsx
@@ -33,7 +33,7 @@ const ServerItem = React.memo(({ item, onPress, onLongPress, hasCheck }: IServer
 			testID={`rooms-list-header-server-${item.id}`}
 			android_ripple={{ color: themes[theme].bannerBackground }}
 			style={({ pressed }: { pressed: boolean }) => ({
-				backgroundColor: isIOS && pressed ? themes[theme].bannerBackground : themes[theme].backgroundColor
+				backgroundColor: isIOS && pressed ? themes[theme].bannerBackground : themes[theme].surfaceRoom
 			})}
 		>
 			<View style={styles.serverItemContainer}>
diff --git a/app/containers/SupportedVersions/SupportedVersionsExpired.tsx b/app/containers/SupportedVersions/SupportedVersionsExpired.tsx
index b79a47d72..b59e15d87 100644
--- a/app/containers/SupportedVersions/SupportedVersionsExpired.tsx
+++ b/app/containers/SupportedVersions/SupportedVersionsExpired.tsx
@@ -46,7 +46,7 @@ export const SupportedVersionsExpired = () => {
 	};
 
 	return (
-		<View style={[styles.container, { paddingTop: 120, backgroundColor: colors.focusedBackground }]}>
+		<View style={[styles.container, { paddingTop: 120, backgroundColor: colors.surfaceLight }]}>
 			<View style={styles.iconContainer}>
 				<CustomIcon name='warning' size={36} color={colors.dangerColor} />
 			</View>
diff --git a/app/containers/SupportedVersions/SupportedVersionsWarning.tsx b/app/containers/SupportedVersions/SupportedVersionsWarning.tsx
index 6ddfa0438..0402607f9 100644
--- a/app/containers/SupportedVersions/SupportedVersionsWarning.tsx
+++ b/app/containers/SupportedVersions/SupportedVersionsWarning.tsx
@@ -31,7 +31,7 @@ export const SupportedVersionsWarning = ({ navigation, route }: { navigation?: a
 	}
 
 	return (
-		<View style={[styles.container, { backgroundColor: colors.focusedBackground }]}>
+		<View style={[styles.container, { backgroundColor: colors.surfaceLight }]}>
 			<View style={styles.iconContainer}>
 				<CustomIcon name='warning' size={36} color={colors.dangerColor} />
 			</View>
diff --git a/app/containers/TextInput/FormTextInput.tsx b/app/containers/TextInput/FormTextInput.tsx
index 4bb222e3b..d75729955 100644
--- a/app/containers/TextInput/FormTextInput.tsx
+++ b/app/containers/TextInput/FormTextInput.tsx
@@ -91,7 +91,7 @@ export const FormTextInput = ({
 	return (
 		<View style={[styles.inputContainer, containerStyle]}>
 			{label ? (
-				<Text style={[styles.label, { color: colors.fontTitlesLabels }, error?.error && { color: colors.dangerColor }]}>
+				<Text style={[styles.label, { color: colors.fontTitlesLabels }, error?.error && { color: colors.fontDanger }]}>
 					{label}
 				</Text>
 			) : null}
@@ -103,7 +103,7 @@ export const FormTextInput = ({
 						iconLeft && styles.inputIconLeft,
 						(secureTextEntry || iconRight || showClearInput) && styles.inputIconRight,
 						{
-							backgroundColor: colors.backgroundColor,
+							backgroundColor: colors.surfaceRoom,
 							borderColor: colors.strokeLight,
 							color: colors.fontTitlesLabels
 						},
@@ -173,7 +173,7 @@ export const FormTextInput = ({
 				) : null}
 				{left}
 			</View>
-			{error && error.reason ? <Text style={[styles.error, { color: colors.dangerColor }]}>{error.reason}</Text> : null}
+			{error && error.reason ? <Text style={[styles.error, { color: colors.fontDanger }]}>{error.reason}</Text> : null}
 		</View>
 	);
 };
diff --git a/app/containers/TwoFactor/index.tsx b/app/containers/TwoFactor/index.tsx
index 69197c2a0..94a05de50 100644
--- a/app/containers/TwoFactor/index.tsx
+++ b/app/containers/TwoFactor/index.tsx
@@ -110,7 +110,7 @@ const TwoFactor = React.memo(({ isMasterDetail }: { isMasterDetail: boolean }) =
 					style={[
 						styles.content,
 						isMasterDetail && [sharedStyles.modalFormSheet, styles.tablet],
-						{ backgroundColor: themes[theme].backgroundColor }
+						{ backgroundColor: themes[theme].surfaceRoom }
 					]}
 				>
 					<Text style={[styles.title, { color }]}>{I18n.t(method?.title || 'Two_Factor_Authentication')}</Text>
diff --git a/app/containers/UIKit/DatePicker.tsx b/app/containers/UIKit/DatePicker.tsx
index 9f3ce2568..a1b8b3558 100644
--- a/app/containers/UIKit/DatePicker.tsx
+++ b/app/containers/UIKit/DatePicker.tsx
@@ -66,11 +66,11 @@ export const DatePicker = ({ element, language, action, context, loading, value,
 		button = (
 			<Touchable
 				onPress={() => onShow(!show)}
-				style={{ backgroundColor: themes[theme].backgroundColor }}
+				style={{ backgroundColor: themes[theme].surfaceRoom }}
 				background={Touchable.Ripple(themes[theme].bannerBackground)}
 			>
 				<View style={[styles.input, { borderColor: error ? themes[theme].dangerColor : themes[theme].separatorColor }]}>
-					<Text style={[styles.inputText, { color: error ? themes[theme].dangerColor : themes[theme].fontTitlesLabels }]}>
+					<Text style={[styles.inputText, { color: error ? themes[theme].fontDanger : themes[theme].fontTitlesLabels }]}>
 						{currentDate.toLocaleDateString(language)}
 					</Text>
 					{loading ? (
diff --git a/app/containers/UIKit/Input.tsx b/app/containers/UIKit/Input.tsx
index 98d112a31..9f2dbb0a5 100644
--- a/app/containers/UIKit/Input.tsx
+++ b/app/containers/UIKit/Input.tsx
@@ -35,11 +35,11 @@ const styles = StyleSheet.create({
 export const Input = ({ element, parser, label, description, error, hint, theme }: IInput) => (
 	<View style={styles.container}>
 		{label ? (
-			<Text style={[styles.label, { color: error ? themes[theme].dangerColor : themes[theme].fontTitlesLabels }]}>{label}</Text>
+			<Text style={[styles.label, { color: error ? themes[theme].fontDanger : themes[theme].fontTitlesLabels }]}>{label}</Text>
 		) : null}
 		{description ? <Text style={[styles.description, { color: themes[theme].fontSecondaryInfo }]}>{description}</Text> : null}
 		{parser.renderInputs({ ...element }, BlockContext.FORM, parser)}
-		{error ? <Text style={[styles.error, { color: themes[theme].dangerColor }]}>{error}</Text> : null}
+		{error ? <Text style={[styles.error, { color: themes[theme].fontDanger }]}>{error}</Text> : null}
 		{hint ? <Text style={[styles.hint, { color: themes[theme].fontSecondaryInfo }]}>{hint}</Text> : null}
 	</View>
 );
diff --git a/app/containers/UIKit/MultiSelect/Input.tsx b/app/containers/UIKit/MultiSelect/Input.tsx
index d3b884208..41d599ae5 100644
--- a/app/containers/UIKit/MultiSelect/Input.tsx
+++ b/app/containers/UIKit/MultiSelect/Input.tsx
@@ -22,7 +22,7 @@ const Input = ({ children, onPress, loading, inputStyle, placeholder, disabled,
 	return (
 		<Touchable
 			onPress={onPress}
-			style={[{ backgroundColor: colors.backgroundColor }, styles.inputBorder, inputStyle]}
+			style={[{ backgroundColor: colors.surfaceRoom }, styles.inputBorder, inputStyle]}
 			background={Touchable.Ripple(colors.bannerBackground)}
 			disabled={disabled}
 		>
diff --git a/app/containers/UIKit/MultiSelect/MultiSelectContent.tsx b/app/containers/UIKit/MultiSelect/MultiSelectContent.tsx
index 270163692..1250659d4 100644
--- a/app/containers/UIKit/MultiSelect/MultiSelectContent.tsx
+++ b/app/containers/UIKit/MultiSelect/MultiSelectContent.tsx
@@ -71,7 +71,7 @@ export const MultiSelectContent = React.memo(
 						testID='multi-select-search'
 						onChangeText={handleSearch}
 						placeholder={I18n.t('Search')}
-						inputStyle={{ backgroundColor: colors.focusedBackground }}
+						inputStyle={{ backgroundColor: colors.surfaceLight }}
 						bottomSheet={isIOS}
 						onSubmitEditing={() => {
 							setTimeout(() => {
diff --git a/app/containers/UIKit/Select.tsx b/app/containers/UIKit/Select.tsx
index e3fecac69..7653720e5 100644
--- a/app/containers/UIKit/Select.tsx
+++ b/app/containers/UIKit/Select.tsx
@@ -52,7 +52,7 @@ export const Select = ({ options = [], placeholder, onChange, loading, disabled,
 		...styles.viewContainer,
 		...(isIOS ? styles.iosPadding : {}),
 		borderColor: themes[theme].separatorColor,
-		backgroundColor: themes[theme].backgroundColor
+		backgroundColor: themes[theme].surfaceRoom
 	};
 
 	const placeholderObject = useMemo(
diff --git a/app/containers/markdown/Markdown.stories.tsx b/app/containers/markdown/Markdown.stories.tsx
index e5e1e36f9..529a8f5ba 100644
--- a/app/containers/markdown/Markdown.stories.tsx
+++ b/app/containers/markdown/Markdown.stories.tsx
@@ -11,7 +11,7 @@ const theme = 'light';
 const styles = StyleSheet.create({
 	container: {
 		marginHorizontal: 15,
-		backgroundColor: themes[theme].backgroundColor,
+		backgroundColor: themes[theme].surfaceRoom,
 		marginVertical: 50
 	}
 });
diff --git a/app/containers/markdown/new/NewMarkdown.stories.tsx b/app/containers/markdown/new/NewMarkdown.stories.tsx
index 9bc46e2ac..86f680073 100644
--- a/app/containers/markdown/new/NewMarkdown.stories.tsx
+++ b/app/containers/markdown/new/NewMarkdown.stories.tsx
@@ -25,7 +25,7 @@ export default {
 const styles = StyleSheet.create({
 	container: {
 		marginHorizontal: 15,
-		backgroundColor: themes[theme].backgroundColor,
+		backgroundColor: themes[theme].surfaceRoom,
 		marginVertical: 50
 	}
 });
diff --git a/app/containers/message/Message.stories.tsx b/app/containers/message/Message.stories.tsx
index b37254904..477e89fea 100644
--- a/app/containers/message/Message.stories.tsx
+++ b/app/containers/message/Message.stories.tsx
@@ -43,7 +43,7 @@ export default {
 	decorators: [
 		(Story: any) => (
 			<NavigationContainer>
-				<ScrollView style={{ backgroundColor: themes[_theme].backgroundColor }}>
+				<ScrollView style={{ backgroundColor: themes[_theme].surfaceRoom }}>
 					<MessageContext.Provider
 						value={{
 							user,
diff --git a/app/containers/message/Reactions.tsx b/app/containers/message/Reactions.tsx
index f817836b6..5bfa3c7ef 100644
--- a/app/containers/message/Reactions.tsx
+++ b/app/containers/message/Reactions.tsx
@@ -35,7 +35,7 @@ const AddReaction = React.memo(({ theme }: { theme: TSupportedThemes }) => {
 			onPress={reactionInit}
 			key='message-add-reaction'
 			testID='message-add-reaction'
-			style={[styles.reactionButton, { backgroundColor: themes[theme].backgroundColor }]}
+			style={[styles.reactionButton, { backgroundColor: themes[theme].surfaceRoom }]}
 			background={Touchable.Ripple(themes[theme].bannerBackground)}
 			hitSlop={BUTTON_HIT_SLOP}
 		>
@@ -57,7 +57,7 @@ const Reaction = React.memo(({ reaction, getCustomEmoji, theme }: IMessageReacti
 			testID={`message-reaction-${reaction.emoji}`}
 			style={[
 				styles.reactionButton,
-				{ backgroundColor: reacted ? themes[theme].bannerBackground : themes[theme].backgroundColor }
+				{ backgroundColor: reacted ? themes[theme].bannerBackground : themes[theme].surfaceRoom }
 			]}
 			background={Touchable.Ripple(themes[theme].bannerBackground)}
 			hitSlop={BUTTON_HIT_SLOP}
diff --git a/app/ee/omnichannel/views/QueueListView.tsx b/app/ee/omnichannel/views/QueueListView.tsx
index 8ebb3cb39..59c7a9af3 100644
--- a/app/ee/omnichannel/views/QueueListView.tsx
+++ b/app/ee/omnichannel/views/QueueListView.tsx
@@ -104,14 +104,14 @@ const QueueListView = React.memo(() => {
 	};
 
 	return (
-		<SafeAreaView testID='queue-list-view' style={{ backgroundColor: colors.backgroundColor }}>
+		<SafeAreaView testID='queue-list-view' style={{ backgroundColor: colors.surfaceRoom }}>
 			<StatusBar />
 			<FlatList
 				ref={getScrollRef}
 				data={queued}
 				extraData={queued}
 				keyExtractor={keyExtractor}
-				style={{ backgroundColor: colors.backgroundColor }}
+				style={{ backgroundColor: colors.surfaceRoom }}
 				renderItem={renderItem}
 				getItemLayout={getItemLayout}
 				removeClippedSubviews={isIOS}
diff --git a/app/index.tsx b/app/index.tsx
index a020c294d..8e99cb533 100644
--- a/app/index.tsx
+++ b/app/index.tsx
@@ -201,7 +201,7 @@ export default class Root extends React.Component<{}, IState> {
 		return (
 			<SafeAreaProvider
 				initialMetrics={initialWindowMetrics}
-				style={{ backgroundColor: themes[this.state.theme].backgroundColor }}
+				style={{ backgroundColor: themes[this.state.theme].surfaceRoom }}
 			>
 				<Provider store={store}>
 					<ThemeContext.Provider
diff --git a/app/lib/constants/colors.ts b/app/lib/constants/colors.ts
index cacb667b5..e05c85d25 100644
--- a/app/lib/constants/colors.ts
+++ b/app/lib/constants/colors.ts
@@ -1,6 +1,8 @@
-export const BACKGROUND_PUSH_COLOR = '#F5455C';
+const fixedColors = {
+	overlayColor: '#1F2329CC',
+	backdropColor: '#000000'
+};
 
-// TODO: Remove this after the new colors are implemented
 const newColors = {
 	surfaceLight: '#FFFFFF',
 	surfaceTint: '#F7F8FA',
@@ -185,22 +187,105 @@ const newColorsDark = {
 	buttonSuccessDisabled: '#757575'
 };
 
-const callButtons = {
-	cancelCallButton: '#F5455C',
-	acceptCallButton: '#158D65'
+const newColorsBlack = {
+	surfaceLight: '#0d0d0d',
+	// surfaceTint: '#1F2329',
+	surfaceRoom: '#000000'
+	// surfaceNeutral: '#2D3039',
+	// surfaceDisabled: '#24272E',
+	// surfaceHover: '#1A1E23',
+	// surfaceSelected: '#3C3F44',
+	// surfaceDark: '#E4E7EA',
+	// surfaceFeatured: '#5F1477',
+	// surfaceFeaturedHover: '#4A105D',
+
+	// strokeExtraLight: '#2F343D',
+	// strokeLight: '#333842',
+	// strokeMedium: '#404754',
+	// strokeDark: '#9EA2A8',
+	// strokeExtraDark: '#CBCED1',
+	// strokeExtraLightHighlight: '#87CBFC',
+	// strokeHighlight: '#3976D1',
+	// strokeExtraLightError: '#F49AA6',
+	// strokeError: '#BB3E4E',
+
+	// fontWhite: '#2F343D',
+	// fontDisabled: '#60646C',
+	// fontAnnotation: '#9EA2A8',
+	// fontHint: '#9EA2A8',
+	// fontSecondaryInfo: '#9EA2A8',
+	// fontDefault: '#E4E7EA',
+	// fontTitlesLabels: '#F2F3F5',
+	// fontInfo: '#739EDE',
+	// fontDanger: '#CF6E7A',
+	// fontPureBlack: '#2F343D',
+	// fontPureWhite: '#FFFFFF',
+
+	// statusBackgroundInfo: '#A8C3EB',
+	// statusBackgroundSuccess: '#C1EBDD',
+	// statusBackgroundDanger: '#FFBDC5',
+	// statusBackgroundWarning: '#FEEFBE',
+	// statusBackgroundWarning2: '#4E4731',
+	// statusBackgroundService: '#FCE3CF',
+	// statusBackgroundService2: '#EDD0F7',
+	// statusFontInfo: '#739EDE',
+	// statusFontSuccess: '#58AD90',
+	// statusFontDanger: '#D88892',
+	// statusFontWarning: '#C7AA66',
+	// statusFontWarning2: '#FFFFFF',
+	// statusFontService: '#CA9163',
+	// statusFontService2: '#C393D2',
+
+	// badgeBackgroundLevel1: '#484C51',
+	// badgeBackgroundLevel2: '#2C65BA',
+	// badgeBackgroundLevel3: '#955828',
+	// badgeBackgroundLevel4: '#B43C4C',
+
+	// userPresenceOnline: '#1CBF89',
+	// userPresenceBusy: '#C14454',
+	// userPresenceAway: '#AC892F',
+	// userPresenceOffline: '#6C727A',
+	// userPresenceDisabled: '#955828',
+
+	// buttonBackgroundPrimaryDefault: '#3976D1',
+	// buttonBackgroundPrimaryPress: '#245399',
+	// buttonBackgroundPrimaryDisabled: '#1D3963',
+
+	// buttonBackgroundSecondaryDefault: '#2F343D',
+	// buttonBackgroundSecondaryPress: '#454C59',
+	// buttonBackgroundSecondaryDisabled: '#2F343D',
+
+	// buttonBackgroundSecondaryDangerDefault: '#2F343D',
+	// buttonBackgroundSecondaryDangerPress: '#454C59',
+	// buttonBackgroundSecondaryDangerDisabled: '#2F343D',
+
+	// buttonBackgroundDangerDefault: '#BB3E4E',
+	// buttonBackgroundDangerPress: '#822C37',
+	// buttonBackgroundDangerDisabled: '#3D2126',
+
+	// buttonBackgroundSuccessDefault: '#1D7256',
+	// buttonBackgroundSuccessPress: '#134937',
+	// buttonBackgroundSuccessDisabled: '#1E4B40',
+
+	// buttonFontPrimary: '#FFFFFF',
+	// buttonPrimaryDisabled: '#6C727A',
+	// buttonFontSecondary: '#E4E7EA',
+	// buttonSecondaryDisabled: '#6C727A',
+	// buttonFontSecondaryDanger: '#C14454',
+	// buttonSecondaryDangerDisabled: '#613339',
+	// buttonFontDanger: '#FFFFFF',
+	// buttonDangerDisabled: '#757575',
+	// buttonFontSuccess: '#FFFFFF',
+	// buttonSuccessDisabled: '#757575'
 };
 
 export const colors = {
 	light: {
 		...newColors,
-
-		backgroundColor: '#ffffff',
-		focusedBackground: '#ffffff',
 		chatComponentBackground: '#f3f4f5',
 		auxiliaryBackground: '#efeff4',
 		bannerBackground: '#f1f2f4',
 		bodyText: '#2f343d',
-		backdropColor: '#000000',
 		dangerColor: '#f5455c',
 		successColor: '#2de0a5',
 		borderColor: '#e1e5e8',
@@ -255,22 +340,14 @@ export const colors = {
 		gray300: '#5f656e',
 		gray100: '#CBCED1',
 		n900: '#1F2329',
-		statusBackgroundWarning: '#FFECAD',
-		overlayColor: '#1F2329CC',
-		taskBoxColor: '#9297a2',
-		...callButtons
+		statusBackgroundWarning: '#FFECAD'
 	},
 	dark: {
 		...newColorsDark,
-		surfaceLight: '#0b182c',
-
-		backgroundColor: '#030b1b',
-		focusedBackground: '#0b182c',
 		chatComponentBackground: '#192132',
 		auxiliaryBackground: '#07101e',
 		bannerBackground: '#0e1f38',
 		bodyText: '#cbced1',
-		backdropColor: '#000000',
 		dangerColor: '#f5455c',
 		successColor: '#2de0a5',
 		borderColor: '#0f213d',
@@ -325,22 +402,14 @@ export const colors = {
 		gray300: '#5f656e',
 		gray100: '#CBCED1',
 		n900: '#FFFFFF',
-		statusBackgroundWarning: '#FFECAD',
-		overlayColor: '#1F2329CC',
-		taskBoxColor: '#9297a2',
-		...callButtons
+		statusBackgroundWarning: '#FFECAD'
 	},
 	black: {
 		...newColorsDark,
-		surfaceLight: '#0d0d0d',
-
-		backgroundColor: '#000000',
-		focusedBackground: '#0d0d0d',
 		chatComponentBackground: '#16181a',
 		auxiliaryBackground: '#080808',
 		bannerBackground: '#1f2329',
 		bodyText: '#cbced1',
-		backdropColor: '#000000',
 		dangerColor: '#f5455c',
 		successColor: '#2de0a5',
 		borderColor: '#1f2329',
@@ -395,10 +464,7 @@ export const colors = {
 		gray300: '#5f656e',
 		gray100: '#CBCED1',
 		n900: '#FFFFFF',
-		statusBackgroundWarning: '#FFECAD',
-		overlayColor: '#1F2329CC',
-		taskBoxColor: '#9297a2',
-		...callButtons
+		statusBackgroundWarning: '#FFECAD'
 	}
 };
 
diff --git a/app/lib/methods/helpers/navigation/index.ts b/app/lib/methods/helpers/navigation/index.ts
index 98b934842..321b8b11a 100644
--- a/app/lib/methods/helpers/navigation/index.ts
+++ b/app/lib/methods/helpers/navigation/index.ts
@@ -48,7 +48,7 @@ export const navigationTheme = (theme: TSupportedThemes) => {
 		...defaultNavTheme,
 		colors: {
 			...defaultNavTheme.colors,
-			background: themes[theme].backgroundColor,
+			background: themes[theme].surfaceRoom,
 			border: themes[theme].borderColor
 		}
 	};
diff --git a/app/lib/methods/helpers/theme.ts b/app/lib/methods/helpers/theme.ts
index e12dd9717..5bb73e924 100644
--- a/app/lib/methods/helpers/theme.ts
+++ b/app/lib/methods/helpers/theme.ts
@@ -58,7 +58,7 @@ export const setNativeTheme = async (themePreferences: IThemePreference): Promis
 			// Do nothing
 		}
 	}
-	setRootViewColor(themes[theme].backgroundColor);
+	setRootViewColor(themes[theme].surfaceRoom);
 };
 
 export const unsubscribeTheme = () => {
diff --git a/app/lib/notifications/videoConf/backgroundNotificationHandler.ts b/app/lib/notifications/videoConf/backgroundNotificationHandler.ts
index ab98808b3..25ddf9e60 100644
--- a/app/lib/notifications/videoConf/backgroundNotificationHandler.ts
+++ b/app/lib/notifications/videoConf/backgroundNotificationHandler.ts
@@ -5,7 +5,7 @@ import ejson from 'ejson';
 
 import { deepLinkingClickCallPush } from '../../../actions/deepLinking';
 import i18n from '../../../i18n';
-import { BACKGROUND_PUSH_COLOR } from '../../constants';
+import { colors } from '../../constants';
 import { store } from '../../store/auxStore';
 
 const VIDEO_CONF_CHANNEL = 'video-conf-call';
@@ -86,7 +86,7 @@ const displayVideoConferenceNotification = async (notification: NotificationData
 			visibility: AndroidVisibility.PUBLIC,
 			importance: AndroidImportance.HIGH,
 			smallIcon: 'ic_notification',
-			color: BACKGROUND_PUSH_COLOR,
+			color: colors.light.badgeBackgroundLevel4,
 			actions,
 			lightUpScreen: true,
 			loopSound: true,
diff --git a/app/views/AddExistingChannelView/index.tsx b/app/views/AddExistingChannelView/index.tsx
index f2805bfa7..4c89292e5 100644
--- a/app/views/AddExistingChannelView/index.tsx
+++ b/app/views/AddExistingChannelView/index.tsx
@@ -167,7 +167,7 @@ const AddExistingChannelView = () => {
 					);
 				}}
 				ItemSeparatorComponent={List.Separator}
-				contentContainerStyle={{ backgroundColor: colors.backgroundColor }}
+				contentContainerStyle={{ backgroundColor: colors.surfaceRoom }}
 				keyboardShouldPersistTaps='always'
 			/>
 		</SafeAreaView>
diff --git a/app/views/AttachmentView.tsx b/app/views/AttachmentView.tsx
index 89fd71f15..97d7c4a04 100644
--- a/app/views/AttachmentView.tsx
+++ b/app/views/AttachmentView.tsx
@@ -191,7 +191,7 @@ const AttachmentView = (): React.ReactElement => {
 	};
 
 	return (
-		<View style={{ backgroundColor: colors.backgroundColor, flex: 1 }}>
+		<View style={{ backgroundColor: colors.surfaceRoom, flex: 1 }}>
 			<StatusBar barStyle='light-content' backgroundColor={colors.previewBackground} />
 			<RenderContent attachment={attachment} setLoading={setLoading} />
 			{loading ? <RCActivityIndicator absolute size='large' /> : null}
diff --git a/app/views/AuthLoadingView.tsx b/app/views/AuthLoadingView.tsx
index 6f1fce2bc..c0d42d69a 100644
--- a/app/views/AuthLoadingView.tsx
+++ b/app/views/AuthLoadingView.tsx
@@ -25,7 +25,7 @@ const AuthLoadingView = React.memo((): React.ReactElement => {
 	const text = useAppSelector(state => state.app.text);
 	const { colors } = useTheme();
 	return (
-		<View style={[styles.container, { backgroundColor: colors.backgroundColor }]}>
+		<View style={[styles.container, { backgroundColor: colors.surfaceRoom }]}>
 			<StatusBar />
 			{text ? (
 				<>
diff --git a/app/views/CannedResponsesListView/Dropdown/DropdownItem.tsx b/app/views/CannedResponsesListView/Dropdown/DropdownItem.tsx
index 8934d49b9..840bd07ea 100644
--- a/app/views/CannedResponsesListView/Dropdown/DropdownItem.tsx
+++ b/app/views/CannedResponsesListView/Dropdown/DropdownItem.tsx
@@ -34,7 +34,7 @@ const DropdownItem = React.memo(({ onPress, iconName, text }: IDropdownItem) =>
 	const { theme } = useTheme();
 
 	return (
-		<Touch onPress={onPress} style={{ backgroundColor: themes[theme].backgroundColor }}>
+		<Touch onPress={onPress} style={{ backgroundColor: themes[theme].surfaceRoom }}>
 			<View style={styles.container}>
 				<Text style={[styles.text, { color: themes[theme].fontSecondaryInfo }]}>{text}</Text>
 				{iconName ? <CustomIcon name={iconName} size={22} color={themes[theme].fontSecondaryInfo} /> : null}
diff --git a/app/views/CannedResponsesListView/Dropdown/index.tsx b/app/views/CannedResponsesListView/Dropdown/index.tsx
index a2f9156d7..79f54f214 100644
--- a/app/views/CannedResponsesListView/Dropdown/index.tsx
+++ b/app/views/CannedResponsesListView/Dropdown/index.tsx
@@ -80,7 +80,7 @@ class Dropdown extends React.Component<IDropdownProps> {
 						styles.dropdownContainer,
 						{
 							transform: [{ translateY }],
-							backgroundColor: themes[theme!].backgroundColor,
+							backgroundColor: themes[theme!].surfaceRoom,
 							borderColor: themes[theme!].separatorColor
 						}
 					]}
diff --git a/app/views/CannedResponsesListView/index.tsx b/app/views/CannedResponsesListView/index.tsx
index 100e64569..79dbad0dc 100644
--- a/app/views/CannedResponsesListView/index.tsx
+++ b/app/views/CannedResponsesListView/index.tsx
@@ -303,7 +303,7 @@ const CannedResponsesListView = ({ navigation, route }: ICannedResponsesListView
 			<FlatList
 				data={cannedResponsesScopeName}
 				extraData={cannedResponsesScopeName}
-				style={[styles.list, { backgroundColor: themes[theme].backgroundColor }]}
+				style={[styles.list, { backgroundColor: themes[theme].surfaceRoom }]}
 				renderItem={({ item }) => (
 					<CannedResponseItem
 						theme={theme}
diff --git a/app/views/CreateChannelView/RoomSettings/SwitchItem.tsx b/app/views/CreateChannelView/RoomSettings/SwitchItem.tsx
index 7332c5ae4..567cf5dd6 100644
--- a/app/views/CreateChannelView/RoomSettings/SwitchItem.tsx
+++ b/app/views/CreateChannelView/RoomSettings/SwitchItem.tsx
@@ -40,7 +40,7 @@ export const SwitchItem = ({ id, value, label, hint, onValueChange, disabled = f
 	const { colors } = useTheme();
 
 	return (
-		<View style={[styles.switchContainer, { backgroundColor: colors.backgroundColor }]}>
+		<View style={[styles.switchContainer, { backgroundColor: colors.surfaceRoom }]}>
 			<View style={styles.switchTextContainer}>
 				<Text style={[styles.label, { color: colors.fontTitlesLabels }]}>{I18n.t(label)}</Text>
 				<Text testID={`create-channel-${id}-hint`} style={[styles.hint, { color: colors.fontSecondaryInfo }]}>
diff --git a/app/views/CreateChannelView/index.tsx b/app/views/CreateChannelView/index.tsx
index c171ed826..f25edfd19 100644
--- a/app/views/CreateChannelView/index.tsx
+++ b/app/views/CreateChannelView/index.tsx
@@ -140,12 +140,12 @@ const CreateChannelView = () => {
 
 	return (
 		<KeyboardView
-			style={{ backgroundColor: colors.backgroundColor }}
+			style={{ backgroundColor: colors.surfaceRoom }}
 			contentContainerStyle={[sharedStyles.container, styles.container]}
 			keyboardVerticalOffset={128}
 		>
 			<StatusBar />
-			<SafeAreaView style={{ backgroundColor: colors.backgroundColor }} testID='create-channel-view'>
+			<SafeAreaView style={{ backgroundColor: colors.surfaceRoom }} testID='create-channel-view'>
 				<ScrollView {...scrollPersistTaps}>
 					<View style={[styles.containerTextInput, { borderColor: colors.separatorColor }]}>
 						<ControlledFormTextInput
@@ -178,7 +178,7 @@ const CreateChannelView = () => {
 								style={[
 									styles.list,
 									{
-										backgroundColor: colors.backgroundColor,
+										backgroundColor: colors.surfaceRoom,
 										borderColor: colors.separatorColor
 									}
 								]}
diff --git a/app/views/DirectoryView/Options.tsx b/app/views/DirectoryView/Options.tsx
index 166bf8f8a..636289106 100644
--- a/app/views/DirectoryView/Options.tsx
+++ b/app/views/DirectoryView/Options.tsx
@@ -91,7 +91,7 @@ export default class DirectoryOptions extends PureComponent<IDirectoryOptionsPro
 					<Animated.View style={[styles.backdrop, { backgroundColor: themes[theme].backdropColor, opacity: backdropOpacity }]} />
 				</TouchableWithoutFeedback>
 				<Animated.View
-					style={[styles.dropdownContainer, { transform: [{ translateY }], backgroundColor: themes[theme].backgroundColor }]}
+					style={[styles.dropdownContainer, { transform: [{ translateY }], backgroundColor: themes[theme].surfaceRoom }]}
 				>
 					<Touch onPress={this.close} accessibilityLabel={I18n.t('Search_by')}>
 						<View
diff --git a/app/views/DirectoryView/index.tsx b/app/views/DirectoryView/index.tsx
index ee5f9a357..65fb4e25e 100644
--- a/app/views/DirectoryView/index.tsx
+++ b/app/views/DirectoryView/index.tsx
@@ -298,7 +298,7 @@ class DirectoryView extends React.Component<IDirectoryViewProps, IDirectoryViewS
 		const { data, loading, showOptionsDropdown, type, globalUsers } = this.state;
 		const { isFederationEnabled, theme } = this.props;
 		return (
-			<SafeAreaView style={{ backgroundColor: themes[theme].backgroundColor }} testID='directory-view'>
+			<SafeAreaView style={{ backgroundColor: themes[theme].surfaceRoom }} testID='directory-view'>
 				<StatusBar />
 				<FlatList
 					data={data}
diff --git a/app/views/DiscussionsView/Item.tsx b/app/views/DiscussionsView/Item.tsx
index 7458621d2..2cac3ddf5 100644
--- a/app/views/DiscussionsView/Item.tsx
+++ b/app/views/DiscussionsView/Item.tsx
@@ -66,7 +66,7 @@ const Item = ({ item, onPress }: IItem): React.ReactElement => {
 		<Touchable
 			onPress={() => onPress(item)}
 			testID={`discussions-view-${item.msg}`}
-			style={{ backgroundColor: colors.backgroundColor }}
+			style={{ backgroundColor: colors.surfaceRoom }}
 		>
 			<View style={styles.container}>
 				<Avatar style={styles.avatar} text={item?.u?.username} size={36} borderRadius={4} />
diff --git a/app/views/DiscussionsView/index.tsx b/app/views/DiscussionsView/index.tsx
index 5fe697c72..beb125ef8 100644
--- a/app/views/DiscussionsView/index.tsx
+++ b/app/views/DiscussionsView/index.tsx
@@ -188,7 +188,7 @@ const DiscussionsView = ({ navigation, route }: IDiscussionsViewProps): React.Re
 				data={isSearching ? search : discussions}
 				renderItem={renderItem}
 				keyExtractor={(item: any) => item._id}
-				style={{ backgroundColor: colors.backgroundColor }}
+				style={{ backgroundColor: colors.surfaceRoom }}
 				contentContainerStyle={styles.contentContainer}
 				onEndReachedThreshold={0.5}
 				removeClippedSubviews={isIOS}
diff --git a/app/views/E2EEncryptionSecurityView/index.tsx b/app/views/E2EEncryptionSecurityView/index.tsx
index eb739144e..638c93ab4 100644
--- a/app/views/E2EEncryptionSecurityView/index.tsx
+++ b/app/views/E2EEncryptionSecurityView/index.tsx
@@ -70,7 +70,7 @@ const E2EEncryptionSecurityView = () => {
 	};
 
 	return (
-		<SafeAreaView testID='e2e-encryption-security-view' style={{ backgroundColor: colors.backgroundColor }}>
+		<SafeAreaView testID='e2e-encryption-security-view' style={{ backgroundColor: colors.surfaceRoom }}>
 			<StatusBar />
 			<List.Container>
 				<View style={styles.container}>
diff --git a/app/views/E2EEnterYourPasswordView.tsx b/app/views/E2EEnterYourPasswordView.tsx
index 18245da63..4a91ead41 100644
--- a/app/views/E2EEnterYourPasswordView.tsx
+++ b/app/views/E2EEnterYourPasswordView.tsx
@@ -44,13 +44,13 @@ const E2EEnterYourPasswordView = (): React.ReactElement => {
 
 	return (
 		<KeyboardView
-			style={{ backgroundColor: colors.backgroundColor }}
+			style={{ backgroundColor: colors.surfaceRoom }}
 			contentContainerStyle={sharedStyles.container}
 			keyboardVerticalOffset={128}
 		>
 			<StatusBar />
 			<ScrollView {...scrollPersistTaps} style={sharedStyles.container} contentContainerStyle={sharedStyles.containerScrollView}>
-				<SafeAreaView style={{ backgroundColor: colors.backgroundColor }} testID='e2e-enter-your-password-view'>
+				<SafeAreaView style={{ backgroundColor: colors.surfaceRoom }} testID='e2e-enter-your-password-view'>
 					<FormTextInput
 						placeholder={I18n.t('Password')}
 						returnKeyType='send'
diff --git a/app/views/E2EHowItWorksView.tsx b/app/views/E2EHowItWorksView.tsx
index 279b1c76b..19f5979a9 100644
--- a/app/views/E2EHowItWorksView.tsx
+++ b/app/views/E2EHowItWorksView.tsx
@@ -35,7 +35,7 @@ const E2EHowItWorksView = (): React.ReactElement => {
 	const infoStyle = [styles.info, { color: colors.bodyText }];
 
 	return (
-		<SafeAreaView style={[styles.container, { backgroundColor: colors.backgroundColor }]} testID='e2e-how-it-works-view'>
+		<SafeAreaView style={[styles.container, { backgroundColor: colors.surfaceRoom }]} testID='e2e-how-it-works-view'>
 			<Markdown msg={I18n.t('E2E_How_It_Works_info1')} style={infoStyle} />
 			<Markdown msg={I18n.t('E2E_How_It_Works_info2')} style={infoStyle} />
 			<Markdown msg={I18n.t('E2E_How_It_Works_info3')} style={infoStyle} />
diff --git a/app/views/E2ESaveYourPasswordView.tsx b/app/views/E2ESaveYourPasswordView.tsx
index 683d67095..63197ab50 100644
--- a/app/views/E2ESaveYourPasswordView.tsx
+++ b/app/views/E2ESaveYourPasswordView.tsx
@@ -101,11 +101,11 @@ const E2ESaveYourPasswordView = () => {
 	};
 
 	return (
-		<SafeAreaView style={{ backgroundColor: colors.backgroundColor }} testID='e2e-save-password-view'>
+		<SafeAreaView style={{ backgroundColor: colors.surfaceRoom }} testID='e2e-save-password-view'>
 			<StatusBar />
 			<ScrollView {...scrollPersistTaps} style={sharedStyles.container} contentContainerStyle={sharedStyles.containerScrollView}>
-				<View style={[styles.container, { backgroundColor: colors.backgroundColor }]}>
-					<Text style={[styles.warning, { color: colors.dangerColor }]}>{I18n.t('Save_Your_Encryption_Password_warning')}</Text>
+				<View style={[styles.container, { backgroundColor: colors.surfaceRoom }]}>
+					<Text style={[styles.warning, { color: colors.fontDanger }]}>{I18n.t('Save_Your_Encryption_Password_warning')}</Text>
 					<View style={styles.content}>
 						<Text style={[styles.passwordText, { color: colors.bodyText }]}>{I18n.t('Your_password_is')}</Text>
 						<Text style={[styles.password, { color: colors.bodyText }]}>{password}</Text>
diff --git a/app/views/ForwardMessageView/index.tsx b/app/views/ForwardMessageView/index.tsx
index c76bac12e..89de57bf4 100644
--- a/app/views/ForwardMessageView/index.tsx
+++ b/app/views/ForwardMessageView/index.tsx
@@ -92,7 +92,7 @@ const ForwardMessageView = () => {
 						blockUnauthenticatedAccess={blockUnauthenticatedAccess}
 						serverVersion={serverVersion}
 					/>
-					<View pointerEvents='none' style={[styles.messageContainer, { backgroundColor: colors.backgroundColor }]}>
+					<View pointerEvents='none' style={[styles.messageContainer, { backgroundColor: colors.surfaceRoom }]}>
 						<MessagePreview message={message} />
 					</View>
 				</ScrollView>
diff --git a/app/views/InviteUsersView/index.tsx b/app/views/InviteUsersView/index.tsx
index b83ca6f54..71318a09d 100644
--- a/app/views/InviteUsersView/index.tsx
+++ b/app/views/InviteUsersView/index.tsx
@@ -85,7 +85,7 @@ const InviteUsersView = ({ route, navigation }: IInviteUsersViewProps): React.Re
 	};
 
 	return (
-		<SafeAreaView style={{ backgroundColor: colors.backgroundColor }}>
+		<SafeAreaView style={{ backgroundColor: colors.surfaceRoom }}>
 			<ScrollView
 				{...scrollPersistTaps}
 				style={{ backgroundColor: colors.auxiliaryBackground }}
diff --git a/app/views/JitsiMeetView/JitsiAuthModal.tsx b/app/views/JitsiMeetView/JitsiAuthModal.tsx
index d768dcd12..91d860b3c 100644
--- a/app/views/JitsiMeetView/JitsiAuthModal.tsx
+++ b/app/views/JitsiMeetView/JitsiAuthModal.tsx
@@ -48,7 +48,7 @@ const JitsiAuthModal = ({
 
 	return (
 		<Modal isVisible>
-			<View style={[styles.container, { backgroundColor: colors.backgroundColor }]}>
+			<View style={[styles.container, { backgroundColor: colors.surfaceRoom }]}>
 				<Text style={[styles.title, { color: colors.fontTitlesLabels }]}>{i18n.t('Jitsi_may_require_authentication')}</Text>
 				{isAdmin ? (
 					<Text style={[styles.regular, { color: colors.fontTitlesLabels }]}>
diff --git a/app/views/MarkdownTableView.tsx b/app/views/MarkdownTableView.tsx
index f78509171..972feefe9 100644
--- a/app/views/MarkdownTableView.tsx
+++ b/app/views/MarkdownTableView.tsx
@@ -22,14 +22,14 @@ const MarkdownTableView = ({ navigation, route }: IMarkdownTableViewProps): Reac
 
 	if (isIOS) {
 		return (
-			<ScrollView style={{ backgroundColor: colors.backgroundColor }} contentContainerStyle={{ width: tableWidth }}>
+			<ScrollView style={{ backgroundColor: colors.surfaceRoom }} contentContainerStyle={{ width: tableWidth }}>
 				{renderRows()}
 			</ScrollView>
 		);
 	}
 
 	return (
-		<ScrollView style={{ backgroundColor: colors.backgroundColor }}>
+		<ScrollView style={{ backgroundColor: colors.surfaceRoom }}>
 			<ScrollView horizontal>{renderRows()}</ScrollView>
 		</ScrollView>
 	);
diff --git a/app/views/MessagesView/index.tsx b/app/views/MessagesView/index.tsx
index 547906f11..e080c61b4 100644
--- a/app/views/MessagesView/index.tsx
+++ b/app/views/MessagesView/index.tsx
@@ -348,7 +348,7 @@ class MessagesView extends React.Component<IMessagesViewProps, IMessagesViewStat
 	renderEmpty = () => {
 		const { theme } = this.props;
 		return (
-			<View style={[styles.listEmptyContainer, { backgroundColor: themes[theme].backgroundColor }]} testID={this.content.testID}>
+			<View style={[styles.listEmptyContainer, { backgroundColor: themes[theme].surfaceRoom }]} testID={this.content.testID}>
 				<Text style={[styles.noDataFound, { color: themes[theme].fontTitlesLabels }]}>{this.content.noDataMsg}</Text>
 			</View>
 		);
@@ -365,12 +365,12 @@ class MessagesView extends React.Component<IMessagesViewProps, IMessagesViewStat
 		}
 
 		return (
-			<SafeAreaView style={{ backgroundColor: themes[theme].backgroundColor }} testID={this.content.testID}>
+			<SafeAreaView style={{ backgroundColor: themes[theme].surfaceRoom }} testID={this.content.testID}>
 				<StatusBar />
 				<FlatList
 					data={messages}
 					renderItem={this.renderItem}
-					style={[styles.list, { backgroundColor: themes[theme].backgroundColor }]}
+					style={[styles.list, { backgroundColor: themes[theme].surfaceRoom }]}
 					keyExtractor={item => item._id}
 					onEndReached={this.load}
 					ListFooterComponent={loading ? <ActivityIndicator /> : null}
diff --git a/app/views/NewMessageView/index.tsx b/app/views/NewMessageView/index.tsx
index f393a9f91..032b78365 100644
--- a/app/views/NewMessageView/index.tsx
+++ b/app/views/NewMessageView/index.tsx
@@ -102,7 +102,7 @@ const NewMessageView = () => {
 				}}
 				ItemSeparatorComponent={List.Separator}
 				ListFooterComponent={List.Separator}
-				contentContainerStyle={{ backgroundColor: colors.backgroundColor }}
+				contentContainerStyle={{ backgroundColor: colors.surfaceRoom }}
 				keyboardShouldPersistTaps='always'
 			/>
 		</SafeAreaView>
diff --git a/app/views/NewServerView/ServerInput/index.tsx b/app/views/NewServerView/ServerInput/index.tsx
index 0f1e5cd50..a56b3d7bb 100644
--- a/app/views/NewServerView/ServerInput/index.tsx
+++ b/app/views/NewServerView/ServerInput/index.tsx
@@ -69,7 +69,7 @@ const ServerInput = ({
 				<View
 					style={[
 						styles.serverHistory,
-						{ backgroundColor: themes[theme].backgroundColor, borderColor: themes[theme].separatorColor }
+						{ backgroundColor: themes[theme].surfaceRoom, borderColor: themes[theme].separatorColor }
 					]}
 				>
 					<FlatList
diff --git a/app/views/ProfileView/components/DeleteAccountActionSheetContent/index.tsx b/app/views/ProfileView/components/DeleteAccountActionSheetContent/index.tsx
index cdbecc9fb..62594872f 100644
--- a/app/views/ProfileView/components/DeleteAccountActionSheetContent/index.tsx
+++ b/app/views/ProfileView/components/DeleteAccountActionSheetContent/index.tsx
@@ -70,7 +70,7 @@ export function DeleteAccountActionSheetContent(): React.ReactElement {
 
 const AlertText = ({ text = '' }) => {
 	const { colors } = useTheme();
-	return <Text style={{ fontSize: 14, ...sharedStyles.textRegular, marginBottom: 10, color: colors.dangerColor }}>{text}</Text>;
+	return <Text style={{ fontSize: 14, ...sharedStyles.textRegular, marginBottom: 10, color: colors.fontDanger }}>{text}</Text>;
 };
 
 function ConfirmDeleteAccountActionSheetContent({ changeOwnerRooms = '', removedRooms = '', password = '' }) {
diff --git a/app/views/ReadReceiptView/index.tsx b/app/views/ReadReceiptView/index.tsx
index f5e15ffac..aacf6af59 100644
--- a/app/views/ReadReceiptView/index.tsx
+++ b/app/views/ReadReceiptView/index.tsx
@@ -121,7 +121,7 @@ class ReadReceiptView extends React.Component<IReadReceiptViewProps, IReadReceip
 			return null;
 		}
 		return (
-			<View style={[styles.itemContainer, { backgroundColor: themes[theme].backgroundColor }]}>
+			<View style={[styles.itemContainer, { backgroundColor: themes[theme].surfaceRoom }]}>
 				<Avatar text={item.user.username} size={40} />
 				<View style={styles.infoContainer}>
 					<View style={styles.item}>
diff --git a/app/views/RoomActionsView/index.tsx b/app/views/RoomActionsView/index.tsx
index 5b7422249..3a9e2a995 100644
--- a/app/views/RoomActionsView/index.tsx
+++ b/app/views/RoomActionsView/index.tsx
@@ -794,7 +794,7 @@ class RoomActionsView extends React.Component<IRoomActionsViewProps, IRoomAction
 							}
 						})
 					}
-					style={{ backgroundColor: themes[theme].backgroundColor }}
+					style={{ backgroundColor: themes[theme].surfaceRoom }}
 					accessibilityLabel={I18n.t('Room_Info')}
 					enabled={!isGroupChatHandler}
 					testID='room-actions-info'
@@ -802,7 +802,7 @@ class RoomActionsView extends React.Component<IRoomActionsViewProps, IRoomAction
 					<View style={[styles.roomInfoContainer, { height: 72 * fontScale }]}>
 						<Avatar text={avatar} style={styles.avatar} size={50 * fontScale} type={t} rid={rid}>
 							{t === 'd' && member._id ? (
-								<View style={[sharedStyles.status, { backgroundColor: themes[theme].backgroundColor }]}>
+								<View style={[sharedStyles.status, { backgroundColor: themes[theme].surfaceRoom }]}>
 									<Status size={16} id={member._id} />
 								</View>
 							) : undefined}
diff --git a/app/views/RoomInfoEditView/index.tsx b/app/views/RoomInfoEditView/index.tsx
index be21ea139..d3889bc9c 100644
--- a/app/views/RoomInfoEditView/index.tsx
+++ b/app/views/RoomInfoEditView/index.tsx
@@ -521,12 +521,12 @@ class RoomInfoEditView extends React.Component<IRoomInfoEditViewProps, IRoomInfo
 
 		return (
 			<KeyboardView
-				style={{ backgroundColor: themes[theme].backgroundColor }}
+				style={{ backgroundColor: themes[theme].surfaceRoom }}
 				contentContainerStyle={sharedStyles.container}
 				keyboardVerticalOffset={128}
 			>
 				<StatusBar />
-				<SafeAreaView testID='room-info-edit-view' style={{ backgroundColor: themes[theme].backgroundColor }}>
+				<SafeAreaView testID='room-info-edit-view' style={{ backgroundColor: themes[theme].surfaceRoom }}>
 					<ScrollView
 						contentContainerStyle={sharedStyles.containerScrollView}
 						testID='room-info-edit-view-list'
diff --git a/app/views/RoomInfoView/index.tsx b/app/views/RoomInfoView/index.tsx
index 111c37224..bc0256d4d 100644
--- a/app/views/RoomInfoView/index.tsx
+++ b/app/views/RoomInfoView/index.tsx
@@ -283,9 +283,9 @@ const RoomInfoView = (): React.ReactElement => {
 	};
 
 	return (
-		<ScrollView style={[styles.scroll, { backgroundColor: colors.backgroundColor }]}>
+		<ScrollView style={[styles.scroll, { backgroundColor: colors.surfaceRoom }]}>
 			<StatusBar />
-			<SafeAreaView style={{ backgroundColor: colors.backgroundColor }} testID='room-info-view'>
+			<SafeAreaView style={{ backgroundColor: colors.surfaceRoom }} testID='room-info-view'>
 				<View style={[styles.avatarContainer, { backgroundColor: colors.auxiliaryBackground }]}>
 					<RoomInfoViewAvatar
 						username={room?.name || roomUser.username}
diff --git a/app/views/RoomMembersView/index.tsx b/app/views/RoomMembersView/index.tsx
index d935c8b91..813e344c5 100644
--- a/app/views/RoomMembersView/index.tsx
+++ b/app/views/RoomMembersView/index.tsx
@@ -379,7 +379,7 @@ const RoomMembersView = (): React.ReactElement => {
 			<FlatList
 				data={filteredMembers || state.members}
 				renderItem={({ item }) => (
-					<View style={{ backgroundColor: colors.backgroundColor }}>
+					<View style={{ backgroundColor: colors.surfaceRoom }}>
 						<UserItem
 							name={item.name as string}
 							username={item.username}
diff --git a/app/views/RoomView/JoinCode.tsx b/app/views/RoomView/JoinCode.tsx
index 97881af51..af1aa16dd 100644
--- a/app/views/RoomView/JoinCode.tsx
+++ b/app/views/RoomView/JoinCode.tsx
@@ -83,7 +83,7 @@ const JoinCode = React.memo(
 						style={[
 							styles.content,
 							isMasterDetail && [sharedStyles.modalFormSheet, styles.tablet],
-							{ backgroundColor: themes[theme].backgroundColor }
+							{ backgroundColor: themes[theme].surfaceRoom }
 						]}
 					>
 						<Text style={[styles.title, { color: themes[theme].fontTitlesLabels }]}>{I18n.t('Insert_Join_Code')}</Text>
diff --git a/app/views/RoomView/List/components/NavBottomFAB.tsx b/app/views/RoomView/List/components/NavBottomFAB.tsx
index 7673b697c..e78ff6859 100644
--- a/app/views/RoomView/List/components/NavBottomFAB.tsx
+++ b/app/views/RoomView/List/components/NavBottomFAB.tsx
@@ -36,7 +36,7 @@ const NavBottomFAB = memo(
 
 		return (
 			<View style={[styles.container, positionStyle]} testID='nav-jump-to-bottom'>
-				<Touch onPress={() => onPress()} style={[styles.button, { backgroundColor: colors.backgroundColor }]}>
+				<Touch onPress={() => onPress()} style={[styles.button, { backgroundColor: colors.surfaceRoom }]}>
 					<View style={[styles.content, { borderColor: colors.borderColor }]}>
 						<CustomIcon name='chevron-down' color={colors.auxiliaryTintColor} size={36} />
 					</View>
diff --git a/app/views/RoomView/LoadMore/LoadMore.stories.tsx b/app/views/RoomView/LoadMore/LoadMore.stories.tsx
index c95475823..3fe35c83e 100644
--- a/app/views/RoomView/LoadMore/LoadMore.stories.tsx
+++ b/app/views/RoomView/LoadMore/LoadMore.stories.tsx
@@ -26,7 +26,7 @@ export const Basic = () => (
 
 const ThemeStory = ({ theme }: { theme: TSupportedThemes }) => (
 	<ThemeContext.Provider value={{ theme, colors: themes[theme] }}>
-		<ScrollView style={{ backgroundColor: themes[theme].backgroundColor }}>
+		<ScrollView style={{ backgroundColor: themes[theme].surfaceRoom }}>
 			<LoadMore loaderId='5' type={MessageTypeLoad.PREVIOUS_CHUNK} />
 			<Message msg='Hey!' theme={theme} />
 			<Message msg={longText} theme={theme} isHeader={false} />
diff --git a/app/views/RoomView/Separator.tsx b/app/views/RoomView/Separator.tsx
index 374e21548..96048cf0d 100644
--- a/app/views/RoomView/Separator.tsx
+++ b/app/views/RoomView/Separator.tsx
@@ -35,7 +35,7 @@ const DateSeparator = ({ ts, unread }: { ts: Date | string | null; unread: boole
 	const { theme } = useTheme();
 	const date = ts ? moment(ts).format('LL') : null;
 	const unreadLine = { backgroundColor: themes[theme].dangerColor };
-	const unreadText = { color: themes[theme].dangerColor };
+	const unreadText = { color: themes[theme].fontDanger };
 	if (ts && unread) {
 		return (
 			<View style={styles.container}>
diff --git a/app/views/RoomView/index.tsx b/app/views/RoomView/index.tsx
index cfa7ee6e2..a1ceb22bd 100644
--- a/app/views/RoomView/index.tsx
+++ b/app/views/RoomView/index.tsx
@@ -1467,7 +1467,7 @@ class RoomView extends React.Component<IRoomViewProps, IRoomViewState> {
 					getText: this.getText
 				}}
 			>
-				<SafeAreaView style={{ backgroundColor: themes[theme].backgroundColor }} testID='room-view'>
+				<SafeAreaView style={{ backgroundColor: themes[theme].surfaceRoom }} testID='room-view'>
 					<StatusBar />
 					<Banner title={I18n.t('Announcement')} text={announcement} bannerClosed={bannerClosed} closeBanner={this.closeBanner} />
 					<List
diff --git a/app/views/RoomsListView/ServerDropdown.tsx b/app/views/RoomsListView/ServerDropdown.tsx
index 5472b4115..ee461bc53 100644
--- a/app/views/RoomsListView/ServerDropdown.tsx
+++ b/app/views/RoomsListView/ServerDropdown.tsx
@@ -206,7 +206,7 @@ class ServerDropdown extends Component<IServerDropdownProps, IServerDropdownStat
 						styles.dropdownContainer,
 						{
 							transform: [{ translateY }],
-							backgroundColor: themes[theme].backgroundColor,
+							backgroundColor: themes[theme].surfaceRoom,
 							borderColor: themes[theme].separatorColor
 						}
 					]}
diff --git a/app/views/RoomsListView/index.tsx b/app/views/RoomsListView/index.tsx
index 21df87b42..541cb0105 100644
--- a/app/views/RoomsListView/index.tsx
+++ b/app/views/RoomsListView/index.tsx
@@ -940,7 +940,7 @@ class RoomsListView extends React.Component<IRoomsListViewProps, IRoomsListViewS
 	renderSectionHeader = (header: string) => {
 		const { theme } = this.props;
 		return (
-			<View style={[styles.groupTitleContainer, { backgroundColor: themes[theme].backgroundColor }]}>
+			<View style={[styles.groupTitleContainer, { backgroundColor: themes[theme].surfaceRoom }]}>
 				<Text style={[styles.groupTitle, { color: themes[theme].controlText }]}>{I18n.t(header)}</Text>
 			</View>
 		);
@@ -966,7 +966,7 @@ class RoomsListView extends React.Component<IRoomsListViewProps, IRoomsListViewS
 				data={searching ? search : chats}
 				extraData={searching ? search : chats}
 				keyExtractor={item => keyExtractor(item, searching)}
-				style={[styles.list, { backgroundColor: themes[theme].backgroundColor }]}
+				style={[styles.list, { backgroundColor: themes[theme].surfaceRoom }]}
 				renderItem={this.renderItem}
 				ListHeaderComponent={this.renderListHeader}
 				getItemLayout={(data, index) => getItemLayout(data, index, height)}
@@ -989,7 +989,7 @@ class RoomsListView extends React.Component<IRoomsListViewProps, IRoomsListViewS
 		const { showServerDropdown, theme, navigation } = this.props;
 
 		return (
-			<SafeAreaView testID='rooms-list-view' style={{ backgroundColor: themes[theme].backgroundColor }}>
+			<SafeAreaView testID='rooms-list-view' style={{ backgroundColor: themes[theme].surfaceRoom }}>
 				<StatusBar />
 				{this.renderHeader()}
 				{this.renderScroll()}
diff --git a/app/views/SearchMessagesView/index.tsx b/app/views/SearchMessagesView/index.tsx
index e8b8322e1..2e7e67589 100644
--- a/app/views/SearchMessagesView/index.tsx
+++ b/app/views/SearchMessagesView/index.tsx
@@ -273,7 +273,7 @@ class SearchMessagesView extends React.Component<ISearchMessagesViewProps, ISear
 	renderEmpty = () => {
 		const { theme } = this.props;
 		return (
-			<View style={[styles.listEmptyContainer, { backgroundColor: themes[theme].backgroundColor }]}>
+			<View style={[styles.listEmptyContainer, { backgroundColor: themes[theme].surfaceRoom }]}>
 				<Text style={[styles.noDataFound, { color: themes[theme].fontTitlesLabels }]}>{I18n.t('No_results_found')}</Text>
 			</View>
 		);
@@ -313,7 +313,7 @@ class SearchMessagesView extends React.Component<ISearchMessagesViewProps, ISear
 			<FlatList
 				data={messages}
 				renderItem={this.renderItem}
-				style={[styles.list, { backgroundColor: themes[theme].backgroundColor }]}
+				style={[styles.list, { backgroundColor: themes[theme].surfaceRoom }]}
 				keyExtractor={item => item._id}
 				onEndReached={this.onEndReached}
 				ListFooterComponent={loading ? <ActivityIndicator /> : null}
@@ -327,7 +327,7 @@ class SearchMessagesView extends React.Component<ISearchMessagesViewProps, ISear
 	render() {
 		const { theme } = this.props;
 		return (
-			<SafeAreaView style={{ backgroundColor: themes[theme].backgroundColor }} testID='search-messages-view'>
+			<SafeAreaView style={{ backgroundColor: themes[theme].surfaceRoom }} testID='search-messages-view'>
 				<StatusBar />
 				<View style={styles.searchContainer}>
 					<FormTextInput
diff --git a/app/views/SelectListView.tsx b/app/views/SelectListView.tsx
index 1a8d2fb98..14f358950 100644
--- a/app/views/SelectListView.tsx
+++ b/app/views/SelectListView.tsx
@@ -101,7 +101,7 @@ class SelectListView extends React.Component<ISelectListViewProps, ISelectListVi
 	renderInfoText = () => {
 		const { theme } = this.props;
 		return (
-			<View style={{ backgroundColor: themes[theme].backgroundColor }}>
+			<View style={{ backgroundColor: themes[theme].surfaceRoom }}>
 				<Text style={[styles.buttonText, { color: themes[theme].bodyText }]}>{I18n.t(this.infoText)}</Text>
 			</View>
 		);
@@ -194,7 +194,7 @@ class SelectListView extends React.Component<ISelectListViewProps, ISelectListVi
 					keyExtractor={item => item.rid}
 					renderItem={this.renderItem}
 					ListHeaderComponent={this.isSearch ? this.renderSearch : this.renderInfoText}
-					contentContainerStyle={{ backgroundColor: themes[theme].backgroundColor }}
+					contentContainerStyle={{ backgroundColor: themes[theme].surfaceRoom }}
 					keyboardShouldPersistTaps='always'
 				/>
 			</SafeAreaView>
diff --git a/app/views/SelectedUsersView/Header.tsx b/app/views/SelectedUsersView/Header.tsx
index 6d2824a35..31fb0d2a9 100644
--- a/app/views/SelectedUsersView/Header.tsx
+++ b/app/views/SelectedUsersView/Header.tsx
@@ -41,7 +41,7 @@ const Header = ({
 	const onContentSizeChange = () => flatlist?.current?.scrollToEnd({ animated: true });
 
 	return (
-		<View style={{ backgroundColor: themes[theme].backgroundColor }}>
+		<View style={{ backgroundColor: themes[theme].surfaceRoom }}>
 			<SearchBox onChangeText={(text: string) => onChangeText(text)} testID='select-users-view-search' />
 			{users.length === 0 ? null : (
 				<View>
diff --git a/app/views/SelectedUsersView/index.tsx b/app/views/SelectedUsersView/index.tsx
index 0d4d696e9..6ebdee0a7 100644
--- a/app/views/SelectedUsersView/index.tsx
+++ b/app/views/SelectedUsersView/index.tsx
@@ -172,7 +172,7 @@ const SelectedUsersView = () => {
 				ItemSeparatorComponent={List.Separator}
 				ListFooterComponent={<List.Separator />}
 				ListHeaderComponent={<Header useRealName={useRealName} onChangeText={handleSearch} onPressItem={toggleUser} />}
-				contentContainerStyle={{ backgroundColor: colors.backgroundColor }}
+				contentContainerStyle={{ backgroundColor: colors.surfaceRoom }}
 				keyboardShouldPersistTaps='always'
 			/>
 		</SafeAreaView>
diff --git a/app/views/ShareListView/index.tsx b/app/views/ShareListView/index.tsx
index a103869b8..431db3b52 100644
--- a/app/views/ShareListView/index.tsx
+++ b/app/views/ShareListView/index.tsx
@@ -432,8 +432,8 @@ class ShareListView extends React.Component<IShareListViewProps, IState> {
 			return (
 				<SafeAreaView>
 					<ScrollView
-						style={{ backgroundColor: themes[theme].backgroundColor }}
-						contentContainerStyle={[styles.container, styles.centered, { backgroundColor: themes[theme].backgroundColor }]}
+						style={{ backgroundColor: themes[theme].surfaceRoom }}
+						contentContainerStyle={[styles.container, styles.centered, { backgroundColor: themes[theme].surfaceRoom }]}
 					>
 						<Text style={[styles.permissionTitle, { color: themes[theme].fontTitlesLabels }]}>{I18n.t('Read_External_Permission')}</Text>
 						<Text style={[styles.permissionMessage, { color: themes[theme].bodyText }]}>
@@ -450,7 +450,7 @@ class ShareListView extends React.Component<IShareListViewProps, IState> {
 					data={searching ? searchResults : chats}
 					keyExtractor={keyExtractor}
 					style={[styles.flatlist, { backgroundColor: themes[theme].auxiliaryBackground }]}
-					contentContainerStyle={{ backgroundColor: themes[theme].backgroundColor }}
+					contentContainerStyle={{ backgroundColor: themes[theme].surfaceRoom }}
 					renderItem={this.renderItem}
 					getItemLayout={getItemLayout}
 					ItemSeparatorComponent={List.Separator}
diff --git a/app/views/ShareView/Thumbs.tsx b/app/views/ShareView/Thumbs.tsx
index 2750f9550..5fdea28e7 100644
--- a/app/views/ShareView/Thumbs.tsx
+++ b/app/views/ShareView/Thumbs.tsx
@@ -126,7 +126,7 @@ const Thumb = ({ item, theme, isShareExtension, onPress, onRemove }: IThumb) =>
 				onPress={() => onRemove(item)}
 			>
 				<View style={[styles.removeView, { borderColor: themes[theme].auxiliaryBackground }]}>
-					<CustomIcon name='close' color={themes[theme].backgroundColor} size={14} />
+					<CustomIcon name='close' color={themes[theme].surfaceRoom} size={14} />
 				</View>
 			</RectButton>
 			{!item?.canUpload ? (
diff --git a/app/views/ShareView/index.tsx b/app/views/ShareView/index.tsx
index 79ea4ca0b..eaa283f2a 100644
--- a/app/views/ShareView/index.tsx
+++ b/app/views/ShareView/index.tsx
@@ -376,7 +376,7 @@ class ShareView extends Component<IShareViewProps, IShareViewState> {
 		return (
 			<FormTextInput
 				containerStyle={styles.inputContainer}
-				inputStyle={[styles.input, styles.textInput, { backgroundColor: themes[theme].focusedBackground }]}
+				inputStyle={[styles.input, styles.textInput, { backgroundColor: themes[theme].surfaceLight }]}
 				placeholder=''
 				onChangeText={this.onChangeText}
 				defaultValue=''
@@ -394,7 +394,7 @@ class ShareView extends Component<IShareViewProps, IShareViewState> {
 		const { theme } = this.props;
 		if (readOnly || isBlocked(room)) {
 			return (
-				<View style={[styles.container, styles.centered, { backgroundColor: themes[theme].backgroundColor }]}>
+				<View style={[styles.container, styles.centered, { backgroundColor: themes[theme].surfaceRoom }]}>
 					<Text style={[styles.title, { color: themes[theme].fontTitlesLabels }]}>
 						{isBlocked(room) ? I18n.t('This_room_is_blocked') : I18n.t('This_room_is_read_only')}
 					</Text>
@@ -402,7 +402,7 @@ class ShareView extends Component<IShareViewProps, IShareViewState> {
 			);
 		}
 		return (
-			<SafeAreaView style={{ backgroundColor: themes[theme].backgroundColor }}>
+			<SafeAreaView style={{ backgroundColor: themes[theme].surfaceRoom }}>
 				<StatusBar barStyle='light-content' backgroundColor={themes[theme].previewBackground} />
 				{this.renderContent()}
 			</SafeAreaView>
diff --git a/app/views/SidebarView/index.tsx b/app/views/SidebarView/index.tsx
index c4b01fb6b..7c69327a4 100644
--- a/app/views/SidebarView/index.tsx
+++ b/app/views/SidebarView/index.tsx
@@ -309,7 +309,7 @@ class Sidebar extends Component<ISidebarProps, ISidebarState> {
 			return (
 				<SidebarItem
 					text={I18n.t('Supported_versions_warning_update_required')}
-					textColor={themes[theme!].dangerColor}
+					textColor={themes[theme!].fontDanger}
 					left={<CustomIcon name='warning' size={20} color={themes[theme!].dangerColor} />}
 					theme={theme!}
 					onPress={() => this.onPressSupportedVersionsWarning()}
@@ -327,12 +327,12 @@ class Sidebar extends Component<ISidebarProps, ISidebarState> {
 			return null;
 		}
 		return (
-			<SafeAreaView testID='sidebar-view' style={{ backgroundColor: themes[theme!].focusedBackground }} vertical={isMasterDetail}>
+			<SafeAreaView testID='sidebar-view' style={{ backgroundColor: themes[theme!].surfaceLight }} vertical={isMasterDetail}>
 				<ScrollView
 					style={[
 						styles.container,
 						{
-							backgroundColor: isMasterDetail ? themes[theme!].backgroundColor : themes[theme!].focusedBackground
+							backgroundColor: isMasterDetail ? themes[theme!].surfaceRoom : themes[theme!].surfaceLight
 						}
 					]}
 					{...scrollPersistTaps}
diff --git a/app/views/ThreadMessagesView/Dropdown/DropdownItem.tsx b/app/views/ThreadMessagesView/Dropdown/DropdownItem.tsx
index e02b29f0c..4e1338079 100644
--- a/app/views/ThreadMessagesView/Dropdown/DropdownItem.tsx
+++ b/app/views/ThreadMessagesView/Dropdown/DropdownItem.tsx
@@ -30,7 +30,7 @@ interface IDropdownItem {
 const DropdownItem = React.memo(({ onPress, iconName, text }: IDropdownItem) => {
 	const { colors } = useTheme();
 	return (
-		<Touch onPress={onPress} style={{ backgroundColor: colors.backgroundColor }}>
+		<Touch onPress={onPress} style={{ backgroundColor: colors.surfaceRoom }}>
 			<View style={styles.container}>
 				<Text style={[styles.text, { color: colors.fontSecondaryInfo }]}>{text}</Text>
 				{iconName ? <CustomIcon name={iconName} size={22} color={colors.fontSecondaryInfo} /> : null}
diff --git a/app/views/ThreadMessagesView/Dropdown/index.tsx b/app/views/ThreadMessagesView/Dropdown/index.tsx
index d50a7e330..fcc4a3f8a 100644
--- a/app/views/ThreadMessagesView/Dropdown/index.tsx
+++ b/app/views/ThreadMessagesView/Dropdown/index.tsx
@@ -80,7 +80,7 @@ class Dropdown extends React.Component<IDropdownProps> {
 						styles.dropdownContainer,
 						{
 							transform: [{ translateY }],
-							backgroundColor: themes[theme].backgroundColor,
+							backgroundColor: themes[theme].surfaceRoom,
 							borderColor: themes[theme].separatorColor
 						}
 					]}
diff --git a/app/views/ThreadMessagesView/Item.tsx b/app/views/ThreadMessagesView/Item.tsx
index f8946a698..be0771340 100644
--- a/app/views/ThreadMessagesView/Item.tsx
+++ b/app/views/ThreadMessagesView/Item.tsx
@@ -77,7 +77,7 @@ const Item = ({ item, useRealName, user, badgeColor, onPress, toggleFollowThread
 		<Touchable
 			onPress={() => onPress(item)}
 			testID={`thread-messages-view-${item.msg}`}
-			style={{ backgroundColor: themes[theme].backgroundColor }}
+			style={{ backgroundColor: themes[theme].surfaceRoom }}
 		>
 			<View style={styles.container}>
 				<Avatar style={styles.avatar} text={item?.u?.username} size={36} borderRadius={4} />
diff --git a/app/views/ThreadMessagesView/index.tsx b/app/views/ThreadMessagesView/index.tsx
index 91e620c5d..972c0cae0 100644
--- a/app/views/ThreadMessagesView/index.tsx
+++ b/app/views/ThreadMessagesView/index.tsx
@@ -494,7 +494,7 @@ class ThreadMessagesView extends React.Component<IThreadMessagesViewProps, IThre
 				data={displayingThreads}
 				extraData={this.state}
 				renderItem={this.renderItem}
-				style={[styles.list, { backgroundColor: themes[theme].backgroundColor }]}
+				style={[styles.list, { backgroundColor: themes[theme].surfaceRoom }]}
 				contentContainerStyle={styles.contentContainer}
 				onEndReached={this.load}
 				onEndReachedThreshold={0.5}
diff --git a/app/views/WithoutServersView.tsx b/app/views/WithoutServersView.tsx
index 41350ce7f..7a4989bef 100644
--- a/app/views/WithoutServersView.tsx
+++ b/app/views/WithoutServersView.tsx
@@ -38,7 +38,7 @@ const WithoutServerView = (): React.ReactElement => {
 	}, [navigation]);
 
 	return (
-		<View style={[styles.container, { backgroundColor: colors.backgroundColor }]}>
+		<View style={[styles.container, { backgroundColor: colors.surfaceRoom }]}>
 			<Text style={[styles.title, { color: colors.fontTitlesLabels }]}>{I18n.t('Without_Servers')}</Text>
 			<Text style={[styles.content, { color: colors.fontTitlesLabels }]}>
 				{I18n.t('You_need_to_access_at_least_one_RocketChat_server_to_share_something')}