From 2409cab5b6a6966851b045885f78c20c6a551757 Mon Sep 17 00:00:00 2001
From: Aral Balkan <aral@aralbalkan.com>
Date: Sun, 11 Apr 2021 22:08:06 +0100
Subject: [PATCH] Closes #910: make transparency of message bubbles overridable
 via CSS (#911)

* Closes #910: make transparency of message bubbles overridable via CSS

* Fix CSS variable declaration
---
 webroot/js/utils/user-colors.js | 2 +-
 webroot/styles/chat.css         | 6 ++++++
 2 files changed, 7 insertions(+), 1 deletion(-)

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;