diff --git a/webroot/js/utils/user-colors.js b/webroot/js/utils/user-colors.js
index 331db934a..85e4fa1d6 100644
--- a/webroot/js/utils/user-colors.js
+++ b/webroot/js/utils/user-colors.js
@@ -8,7 +8,7 @@ export function messageBubbleColorForString(str) {
   // Tweak these to adjust the result of the color
   const saturation = 25;
   const lightness = 45;
-  const alpha = 0.3;
+  const alpha = 'var(--message-background-alpha)';
   const hue = parseInt(Math.abs(hash), 16) % 360;
 
   return `hsla(${hue}, ${saturation}%, ${lightness}%, ${alpha})`;
diff --git a/webroot/styles/chat.css b/webroot/styles/chat.css
index facb932d7..fbacc6003 100644
--- a/webroot/styles/chat.css
+++ b/webroot/styles/chat.css
@@ -1,5 +1,11 @@
 /* some base styles for chat and messaging components */
 
+:root {
+  /* Override this in your custom CSS to change the
+     opacity of the message backgrounds. */
+  --message-background-alpha: 0.3;
+}
+
 #chat-container {
   position: fixed;
   z-index: 9;