fix(Basic Auth): Fix Basic Auth overlay background in Dark Mode

3 files changed, 3 insertions, 1 deletions

diff --git a/packages/theme/src/themes/dark/index.ts b/packages/theme/src/themes/dark/index.ts
index e94f54c55..67d0cfb71 100644
--- a/packages/theme/src/themes/dark/index.ts
+++ b/packages/theme/src/themes/dark/index.ts
@@ -66,6 +66,7 @@ export const selectSearchColor = inputBackground;
 
 // Modal
 export const colorModalOverlayBackground = color(legacyStyles.darkThemeBlack).alpha(0.8).rgb().string();
+export const colorModalBackground = colorContentBackground;
 
 // Services
 export const services = merge({}, defaultStyles.services, {
diff --git a/packages/theme/src/themes/default/index.ts b/packages/theme/src/themes/default/index.ts
index 4e042afce..057fde72f 100644
--- a/packages/theme/src/themes/default/index.ts
+++ b/packages/theme/src/themes/default/index.ts
@@ -145,6 +145,7 @@ export const badgeBorderRadius = 50;
 
 // Modal
 export const colorModalOverlayBackground = color('#000').alpha(0.5).rgb().string();
+export const colorModalBackground = colorContentBackground;
 
 // Services
 export const services = {
diff --git a/src/components/ui/Modal/styles.js b/src/components/ui/Modal/styles.js
index 49b970c97..c2bebf9bb 100644
--- a/src/components/ui/Modal/styles.js
+++ b/src/components/ui/Modal/styles.js
@@ -13,7 +13,7 @@ export default theme => ({
     display: 'flex',
   },
   modal: {
-    background: '#FFF',
+    background: theme.colorModalBackground,
     maxWidth: '90%',
     height: 'auto',
     margin: 'auto auto',