diff --git a/src/styles/StyleUtils.ts b/src/styles/StyleUtils.ts
index ad1b59ec2253..0832b6a3978c 100644
--- a/src/styles/StyleUtils.ts
+++ b/src/styles/StyleUtils.ts
@@ -678,10 +678,10 @@ function extractValuesFromRGB(color: string): number[] | null {
  * @returns The theme color as an RGB value.
  */
 function getThemeBackgroundColor(bgColor: string = themeColors.appBG): string {
-    const backdropOpacity = variables.modalFullscreenBackdropOpacity;
+    const backdropOpacity = variables.overlayOpacity;
 
     const [backgroundRed, backgroundGreen, backgroundBlue] = extractValuesFromRGB(bgColor) ?? hexadecimalToRGBArray(bgColor) ?? [];
-    const [backdropRed, backdropGreen, backdropBlue] = hexadecimalToRGBArray(themeColors.modalBackdrop) ?? [];
+    const [backdropRed, backdropGreen, backdropBlue] = hexadecimalToRGBArray(themeColors.overlay) ?? [];
     const normalizedBackdropRGB = convertRGBToUnitValues(backdropRed, backdropGreen, backdropBlue);
     const normalizedBackgroundRGB = convertRGBToUnitValues(backgroundRed, backgroundGreen, backgroundBlue);
     const [red, green, blue] = convertRGBAToRGB(normalizedBackdropRGB, normalizedBackgroundRGB, backdropOpacity);
diff --git a/src/styles/themes/default.js b/src/styles/themes/default.js
index 75db4be30e2b..ef64c4caec35 100644
--- a/src/styles/themes/default.js
+++ b/src/styles/themes/default.js
@@ -53,7 +53,6 @@ const darkTheme = {
     textMutedReversed: colors.darkIcons,
     textError: colors.red,
     offline: colors.darkIcons,
-    modalBackdrop: colors.darkHighlightBackground,
     modalBackground: colors.darkAppBackground,
     cardBG: colors.darkHighlightBackground,
     cardBorder: colors.darkHighlightBackground,
diff --git a/src/styles/themes/light.js b/src/styles/themes/light.js
index 8bc149c5af08..c459f9f10da6 100644
--- a/src/styles/themes/light.js
+++ b/src/styles/themes/light.js
@@ -51,7 +51,6 @@ const lightTheme = {
     textMutedReversed: colors.lightIcons,
     textError: colors.red,
     offline: colors.lightIcons,
-    modalBackdrop: colors.lightHighlightBackground,
     modalBackground: colors.lightAppBackground,
     cardBG: colors.lightHighlightBackground,
     cardBorder: colors.lightHighlightBackground,
diff --git a/src/styles/variables.ts b/src/styles/variables.ts
index 9ee9b64e6467..a7191ce5b002 100644
--- a/src/styles/variables.ts
+++ b/src/styles/variables.ts
@@ -78,7 +78,6 @@ export default {
     extraSmallMobileResponsiveWidthBreakpoint: 320,
     extraSmallMobileResponsiveHeightBreakpoint: 667,
     mobileResponsiveWidthBreakpoint: 800,
-    modalFullscreenBackdropOpacity: 0.5,
     tabletResponsiveWidthBreakpoint: 1024,
     safeInsertPercentage: 0.7,
     sideBarWidth: 375,