diff --git a/src/components/Modal/BaseModal.js b/src/components/Modal/BaseModal.js
index 91b1867a6f91..323df19c7720 100644
--- a/src/components/Modal/BaseModal.js
+++ b/src/components/Modal/BaseModal.js
@@ -9,6 +9,7 @@ import themeColors from '../../styles/themes/default';
 import {propTypes as modalPropTypes, defaultProps as modalDefaultProps} from './modalPropTypes';
 import * as Modal from '../../libs/actions/Modal';
 import getModalStyles from '../../styles/getModalStyles';
+import variables from '../../styles/variables';
 
 const propTypes = {
     ...modalPropTypes,
@@ -100,8 +101,8 @@ class BaseModal extends PureComponent {
                 onSwipeComplete={this.props.onClose}
                 swipeDirection={swipeDirection}
                 isVisible={this.props.isVisible}
-                backdropColor={themeColors.modalBackdrop}
-                backdropOpacity={hideBackdrop ? 0 : 0.5}
+                backdropColor={themeColors.overlay}
+                backdropOpacity={hideBackdrop ? 0 : variables.overlayOpacity}
                 backdropTransitionOutTiming={0}
                 hasBackdrop={this.props.fullscreen}
                 coverScreen={this.props.fullscreen}
diff --git a/src/components/MultipleAvatars.js b/src/components/MultipleAvatars.js
index 70e917bde33c..2f8f86e6f337 100644
--- a/src/components/MultipleAvatars.js
+++ b/src/components/MultipleAvatars.js
@@ -9,6 +9,7 @@ import Text from './Text';
 import themeColors from '../styles/themes/default';
 import * as StyleUtils from '../styles/StyleUtils';
 import CONST from '../CONST';
+import variables from '../styles/variables';
 
 const propTypes = {
     /** Array of avatar URLs or icons */
@@ -99,6 +100,9 @@ const MultipleAvatars = (props) => {
                                 styles.alignItemsCenter,
                                 styles.justifyContentCenter,
                                 StyleUtils.getHorizontalStackedAvatarBorderStyle(props.isHovered, props.isPressed),
+
+                                // Set overlay background color with RGBA value so that the text will not inherit opacity
+                                StyleUtils.getBackgroundColorWithOpacityStyle(themeColors.overlay, variables.overlayOpacity),
                                 styles.horizontalStackedAvatar4Overlay,
                             ]}
                         >
diff --git a/src/components/RoomHeaderAvatars.js b/src/components/RoomHeaderAvatars.js
index 4b96b45af8cc..e3c96ccc6d80 100644
--- a/src/components/RoomHeaderAvatars.js
+++ b/src/components/RoomHeaderAvatars.js
@@ -73,7 +73,7 @@ const RoomHeaderAvatars = (props) => {
                                 <View
                                     style={[
                                         styles.roomHeaderAvatar,
-                                        styles.screenBlur,
+                                        styles.roomHeaderAvatarOverlay,
                                     ]}
                                 />
                                 <Text style={styles.avatarInnerTextChat}>
diff --git a/src/libs/Navigation/AppNavigator/modalCardStyleInterpolator.js b/src/libs/Navigation/AppNavigator/modalCardStyleInterpolator.js
index 433620deecb9..1ec48a356328 100644
--- a/src/libs/Navigation/AppNavigator/modalCardStyleInterpolator.js
+++ b/src/libs/Navigation/AppNavigator/modalCardStyleInterpolator.js
@@ -1,6 +1,7 @@
 import {Animated} from 'react-native';
 import variables from '../../../styles/variables';
 import getCardStyles from '../../../styles/cardStyles';
+import themeColors from '../../../styles/themes/default';
 
 export default (
     isSmallScreenWidth,
@@ -34,9 +35,10 @@ export default (
         },
         cardStyle,
         overlayStyle: {
+            backgroundColor: themeColors.overlay,
             opacity: progress.interpolate({
                 inputRange: [0, 1],
-                outputRange: [0, 0.3],
+                outputRange: [0, variables.overlayOpacity],
                 extrapolate: 'clamp',
             }),
         },
diff --git a/src/styles/styles.js b/src/styles/styles.js
index 2151466ac081..d9f5a3616def 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -1734,7 +1734,6 @@ const styles = {
         width: 28,
         borderWidth: 2,
         borderStyle: 'solid',
-        backgroundColor: themeColors.opaqueAvatar,
         borderRadius: 24,
         zIndex: 6,
     },
@@ -1972,14 +1971,14 @@ const styles = {
         marginLeft: -16,
     },
 
-    screenBlur: {
+    roomHeaderAvatarOverlay: {
         position: 'absolute',
         top: 0,
         right: 0,
         bottom: 0,
         left: 0,
-        backgroundColor: themeColors.inverse,
-        opacity: 0.5,
+        backgroundColor: themeColors.overlay,
+        opacity: variables.overlayOpacity,
     },
 
     avatarInnerTextChat: {
@@ -2496,13 +2495,13 @@ const styles = {
     },
 
     cardOverlay: {
-        backgroundColor: themeColors.modalBackdrop,
+        backgroundColor: themeColors.overlay,
         position: 'absolute',
         top: 0,
         left: 0,
         width: '100%',
         height: '100%',
-        opacity: 0.5,
+        opacity: variables.overlayOpacity,
     },
 
     communicationsLinkIcon: {
diff --git a/src/styles/themes/default.js b/src/styles/themes/default.js
index 81327af41eda..8e362d605745 100644
--- a/src/styles/themes/default.js
+++ b/src/styles/themes/default.js
@@ -31,6 +31,7 @@ const darkTheme = {
     transparent: colors.transparent,
 
     // Additional keys
+    overlay: colors.greenHighlightBackground,
     inverse: colors.white,
     shadow: colors.black,
     componentBG: colors.greenAppBackground,
@@ -46,8 +47,7 @@ const darkTheme = {
     textMutedReversed: colors.greenIcons,
     textError: colors.red,
     offline: colors.greenIcons,
-    opaqueAvatar: 'rgba(198, 201, 202, 0.64)',
-    modalBackdrop: colors.greenIcons,
+    modalBackdrop: colors.greenHighlightBackground,
     modalBackground: colors.greenAppBackground,
     cardBG: colors.greenHighlightBackground,
     cardBorder: colors.greenHighlightBackground,
@@ -87,8 +87,6 @@ const oldTheme = {
     textMutedReversed: colors.gray3,
     buttonDefaultBG: colors.gray2,
     offline: colors.gray3,
-    sidebarButtonBG: 'rgba(198, 201, 202, 0.25)',
-    opaqueAvatar: 'rgba(011, 027, 052, 0.64)',
     modalBackdrop: colors.gray3,
     modalBackground: colors.gray2,
     buttonDisabledBG: colors.gray2,
@@ -104,6 +102,7 @@ const oldTheme = {
     cardBG: colors.gray1,
     cardBorder: colors.gray1,
     checkBox: colors.blue,
+    overlay: colors.gray1,
 
     // Merging new Keys for Dark Mode merge. Delete after new branding is implemented.
     highlightBG: colors.gray1,
diff --git a/src/styles/variables.js b/src/styles/variables.js
index e87b524a182e..b391209047c5 100644
--- a/src/styles/variables.js
+++ b/src/styles/variables.js
@@ -70,6 +70,7 @@ export default {
     optionRowHeight: 64,
     optionRowHeightCompact: 52,
     optionsListSectionHeaderHeight: getValueUsingPixelRatio(54, 60),
+    overlayOpacity: 0.6,
     lineHeightSmall: getValueUsingPixelRatio(14, 16),
     lineHeightNormal: getValueUsingPixelRatio(16, 21),
     lineHeightLarge: getValueUsingPixelRatio(18, 24),