diff --git a/src/components/Modal/component.tsx b/src/components/Modal/component.tsx
index 6376cf1..0ab2e07 100644
--- a/src/components/Modal/component.tsx
+++ b/src/components/Modal/component.tsx
@@ -1,5 +1,4 @@
 import React, { useCallback } from 'react';
-import ReactModal from 'react-modal';
 import * as Styled from './styles';
 import { BBBTypography } from '../Typography';
 import { MdClose } from 'react-icons/md';
@@ -49,7 +48,7 @@ const Modal: React.FC<ModalProps> = ({
   ), [footerContent, showDividers]);
 
   return (
-    <ReactModal
+    <Styled.Modal
       {...rest}
       isOpen={isOpen}
       onRequestClose={onRequestClose}
@@ -87,7 +86,7 @@ const Modal: React.FC<ModalProps> = ({
         {!noFooter && !stickyFooter && renderFooter(stickyFooter)}
         </Styled.ModalScrollArea>
       {!noFooter && stickyFooter && renderFooter(stickyFooter)}
-    </ReactModal>
+    </Styled.Modal>
   )
 }
 
diff --git a/src/components/Modal/styles.ts b/src/components/Modal/styles.ts
index 1002ac9..8c98409 100644
--- a/src/components/Modal/styles.ts
+++ b/src/components/Modal/styles.ts
@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { Styles } from 'react-modal';
+import ReactModal, { Styles } from 'react-modal';
 import * as React from 'react';
 import { spacingLarge, spacingMedium, spacingSmallMedium, borderRadiusDefault } from '../../stylesheets/sizing';
 import { colorWhite, colorOverlay } from '../../stylesheets/palette';
@@ -25,7 +25,6 @@ export const modalStyles: Styles = {
     right: 'auto',
     bottom: 'auto',
     borderRadius: borderRadiusDefault,
-    background: colorWhite,
     overflow: 'hidden',
     WebkitOverflowScrolling: 'touch',
     outline: 'none',
@@ -73,3 +72,8 @@ export const ModalFooter = styled.div<StyledModalFooterProps>`
       background-color: ${colorWhite};
     `}
 `;
+
+// Background lives in a class instead of the inline `style` so the BBB dark theme and consumers can override it.
+export const Modal = styled(ReactModal)`
+  background: ${colorWhite};
+`;
diff --git a/src/stylesheets/palette.ts b/src/stylesheets/palette.ts
index 6b43f8e..d00cee3 100644
--- a/src/stylesheets/palette.ts
+++ b/src/stylesheets/palette.ts
@@ -2,10 +2,12 @@
 export const colorNeutral2 = 'var(--color-neutral-2, #717C91)';
 export const colorNeutral3 = 'var(--color-neutral-3, #B0BDC9)';
 export const colorNeutral4 = 'var(--color-neutral-4, #DCE4EC)';
-export const colorWhite = 'var(--color-neutral-white, #FFFFFF)';
 export const colorLightGray = 'var(--color-light-gray, #F4F6FA)';
 export const colorGray = 'var(--color-gray, #4E5A66)';
 export const colorDarkGray = 'var(--color-dark-gray, #393C48)';
+const colorWhite_base = 'var(--color-neutral-white, #FFFFFF)';
+// Mapped to core css vars
+export const colorWhite = `var(--color-white, ${colorWhite_base})`;
 
 // Brand colors
 // Last-resort fallbacks mirror bigbluebutton-html5's palette so that a client
@@ -39,7 +41,7 @@ export const colorBackgroundBlue = `var(--color-background-blue, ${colorBrandLig
 
 // Border colors
 const colorBorderDefault_base = `var(--color-border-default, ${colorNeutral3})`;
-export const colorBorderSelected = `var(--color-border-selected, ${colorBrand1_base})`;
+export const colorBorderSelected = `var(--color-border-selected, ${colorBrand1})`;
 export const colorBorderError = `var(--color-border-error, ${colorError_base})`;
 // Mapped to core css vars
 export const colorBorderDefault = `var(--default-border, ${colorBorderDefault_base})`;