diff --git a/lib/components/modal-overlay.css b/lib/components/modal-overlay.css
--- a/lib/components/modal-overlay.css
+++ b/lib/components/modal-overlay.css
@@ -5,7 +5,6 @@
   height: 100%;
   z-index: 4;
   width: 100%;
-  background-color: #000000e6;
   display: flex;
   flex-direction: column;
   align-items: center;
diff --git a/lib/components/modal-overlay.react.js b/lib/components/modal-overlay.react.js
--- a/lib/components/modal-overlay.react.js
+++ b/lib/components/modal-overlay.react.js
@@ -9,10 +9,16 @@
   +onClose: () => void,
   +children?: React.Node,
   +disableAutoFocus?: boolean,
+  +backgroundColor?: string,
 };
 
 function ModalOverlay(props: ModalOverlayProps): React.Node {
-  const { children, onClose, disableAutoFocus } = props;
+  const {
+    children,
+    onClose,
+    disableAutoFocus,
+    backgroundColor = 'var(--modal-overlay-background-90)',
+  } = props;
 
   const overlayRef = React.useRef();
   const firstClickRef = React.useRef(null);
@@ -48,6 +54,13 @@
     [onClose],
   );
 
+  const containerStyle = React.useMemo(
+    () => ({
+      backgroundColor: backgroundColor,
+    }),
+    [backgroundColor],
+  );
+
   return (
     <div
       className={css.modalOverlay}
@@ -56,6 +69,7 @@
       onMouseUp={onBackgroundMouseUp}
       tabIndex={0}
       onKeyDown={onKeyDown}
+      style={containerStyle}
     >
       <FocusTrap>{children}</FocusTrap>
     </div>
diff --git a/web/chat/edit-message-provider.js b/web/chat/edit-message-provider.js
--- a/web/chat/edit-message-provider.js
+++ b/web/chat/edit-message-provider.js
@@ -142,7 +142,11 @@
       return null;
     }
     return (
-      <ModalOverlay onClose={clearEditModal} disableAutoFocus={true}>
+      <ModalOverlay
+        onClose={clearEditModal}
+        disableAutoFocus={true}
+        backgroundColor="var(--modal-overlay-background-80)"
+      >
         {modal}
       </ModalOverlay>
     );
diff --git a/web/theme.css b/web/theme.css
--- a/web/theme.css
+++ b/web/theme.css
@@ -221,4 +221,6 @@
   --pin-message-modal-border-color: var(--shades-black-80);
   --pinned-count-banner-color: var(--shades-black-90);
   --pinned-count-text-color: var(--shades-white-90);
+  --modal-overlay-background-90: rgba(0, 0, 0, 0.9);
+  --modal-overlay-background-80: rgba(0, 0, 0, 0.8);
 }