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

@@ -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})`;

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;