From 8fdfee84c827ff95285e707d595fa9b680491bed Mon Sep 17 00:00:00 2001
From: Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
Date: Thu, 25 Oct 2018 20:42:56 +0200
Subject: [PATCH] Switch from SASS variables to CSS custom properties

This will eventually allow client-side theming support.
---
 sass/_awesomplete.scss     |  12 +-
 sass/_chatbox.scss         | 178 +++++++++++++-------------
 sass/_chatrooms.scss       | 109 ++++++++--------
 sass/_controlbox.scss      |  78 ++++++------
 sass/_core.scss            |  64 +++++-----
 sass/_forms.scss           |  24 ++--
 sass/_headline.scss        |  16 +--
 sass/_lists.scss           |  44 +++----
 sass/_messages.scss        |  34 ++---
 sass/_minimized_chats.scss |  30 ++---
 sass/_roster.scss          |  28 ++---
 sass/_variables.scss       | 248 ++++++++++++++++---------------------
 12 files changed, 414 insertions(+), 451 deletions(-)

diff --git a/sass/_awesomplete.scss b/sass/_awesomplete.scss
index 1581e34ab1..4428ec3995 100644
--- a/sass/_awesomplete.scss
+++ b/sass/_awesomplete.scss
@@ -17,7 +17,7 @@
     .awesomplete {
         position: relative;
         mark {
-            background: $lightest-red;
+            background: var(--completion-light-color);
         }
 
         > input {
@@ -115,19 +115,19 @@
     
     .suggestion-box > ul > li[aria-selected="true"],
     div.awesomplete > ul > li[aria-selected="true"] {
-        background: $dark-red;
-        color: $inverse-link-color;
+        background: var(--completion-dark-color);
+        color: var(--inverse-link-color);
     }
     
     .suggestion-box li:hover mark,
     div.awesomplete li:hover mark {
-        background: $lightest-red;
-        color: $inverse-link-color;
+        background: var(--completion-light-color);
+        color: var(--inverse-link-color);
     }
     
     .suggestion-box li[aria-selected="true"] mark,
     div.awesomplete li[aria-selected="true"] mark {
-        background: $red;
+        background: var(--completion-normal-color);
         color: inherit;
     }
 }
diff --git a/sass/_chatbox.scss b/sass/_chatbox.scss
index 21da3c854b..f90ec31f0f 100644
--- a/sass/_chatbox.scss
+++ b/sass/_chatbox.scss
@@ -3,7 +3,7 @@
         display: none;
     }
     .flyout {
-        border-radius: $chatbox-border-radius;
+        border-radius: var(--chatbox-border-radius);
         position: absolute;
 
         @media screen and (max-height: $mobile-landscape-height) {
@@ -25,7 +25,7 @@
         border-radius: 25%;
         border: none;
         cursor: pointer;
-        font-size: $chatbox-button-size;
+        font-size: var(--chatbox-button-size);
         margin: 0 0.2em;
         padding: 0 0 0 0.5em;
         text-decoration: none;
@@ -45,7 +45,7 @@
         position: relative;
 
         &.chat-head-chatbox {
-            background-color: $chat-head-color;
+            background-color: var(--chat-head-color);
         }
 
         .avatar {
@@ -67,7 +67,7 @@
         }
 
         .user-custom-message {
-            color: lighten($chat-head-color, 50%);
+            color: var(--chat-head-color-lighten-50-percent);
             font-size: 75%;
             overflow: hidden;
             text-overflow: ellipsis;
@@ -84,8 +84,8 @@
                     color: white;
                     &.button-on:before {
                         padding: 0.2em;
-                        background-color: $chat-head-text-color;
-                        color: $chat-head-color;
+                        background-color: var(--chat-head-text-color);
+                        color: var(--chat-head-color);
                     }
                 }
             }
@@ -102,15 +102,15 @@
             }
             &.button-on:before {
                 border-radius: 5%;
-                background-color: $chat-head-text-color;
-                color: $chat-head-color;
+                background-color: var(--chat-head-text-color);
+                color: var(--chat-head-color);
             }
         }
     }
 
     .chatbox {
         text-align: left;
-        margin: 0 $chat-gutter;
+        margin: 0 var(--chat-gutter);
 
         img {
             &.emoji {
@@ -123,44 +123,44 @@
 
         @media screen and (max-height: $mobile-landscape-height) {
             margin: 0;
-            width: $mobile-chat-width;
+            width: var(--mobile-chat-width);
         }
         @media screen and (max-width: $mobile-portrait-length) {
             margin: 0;
-            width: $mobile-chat-width;
+            width: var(--mobile-chat-width);
         }
 
         .box-flyout {
             display: flex;
             flex-direction: column;
             justify-content: space-between;
-            background-color: $chat-head-color;
+            background-color: var(--chat-head-color);
             box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4);
             z-index: 1;
             overflow-y: hidden;
             width: 100%;
 
             @media screen and (max-height: $mobile-landscape-height) {
-                height: $mobile-chat-height;
-                width: $mobile-chat-width;
+                height: var(--mobile-chat-height);
+                width: var(--mobile-chat-width);
                 height: 100vh;
             }
             @media screen and (max-width: $mobile-portrait-length) {
-                height: $mobile-chat-height;
-                width: $mobile-chat-width;
+                height: var(--mobile-chat-height);
+                width: var(--mobile-chat-width);
                 height: 100vh;
             }
         }
         .chat-title {
-            font-family: $heading-font;
+            font-family: var(--heading-font);
             color: white;
             display: block;
-            line-height: $line-height-large;
+            line-height: var(--line-height-large);
             overflow: hidden;
             text-overflow: ellipsis;
             white-space: nowrap;
             a {
-                color: $chat-head-text-color;
+                color: var(--chat-head-text-color);
                 width: 100%;
             }
         }
@@ -169,9 +169,9 @@
             flex-direction: column;
             justify-content: space-between;
             height: 100%;
-            background-color: $chat-head-color;
-            border-bottom-left-radius: $chatbox-border-radius;
-            border-bottom-right-radius: $chatbox-border-radius;
+            background-color: var(--chat-head-color);
+            border-bottom-left-radius: var(--chatbox-border-radius);
+            border-bottom-right-radius: var(--chatbox-border-radius);
 
             @media screen and (max-height: $mobile-landscape-height) {
                 border-bottom-left-radius: 0;
@@ -183,8 +183,8 @@
             }
             border-top: 0;
             p {
-                color: $text-color;
-                font-size: $message-font-size;
+                color: var(--text-color);
+                font-size: var(--message-font-size);
                 margin: 0;
                 padding: 5px;
             }
@@ -193,8 +193,8 @@
             position: relative;
             width: 100%;
             cursor: pointer;
-            background-color: $chat-head-color;
-            color: $light-background-color;
+            background-color: var(--chat-head-color);
+            color: var(--light-background-color);
             padding: 0.5em;
             font-size: 0.9em;
             text-align: center;
@@ -204,8 +204,8 @@
         }
         .chat-content {
             height: 100%;
-            font-size: $message-font-size;
-            color: $text-color;
+            font-size: var(--message-font-size);
+            color: var(--text-color);
             overflow-y: auto;
             border: 0;
             background-color: #ffffff;
@@ -220,11 +220,11 @@
             }
         }
         .chat-content-sendbutton {
-            height: calc(100% - #{$chat-textarea-height + $send-button-height + 2*$send-button-margin});
+            height: calc(100% - (var(--chat-textarea-height) + var(--send-button-height) + 2 * var(--send-button-margin)));
         }
 
         .dropdown { /* status dropdown styles */
-            background-color: $light-background-color;
+            background-color: var(--light-background-color);
             dd {
                 margin: 0;
                 padding: 0;
@@ -235,7 +235,7 @@
         .sendXMPPMessage {
             -moz-background-clip: padding;
             -webkit-background-clip: padding-box;
-            @include border-bottom-radius($chatbox-border-radius);
+            border-bottom-radius: var(--chatbox-border-radius);
             background-clip: padding-box;
             background-color: white;
             border: 0;
@@ -259,33 +259,33 @@
             }
 
             .chat-textarea {
-                color: $chat-textarea-color;
+                color: var(--chat-textarea-color);
                 border-top-left-radius: 0;
                 border-top-right-radius: 0;
-                @include border-bottom-radius($chatbox-border-radius);
+                border-bottom-radius: var(--chatbox-border-radius);
                 padding: 0.5em;
                 width: 100%;
                 border: none;
-                min-height: $chat-textarea-height;
+                min-height: var(--chat-textarea-height);
                 margin-bottom: -4px; // Not clear why this is necessar :(
                 resize: none;
                 &.spoiler {
                     height: 42px;
                 }
                 &.correcting {
-                    background-color: lighten($chat-head-color, 50%);
+                    background-color: var(--chat-head-color-lighten-50-percent);
                 }
             }
 
             .send-button {
                 position: absolute;
-                left: $send-button-margin;
-                @include calc(width, '100% - #{2*$send-button-margin}');
-                background-color: $chat-head-color;
-                color: $inverse-link-color;
+                left: var(--send-button-margin);
+                width: calc(100% - 2 * var(--send-button-margin));
+                background-color: var(--chat-head-color);
+                color: var(--inverse-link-color);
                 font-size: 80%;
-                height: $send-button-height;
-                bottom: -$send-button-height - $send-button-margin;
+                height: var(--send-button-height);
+                bottom: calc(-var(--send-button-height) - var(--send-button-margin));
 
             }
             .chat-toolbar {
@@ -293,21 +293,21 @@
                 margin: 0;
                 padding: 0.25em;
                 display: block;
-                border-top: 4px solid $chat-head-color;
+                border-top: 4px solid var(--chat-head-color);
                 background-color: white;
-                color: $chat-head-color;
+                color: var(--chat-head-color);
                 .fa, .fa:hover,
                 .far, .far:hover,
                 .fas, .fas:hover {
-                    color: $chat-head-color;
-                    font-size: $font-size-large;
+                    color: var(--chat-head-color);
+                    font-size: var(--font-size-large);
                 }
                 .unencrypted a,
                 .unencrypted {
-                    color: $text-color;
+                    color: var(--text-color);
                     .toolbar-menu {
                         a {
-                            color: $link-color;
+                            color: var(--link-color);
                         }
                     }
                 }
@@ -353,7 +353,7 @@
                         }
 
                         a {
-                            color: $link-color;
+                            color: var(--link-color);
                         }
                         .emoji-picker-container {
                             background: white;
@@ -372,13 +372,13 @@
                                 &.insert-emoji {
                                     padding: 0.2em;
                                     &.picked {
-                                        background-color: $highlight-color;
+                                        background-color: var(--highlight-color);
                                     }
                                     &:hover {
-                                        background-color: $highlight-color;
+                                        background-color: var(--highlight-color);
                                     }
                                     a {
-                                        font-size: $font-size-huge;
+                                        font-size: var(--font-size-huge);
                                         &:hover {
                                             color: #8f2831;
                                         }
@@ -406,9 +406,9 @@
                             .emoji-skintone-picker {
                                 li {
                                     padding: 0.25em;
-                                    font-size: $font-size-huge;
+                                    font-size: var(--font-size-huge);
                                     &:hover {
-                                        background-color: $highlight-color;
+                                        background-color: var(--highlight-color);
                                     }
                                 }
                             }
@@ -419,7 +419,7 @@
                             z-index: 99;
                             li {
                                 &:hover {
-                                    background-color: $highlight-color;
+                                    background-color: var(--highlight-color);
                                 }
                                 display: block;
                                 padding: 7px;
@@ -465,15 +465,15 @@
 
 #conversejs.converse-embedded {
     .chat-textarea {
-        max-height: $fullpage-max-chat-textarea-height;
+        max-height: var(--fullpage-max-chat-textarea-height);
     }
 }
 
 #conversejs.converse-embedded,
 #conversejs.converse-overlayed {
     .chat-head {
-        border-top-left-radius: $chatbox-border-radius;
-        border-top-right-radius: $chatbox-border-radius;
+        border-top-left-radius: var(--chatbox-border-radius);
+        border-top-right-radius: var(--chatbox-border-radius);
         @media screen and (max-height: $mobile-landscape-height) {
             border-top-left-radius: 0;
             border-top-right-radius: 0;
@@ -491,19 +491,19 @@
     }
 
     .emoji-picker {
-        height: $embedded-emoji-picker-height;
+        height: var(--embedded-emoji-picker-height);
     }
     
     .chatbox {
-        min-width: $overlayed-chat-width !important;
-        width: $overlayed-chat-width;
+        min-width: var(--overlayed-chat-width) !important;
+        width: var(--overlayed-chat-width);
 
         .box-flyout {
-            min-width: $overlayed-chat-width !important;
-            width: $overlayed-chat-width;
+            min-width: var(--overlayed-chat-width) !important;
+            width: var(--overlayed-chat-width);
 
             .chat-body {
-                height: calc(100% - #{$overlayed-chat-head-height});
+                height: calc(100% - var(--overlayed-chat-head-height));
             }
         }
     }
@@ -511,20 +511,20 @@
 
 #conversejs.converse-overlayed  {
     .flyout {
-        bottom: $overlayed-chatbox-hover-height;
+        bottom: var(--overlayed-chatbox-hover-height);
     }
     .box-flyout {
-        height: $overlayed-chat-height;
-        min-height: $overlayed-chat-height/2;
+        height: var(--overlayed-chat-height);
+        min-height: calc(var(--overlayed-chat-height) / 2);
     }
     .chat-head {
-        height: $overlayed-chat-head-height;
+        height: var(--overlayed-chat-head-height);
     }
     .chat-textarea {
-        max-height: $overlayed-max-chat-textarea-height;
+        max-height: var(--overlayed-max-chat-textarea-height);
     }
     .emoji-picker {
-        height: $overlayed-emoji-picker-height;
+        height: var(--overlayed-emoji-picker-height);
     }
     .chatbox {
         .sendXMPPMessage {
@@ -574,22 +574,22 @@
 #conversejs.converse-fullscreen  {
     .flyout {
         border-radius: 0;
-        border-top: 0.8em solid $chat-head-color;
-        border: $flyout-padding solid $chat-head-color;
+        border-top: 0.8em solid var(--chat-head-color);
+        border: var(--flyout-padding) solid var(--chat-head-color);
         bottom: 0;
     }
     .chatbox-btn {
-        font-size: $fullpage-chatbox-button-size;
+        font-size: var(--fullpage-chatbox-button-size);
         margin: 0 0.3em;
     }
     .chat-head {
-        height: $fullpage-chat-head-height;
-        font-size: $font-size-huge;
+        height: var(--fullpage-chat-head-height);
+        font-size: var(--font-size-huge);
         padding: 0;
         .user-custom-message {
             font-size: 70%;
             height: auto;
-            line-height: $line-height;
+            line-height: var(--line-height);
         }
         .chatbox-title {
             @include make-col(10);
@@ -599,10 +599,10 @@
         }
     }
     .chat-textarea {
-        max-height: $fullpage-max-chat-textarea-height;
+        max-height: var(--fullpage-max-chat-textarea-height);
     }
     .emoji-picker {
-        height: $fullpage-emoji-picker-height;
+        height: var(--fullpage-emoji-picker-height);
     }
 
     .chatbox {
@@ -622,26 +622,26 @@
         }
 
         .box-flyout {
-            background-color: $chat-head-color;
+            background-color: var(--chat-head-color);
             box-shadow: none;
-            height: $fullpage-chat-height;
-            min-height: $fullpage-chat-height/2;
-            width: $fullpage-chat-width;
+            height: var(--fullpage-chat-height);
+            min-height: calc(var(--fullpage-chat-height) / 2);
+            width: var(--fullpage-chat-width);
             overflow: hidden;
         }
         .chat-body {
-            height: calc(100% - #{$fullpage-chat-head-height});
-            background-color: $chat-head-color;
-            border-top-left-radius: $chatbox-border-radius;
-            border-top-right-radius: $chatbox-border-radius;
+            height: calc(100% - var(--fullpage-chat-head-height));
+            background-color: var(--chat-head-color);
+            border-top-left-radius: var(--chatbox-border-radius);
+            border-top-right-radius: var(--chatbox-border-radius);
         }
         .chat-content {
-            border-top-left-radius: $chatbox-border-radius;
-            border-top-right-radius: $chatbox-border-radius;
+            border-top-left-radius: var(--chatbox-border-radius);
+            border-top-right-radius: var(--chatbox-border-radius);
         }
         .chat-title {
-            font-size: $font-size-huge;
-            line-height: $line-height-huge;
+            font-size: var(--font-size-huge);
+            line-height: var(--line-height-huge);
         }
         .sendXMPPMessage {
             ul {
diff --git a/sass/_chatrooms.scss b/sass/_chatrooms.scss
index a3c47aa6d9..cac85b152d 100644
--- a/sass/_chatrooms.scss
+++ b/sass/_chatrooms.scss
@@ -25,7 +25,7 @@
                 cursor: help;
                 .fa {
                     margin-right: 0.5em;
-                    color: $text-color;
+                    color: var(--text-color);
                 }
             }
         }
@@ -33,11 +33,11 @@
 
 
     .chat-head-chatroom {
-        background-color: $chatroom-head-color;
+        background-color: var(--chatroom-head-color);
 
         .chatroom-description {
-            color: lighten($chatroom-head-color, 25%);
-            font-size: $font-size;
+            color: var(--chatroom-head-color-lighten-25-percent);
+            font-size: var(--font-size);
             font-size: 70%;
             margin-top: 3px;
             overflow-y: hidden;
@@ -52,9 +52,9 @@
         a, a:visited, a:hover, a:not([href]):not([tabindex]) {
             &.chatbox-btn {
                 &.fa {
-                    color: $chat-head-text-color;
+                    color: var(--chat-head-text-color);
                     &.button-on:before {
-                        color: $chatroom-head-color;
+                        color: var(--chatroom-head-color);
                     }
                 }
             }
@@ -62,44 +62,44 @@
 
         .chatbox-btn {
             &.button-on:before {
-                color: $chatroom-head-color;
+                color: var(--chatroom-head-color);
             }
         }
         .chat-title {
             .chatroom-jid {
-                font-size: $font-size-small;
+                font-size: var(--font-size-small);
             }
         }
     }
 
     .chatroom {
-        width: $chatroom-width;
+        width: var(--chatroom-width);
         @media screen and (max-height: $mobile-landscape-height){
-            width: $mobile-chat-width;
+            width: var(--mobile-chat-width);
         }
         @media screen and (max-width: $mobile-portrait-length) {
-            width: $mobile-chat-width;
+            width: var(--mobile-chat-width);
         }
 
         .box-flyout {
             overflow-y: hidden;
-            background-color: $chatroom-head-color;
+            background-color: var(--chatroom-head-color);
 
             width: 100%;
             @media screen and (max-height: $mobile-landscape-height) {
-                height: $mobile-chat-height;
-                width: $mobile-chat-width;
+                height: var(--mobile-chat-height);
+                width: var(--mobile-chat-width);
                 height: 100vh;
             }
             @media screen and (max-width: $mobile-portrait-length) {
-                height: $mobile-chat-height;
-                width: $mobile-chat-width;
+                height: var(--mobile-chat-height);
+                width: var(--mobile-chat-width);
                 height: 100vh;
             }
             .chatroom-body {
                 flex-direction: row;
                 flex-flow: nowrap;
-                @include border-bottom-radius($chatbox-border-radius);
+                border-bottom-radius: var(--chatbox-border-radius);
                 background-color: white;
                 border-top: 0;
                 width: 100%;
@@ -110,13 +110,13 @@
                 }
                 .chat-topic {
                     font-weight: bold;
-                    color: $chatroom-head-color;
+                    color: var(--chatroom-head-color);
                 }
                 .chat-info {
-                    color: $chatroom-head-color;
+                    color: var(--chatroom-head-color);
                     line-height: normal;
                     &.badge {
-                        color: $chat-head-text-color;
+                        color: var(--chat-head-text-color);
                     }
                 }
                 .disconnect-container {
@@ -131,7 +131,7 @@
                     flex-direction: column;
                     word-wrap: break-word;
                     .new-msgs-indicator {
-                        background-color: $chatroom-head-color;
+                        background-color: var(--chatroom-head-color);
                     }
                     .chat-content {
                         height: 100%;
@@ -145,8 +145,8 @@
                     overflow-y: hidden;
                     vertical-align: top;
                     background-color: white;
-                    border-left: 1px solid $text-color;
-                    border-bottom-right-radius: $chatbox-border-radius;
+                    border-left: 1px solid var(--text-color);
+                    border-bottom-right-radius: var(--chatbox-border-radius);
                     padding: 0.5em;
 
                     .occupants-header {
@@ -158,7 +158,7 @@
                         }
                     }
                     .occupants-heading {
-                        font-family: $heading-font;
+                        font-family: var(--heading-font);
                     }
                     .awesomplete {
                         ul {
@@ -184,7 +184,7 @@
                         li {
                             cursor: default;
                             display: block;
-                            font-size: $font-size-small;
+                            font-size: var(--font-size-small);
                             overflow: hidden;
                             padding: 0.25em 0.25em 0.25em 0;
                             text-overflow: ellipsis;
@@ -192,7 +192,7 @@
                                 margin-right: 0.5em;
                             }
                             &.feature {
-                                font-size: $font-size-tiny;
+                                font-size: var(--font-size-tiny);
                             }
                             &.occupant {
                                 cursor: pointer;
@@ -251,25 +251,25 @@
                 }
                 .chatroom-form-container {
                     background-color: white;
-                    border-bottom-left-radius: $chatbox-border-radius;
-                    border-bottom-right-radius: $chatbox-border-radius;
+                    border-bottom-left-radius: var(--chatbox-border-radius);
+                    border-bottom-right-radius: var(--chatbox-border-radius);
                     border: 0;
-                    color: $text-color;
-                    font-size: $font-size;
+                    color: var(--text-color);
+                    font-size: var(--font-size);
                     height: 100%;
                     width: 100%;
                     overflow-y: auto;
 
                     .validation-message {
                         font-size: 90%;
-                        color: $error-color;
+                        color: var(--error-color);
                     }
                     input[type=button],
                     input[type=submit] {
                         margin: 0 0.5em;
                     }
                     .button-primary {
-                        background-color: $chatroom-head-color;
+                        background-color: var(--chatroom-head-color);
                     }
                 }
             }
@@ -278,22 +278,22 @@
         .sendXMPPMessage {
             .chat-toolbar {
                 background-color: white;
-                border-top: 4px solid $chatroom-head-color;
-                color: $chatroom-head-color;
+                border-top: 4px solid var(--chatroom-head-color);
+                color: var(--chatroom-head-color);
                 .fas, .fas:hover,
                 .far, .far:hover,
                 .fa, .fa:hover {
-                    color: $chatroom-head-color;
+                    color: var(--chatroom-head-color);
                 }
             }
             .chat-textarea {
                 border-bottom-right-radius: 0;
                 &.correcting {
-                    background-color: lighten($chatroom-head-color, 30%);
+                    background-color: var(--chatroom-head-color-lighten-30-percent);
                 }
             }
             .send-button {
-                background-color: $chatroom-head-color;
+                background-color: var(--chatroom-head-color);
             }
         }
 
@@ -313,16 +313,15 @@
 #conversejs.converse-overlayed {
     .chatbox {
         &.chatroom {
-
             .chatroom-features {
                 display: none !important;
             }
 
-            min-width: $chatroom-width !important;
-            width: $chatroom-width;
+            min-width: var(--chatroom-width) !important;
+            width: var(--chatroom-width);
             .box-flyout {
-                min-width: $chatroom-width !important;
-                width: $chatroom-width;
+                min-width: var(--chatroom-width) !important;
+                width: var(--chatroom-width);
             }
             .chatbox-title {
                 @include make-col(7);
@@ -340,7 +339,7 @@
                     }
                     .chatroom-features {
                         .feature {
-                            font-size: $font-size-tiny;
+                            font-size: var(--font-size-tiny);
                         }
                     }
                     ul {
@@ -357,7 +356,7 @@
                     }
                 }
                 .chat-area {
-                    min-width: $overlayed-chat-width;
+                    min-width: var(--overlayed-chat-width);
                 }
             }
             .sendXMPPMessage {
@@ -411,9 +410,9 @@
 
     .chatroom {
         .box-flyout {
-            background-color: $chatroom-head-color;
-            border: $flyout-padding solid $chatroom-head-color;
-            border-top: 0.8em solid $chatroom-head-color;
+            background-color: var(--chatroom-head-color);
+            border: var(--flyout-padding) solid var(--chatroom-head-color);
+            border-top: 0.8em solid var(--chatroom-head-color);
             width: 100%;
 
             .chatbox-title {
@@ -423,14 +422,14 @@
             }
 
             .chatroom-body {
-                @include border-top-radius($chatbox-border-radius);
+                border-top-radius: var(--chatbox-border-radius);
                 .chatroom-form-container {
-                    border-radius: $chatbox-border-radius;
+                    border-radius: var(--chatbox-border-radius);
                 }
                 .chat-area {
-                    border-top-left-radius: $chatbox-border-radius;
+                    border-top-left-radius: var(--chatbox-border-radius);
                     .chat-content {
-                        border-top-left-radius: $chatbox-border-radius;
+                        border-top-left-radius: var(--chatbox-border-radius);
                     }
                     &.full {
                         .new-msgs-indicator {
@@ -439,15 +438,15 @@
                     }
                 }
                 .occupants {
-                    border-top-right-radius: $chatbox-border-radius;;
-                    padding: $occupants-padding;
+                    border-top-right-radius: var(--chatbox-border-radius);
+                    padding: var(--occupants-padding);
                     .occupants-heading {
-                        font-size: $font-size-large;
+                        font-size: var(--font-size-large);
                     }
                     ul {
                         &.occupant-list {
                             li {
-                                font-size: $font-size-small;
+                                font-size: var(--font-size-small);
                             }
                         }
                     }
diff --git a/sass/_controlbox.scss b/sass/_controlbox.scss
index d9c8201f9b..72f343c328 100644
--- a/sass/_controlbox.scss
+++ b/sass/_controlbox.scss
@@ -6,14 +6,14 @@
 
             .oauth-login {
                 margin-left: 0;
-                color: $link-color;
-                font-size: $font-size-large;
+                color: var(--link-color);
+                font-size: var(--font-size-large);
                 &:hover {
-                    color: darken($link-color, 20%);
+                    color: var(--link-color-darken-20-percent);
                 }
                 i {
-                    color: $link-color;
-                    font-size: $font-size-huge;
+                    color: var(--link-color);
+                    font-size: var(--font-size-huge);
                     margin-right: 0.5em;
                 }
             }
@@ -24,22 +24,22 @@
     .xmpp-status,
     .roster-contacts {
         .chat-status--online {
-            color: $green;
+            color: var(--chat-status-online);
         }
         .chat-status--busy {
-            color: $red
+            color: var(--chat-status-busy);
         }
         .chat-status--away {
-            color: $orange,
+            color: var(--chat-status-away);
         }
         .far.fa-circle,
         .fa-times-circle {
-            color: $subdued-color;
+            color: var(--subdued-color);
         }
     }
 
     .room-info {
-        font-size: $font-size-small;
+        font-size: var(--font-size-small);
         font-style: normal;
         font-weight: normal;
 
@@ -48,7 +48,7 @@
             margin-left: 5px;
         }
         p.room-info {
-            line-height: $line-height;
+            line-height: var(--line-height);
             margin: 0;
             display: block;
             white-space: normal;
@@ -65,7 +65,7 @@
             background-color: white;
         }
 
-        margin-right: 3*$chat-gutter;
+        margin-right: calc(3 * var(--chat-gutter));
 
         &.logged-out {
             .box-flyout {
@@ -105,11 +105,11 @@
                 margin: 1.5em 0;
             }
             .form-errors {
-                color: $error-color;
+                color: var(--error-color);
                 margin: 1em 0;
             }
             .provider-title {
-                font-size: $font-size-huge;
+                font-size: var(--font-size-huge);
                 margin: 0;
             }
             .provider-score {
@@ -118,7 +118,7 @@
             }
             .form-help .url {
                 font-weight: bold;
-                color: $link-color;
+                color: var(--link-color);
             }
             .input-group {
                 display: table;
@@ -138,15 +138,15 @@
                 color: gray;
                 font-size: 85%;
                 &:hover {
-                    color: $text-color;
+                    color: var(--text-color);
                 }
             }
         }
 
         .conn-feedback {
-            color: $controlbox-head-color;
+            color: var(--controlbox-head-color);
             &.error {
-                color: $error-color;
+                color: var(--error-color);
             }
             p {
                 padding-bottom: 1em;
@@ -174,7 +174,7 @@
             flex-direction: column;
 
             .brand-heading {
-                color: $global-background-color;
+                color: var(--global-background-color);
             }
         }
 
@@ -215,7 +215,7 @@
             margin: 1em 0 0 0;
 
             .controlbox-heading {
-                font-family: $heading-font; 
+                font-family: var(--heading-font);
                 margin: 0 0 0.5em 0;
                 text-transform: uppercase;
             }
@@ -239,9 +239,9 @@
                     top: 0;
                     width: 100%;
                     z-index: 21;
-                    background-color: $light-background-color;
+                    background-color: var(--light-background-color);
                     li:hover {
-                        background-color: $highlight-color;
+                        background-color: var(--highlight-color);
                     }
                 }
             }
@@ -257,7 +257,7 @@
                     }
                 }
                 li:hover {
-                    background-color: $light-background-color;
+                    background-color: var(--light-background-color);
                 }
             }
             dt a span {
@@ -276,7 +276,7 @@
         .controlbox-pane {
             background-color: white;
             border: 0;
-            font-size: $font-size;
+            font-size: var(--font-size);
             left: 0;
             text-align: left;
             overflow-x: hidden;
@@ -325,16 +325,16 @@
 
     .toggle-controlbox {
         text-align: center;
-        background-color: $link-color;
-        border-top-left-radius: $button-border-radius;
-        border-top-right-radius: $button-border-radius;
+        background-color: var(--link-color);
+        border-top-left-radius: var(--button-border-radius);
+        border-top-right-radius: var(--button-border-radius);
         color: #0a0a0a;
         float: right;
         height: 100%;
-        margin: 0 $chat-gutter;
+        margin: 0 var(--chat-gutter);
         padding: 1em;
         span {
-            color: $inverse-link-color;
+            color: var(--inverse-link-color);
         }
     }
 }
@@ -343,11 +343,11 @@
 #conversejs.converse-overlayed {
     #controlbox {
         order: -1;
-        min-width: $controlbox-width !important;
-        width: $controlbox-width;
+        min-width: var(--controlbox-width) !important;
+        width: var(--controlbox-width);
         .box-flyout {
-            min-width: $controlbox-width !important;
-            width: $controlbox-width;
+            min-width: var(--controlbox-width) !important;
+            width: var(--controlbox-width);
         }
 
         .login-trusted {
@@ -375,11 +375,11 @@
             justify-content: space-between;
 
             .brand-heading {
-                color: $text-color;
+                color: var(--text-color);
                 font-size: 2em;
             }
             .chatbox-btn {
-                color: $controlbox-head-color;
+                color: var(--controlbox-head-color);
                 margin: 0;
             }
         }
@@ -396,7 +396,7 @@
         }
 
         .controlbox-panes {
-            border-radius: $chatbox-border-radius;
+            border-radius: var(--chatbox-border-radius);
         }
     }
 }
@@ -438,7 +438,7 @@
         }
 
         .toggle-register-login {
-            line-height: $line-height-huge;
+            line-height: var(--line-height-huge);
         }
 
         .brand-heading-container {
@@ -450,7 +450,7 @@
                 font-size: 600%;
                 padding: 0.7em 0 0 0;
                 opacity: 0.8;
-                color: $blue;
+                color: var(--brand-heading-color);
             }
             .brand-subtitle {
                 font-size: 90%;
@@ -475,7 +475,7 @@
             border: 0;
             width: 100%;
             z-index: 1;
-            background-color: $controlbox-head-color;
+            background-color: var(--controlbox-head-color);
 
             .controlbox-head {
                 display: none;
diff --git a/sass/_core.scss b/sass/_core.scss
index d0ea5cd73e..7d3cf2f9a0 100644
--- a/sass/_core.scss
+++ b/sass/_core.scss
@@ -81,7 +81,7 @@ body.reset {
 }
 
 .converse-brand__text {
-    font-family: $heading-font; 
+    font-family: var(--heading-font);
     font-weight: normal;
     width: 50%;
     margin: auto;
@@ -92,14 +92,14 @@ body.reset {
     }
 }
 .converse-brand__byline {
-    font-size: $font-size-small;
+    font-size: var(--font-size-small);
     width: 50%;
     margin: auto;
     text-align: center;
 
     a {
         text-decoration: none;
-        color: lighten($chatroom-head-color, 25%);
+        color: var(--chatroom-head-color-lighten-25-percent);
     }
 }
 
@@ -109,9 +109,9 @@ body.reset {
     position: fixed;
     padding-left: env(safe-area-inset-left);
     padding-right: env(safe-area-inset-right);
-    color: $text-color;
+    color: var(--text-color);
     font-family: "Helvetica", "Arial", sans-serif;
-    font-size: $font-size;
+    font-size: var(--font-size);
     direction: ltr;
     z-index: 1031; // One more than bootstrap navbar
 
@@ -137,7 +137,7 @@ body.reset {
     }
 
     .brand-heading {
-        font-family: $heading-font; 
+        font-family: var(--heading-font);
         .icon-conversejs {
             font-size: 80%;
         }
@@ -155,26 +155,26 @@ body.reset {
     }
 
     ::-webkit-input-placeholder { /* Chrome/Opera/Safari */
-        color: $subdued-color;
+        color: var(--subdued-color);
     }
     ::-moz-placeholder { /* Firefox 19+ */
-        color: $subdued-color;
+        color: var(--subdued-color);
     }
     :-ms-input-placeholder { /* IE 10+ */
-        color: $subdued-color;
+        color: var(--subdued-color);
     }
     :-moz-placeholder { /* Firefox 18- */
-        color: $subdued-color;
+        color: var(--subdued-color);
     }
     ::placeholder {
-        color: $subdued-color;
+        color: var(--subdued-color);
     }
 
     ::selection {
-        background-color: $highlight-color;
+        background-color: var(--highlight-color);
     }
     ::-moz-selection {
-        background-color: $highlight-color;
+        background-color: var(--highlight-color);
     }
 
     @media screen and (max-width: $mobile-portrait-length) {
@@ -208,7 +208,7 @@ body.reset {
     input[type=submit], input[type=button],
     input[type=text], input[type=password],
     button {
-        font-size: $font-size;
+        font-size: var(--font-size);
         padding: 0.25em;
         min-height: 0;
     }
@@ -236,32 +236,32 @@ body.reset {
 
     a, a:visited, a:not([href]):not([tabindex]) {
         text-decoration: none;
-        color: $link-color;
+        color: var(--link-color);
         text-shadow: none;
         &:hover {
-            color: darken($link-color, 20%);
+            color: var(--link-color-darken-20-percent);
             text-decoration: none;
             text-shadow: none;
         }
 
         &.fa, &.far, &.fas {
-            color: $subdued-color;
+            color: var(--subdued-color);
             &:hover {
-                color: $gray-color;
+                color: var(--gray-color);
             }
         }
     }
 
     canvas {
-        border-radius: $chatbox-border-radius;
+        border-radius: var(--chatbox-border-radius);
     }
 
     .fa, .far, .fas {
-        color: $subdued-color;
+        color: var(--subdued-color);
     }
 
     .fa:hover, .far:hover, .fas:hover {
-        color: $gray-color;
+        color: var(--gray-color);
     }
 
     .modal {
@@ -275,7 +275,7 @@ body.reset {
     }
 
     .selected {
-        color: $link-color !important;
+        color: var(--link-color) !important;
     }
 
     .circle {
@@ -287,7 +287,7 @@ body.reset {
         width: 50px;
         height: 100vh;
         padding: 1rem 0;
-        background-color: $controlbox-head-color;
+        background-color: var(--controlbox-head-color);
         color: white;
         text-align: center;
 
@@ -311,7 +311,7 @@ body.reset {
     }
 
     .btn {
-        font-family: $heading-font; 
+        font-family: var(--heading-font);
         font-weight: normal;
         color: #fff;
         .fa, .far, .fas {
@@ -444,10 +444,10 @@ body.reset {
     }
 
     .error {
-        color: $error-color;
+        color: var(--error-color);
     }
     .info {
-        color: $info-color;
+        color: var(--info-color);
     }
     .reg-feedback {
         font-size: 85%;
@@ -473,15 +473,15 @@ body.reset {
 
     .button-primary {
         color: white;
-        background-color: $primary-color;
+        background-color: var(--primary-color);
     }
     .button-secondary {
         color: white;
-        background-color: $secondary-color;
+        background-color: var(--secondary-color);
     }
     .button-cancel {
         color: white;
-        background-color: $text-color;
+        background-color: var(--text-color);
     }
 
     .chat-textarea-chatbox-selected {
@@ -489,7 +489,7 @@ body.reset {
         margin: 0;
     }
     .chat-textarea-chatroom-selected {
-        border: 2px solid $link-color;
+        border: 2px solid var(--link-color);
         margin: 0;
     }
 }
@@ -503,11 +503,11 @@ body.reset {
     #conversejs:not(.converse-embedded)  {
         .chatbox  {
             .chat-body {
-                border-radius: $chatbox-border-radius;
+                border-radius: var(--chatbox-border-radius);
             }
         }
         .flyout {
-            border-radius: $chatbox-border-radius;
+            border-radius: var(--chatbox-border-radius);
         }
     }
 }
diff --git a/sass/_forms.scss b/sass/_forms.scss
index f5dd28a90e..daf1353364 100644
--- a/sass/_forms.scss
+++ b/sass/_forms.scss
@@ -11,19 +11,19 @@
 
         .form-control {
             &::-webkit-input-placeholder { /* Chrome/Opera/Safari */
-                color: $subdued-color;
+                color: var(--subdued-color);
             }
             &::-moz-placeholder { /* Firefox 19+ */
-                color: $subdued-color;
+                color: var(--subdued-color);
             }
             &:-ms-input-placeholder { /* IE 10+ */
-                color: $subdued-color;
+                color: var(--subdued-color);
             }
             &:-moz-placeholder { /* Firefox 18- */
-                color: $subdued-color;
+                color: var(--subdued-color);
             }
             &::placeholder {
-                color: $subdued-color;
+                color: var(--subdued-color);
             }
         }
 
@@ -49,7 +49,7 @@
                 white-space: normal;
             }
             .save-submit {
-                color: $save-button-color;
+                color: var(--save-button-color);
             }
             .form-url {
                 display: block;
@@ -64,7 +64,7 @@
             background: white;
             padding: 1.5em;
             legend {
-                color: $text-color;
+                color: var(--text-color);
                 font-size: 125%;
                 margin-bottom: 1.5em;
             }
@@ -89,18 +89,18 @@
                 border: none;
             }
             input.error {
-                border: 1px solid $error-color;
-                color: $text-color;
+                border: 1px solid var(--error-color);
+                color: var(--text-color);
             }
             .text-muted {
-                color: $subdued-color !important;
+                color: var(--subdued-color) !important;
                 font-size: 85%;
                 padding-top: 0.5em;
                 a {
-                    color: lighten($link-color, 10%);
+                    color: var(--link-color-lighten-10-percent);
                 }
                 &.error {
-                    color: $error-color;
+                    color: var(--error-color);
                 }
             }
         }
diff --git a/sass/_headline.scss b/sass/_headline.scss
index 3b6191c37a..9fb4d41710 100644
--- a/sass/_headline.scss
+++ b/sass/_headline.scss
@@ -2,14 +2,14 @@
     .chatbox.headlines {
         .chat-head {
             &.chat-head-chatbox {
-                background-color: $headline-head-color;
+                background-color: var(--headline-head-color);
             }
         }
         .chat-body {
-            background-color: $headline-head-color;
-            border-radius: $chatbox-border-radius;
+            background-color: var(--headline-head-color);
+            border-radius: var(--chatbox-border-radius);
             .chat-message {
-                color: $dark-orange;
+                color: var(--headline-message-color);
             }
         }
         .chat-content {
@@ -21,16 +21,16 @@
 #conversejs.converse-fullscreen {
     .chatbox.headlines {
         .box-flyout {
-            background-color: $headline-head-color;
+            background-color: var(--headline-head-color);
         }
         .chat-head {
             &.chat-head-chatbox {
-                background-color: $headline-head-color;
+                background-color: var(--headline-head-color);
             }
         }
         .flyout {
-            border: $flyout-padding solid $headline-head-color;
-            border-top: 0.8em solid $headline-head-color;
+            border: var(--flyout-padding) solid var(--headline-head-color);
+            border-top: 0.8em solid var(--headline-head-color);
         }
     }
 }
diff --git a/sass/_lists.scss b/sass/_lists.scss
index f9d0aea85d..842f1ef721 100644
--- a/sass/_lists.scss
+++ b/sass/_lists.scss
@@ -4,12 +4,12 @@
         padding: 0.3em 0;
 
         .list-toggle {
-            font-family: $heading-font; 
+            font-family: var(--heading-font);
             display: block;
-            color: $text-color;
+            color: var(--text-color);
             padding: 0 0 0.5rem 0;
             &:hover {
-                color: $dark-gray-color;
+                color: var(--list-toggle-color);
             }
         }
     }
@@ -20,20 +20,20 @@
         .list-item {
             border: none;
             clear: both;
-            color: $text-color;
+            color: var(--text-color);
             display: block;
             height: 2em;
             overflow: hidden;
             padding-top: 0.5em;
-            text-shadow: 0 1px 0 $text-shadow-color;
+            text-shadow: 0 1px 0 var(--text-shadow-color);
             word-wrap: break-word;
 
             .list-item-link {
                 &:hover {
-                    color: $dark-link-color;
+                    color: var(--dark-link-color);
                 }
-                font-size: $font-size;
-                line-height: $font-size;
+                font-size: var(--font-size);
+                line-height: var(--font-size);
                 padding-right: 0.5em;
                 overflow: hidden;
                 white-space: nowrap;
@@ -42,30 +42,30 @@
 
             .list-item-action {
                 opacity: 0;
-                font-size: $font-size-tiny;
+                font-size: var(--font-size-tiny);
                 padding: 0;
                 margin: 0 0 0 0.4em;
                 width: 1.6em;
                 &:before {
-                    font-size: $font-size;
+                    font-size: var(--font-size);
                 }
                 &.button-on {
-                    color: $link-color;
+                    color: var(--link-color);
                     &:hover {
-                        color: $dark-link-color;
+                        color: var(--dark-link-color);
                     }
                 }
-                color: $subdued-color;
+                color: var(--subdued-color);
                 &:hover {
-                    color: $gray-color;
+                    color: var(--list-toggle-hover-color);
                     opacity: 1;
                 }
             }
 
             &.open {
-                background-color: $controlbox-head-color;
+                background-color: var(--controlbox-head-color);
                 &:hover {
-                    background-color: $controlbox-head-color !important;
+                    background-color: var(--controlbox-head-color) !important;
                 }
                 a {
                     color: white;
@@ -76,28 +76,28 @@
                     }
                 }
                 .list-item-action {
-                    color: lighten($lightest-blue, 25%);
+                    color: var(--list-item-action-color);
                     &:hover {
                         color: white;
                     }
                 }
                 .fa-circle {
-                    color: lighten($green, 25%);
+                    color: var(--list-circle-color);
                 }
                 .fa-minus-circle {
-                    color: lighten($red, 15%);
+                    color: var(--list-minus-circle-color);
                 }
                 .fa-dot-circle {
-                    color: lighten($orange, 25%);
+                    color: var(--list-dot-circle-color);
                 }
                 .far .fa-circle,
                 .fa-times-circle {
-                    color: lighten($subdued-color, 25%);
+                    color: var(--subdued-color-lighten-25-percent);
                 }
             }
 
             &:hover {
-                background-color: lighten($controlbox-head-color, 45%);
+                background-color: var(--controlbox-head-color-lighten-45-percent);
                 .fa, .far, .fas {
                     opacity: 1;
                 }
diff --git a/sass/_messages.scss b/sass/_messages.scss
index d84c34b2b4..d8accf835a 100644
--- a/sass/_messages.scss
+++ b/sass/_messages.scss
@@ -14,7 +14,7 @@
             z-index: 0;
 
             .separator {
-                border: 0.5px solid $chat-head-color;
+                border: 0.5px solid var(--chat-head-color);
                 margin: 0 1em;
                 position: relative;
                 top: 1em;
@@ -24,7 +24,7 @@
             .separator-text {
                 background: white;
                 bottom: 1px; // Offset needed due to .separator border size
-                color: $message-text-color;
+                color: var(--message-text-color);
                 display: inline-block;
                 line-height: 2em;
                 padding: 0 1em;
@@ -34,14 +34,14 @@
         }
 
         &.chat-info {
-            color: $chat-head-color;
-            font-size: $message-font-size;
-            line-height: $line-height-small;
+            color: var(--chat-head-color);
+            font-size: var(--message-font-size);
+            line-height: var(--line-height-small);
             font-size: 90%;
             padding: 0.17rem 1rem;
 
             &.badge {
-                color: $chat-head-text-color;
+                color: var(--chat-head-text-color);
             }
             &.chat-state-notification {
                 font-style: italic;
@@ -51,7 +51,7 @@
                 font-style: italic;
             }
             &.chat-error {
-                color: $warning-color;
+                color: var(--warning-color);
                 font-weight: bold;
             }
         }
@@ -86,10 +86,10 @@
             }
             &.correcting {
                 &.groupchat  {
-                    background-color: lighten($chatroom-head-color, 30%);
+                    background-color: var(--chatroom-head-color-lighten-30-percent);
                 }
                 &:not(.groupchat) {
-                    background-color: lighten($chat-head-color, 50%);
+                    background-color: var(--chat-head-color-lighten-50-percent);
                 }
             }
 
@@ -148,7 +148,7 @@
 
             .chat-msg__text {
                 padding: 0;
-                color: $message-text-color;
+                color: var(--message-text-color);
                 width: 100%;
                 white-space: pre-wrap;
                 a {
@@ -182,8 +182,8 @@
 
             .chat-msg__actions {
                 .chat-msg__action {
-                    height: $message-font-size;
-                    font-size: $message-font-size;
+                    height: var(--message-font-size);
+                    font-size: var(--message-font-size);
                     padding: 0;
                     border: none;
                     opacity: 0;
@@ -213,16 +213,16 @@
                     overflow: hidden;
                     text-overflow: ellipsis;
                     white-space: nowrap;
-                    font-family: $heading-font; 
+                    font-family: var(--heading-font);
                     font-size: 115%;
                     .badge {
                         font-size: 80%;
-                        font-family: $normal_font;
+                        font-family: var(--normal_font);
                     }
                 }
                 .chat-msg__time {
                     padding-left: 0.25em;
-                    color: lighten($text-color, 15%);
+                    color: var(--text-color-lighten-15-percent);
                 }
             }
             &.chat-msg--action {
@@ -240,7 +240,7 @@
                     width: auto;
                 }
                 .chat-msg__author {
-                    font-size: $message-font-size;
+                    font-size: var(--message-font-size);
                 }
                 .chat-msg__time {
                     margin-left: 0;
@@ -265,7 +265,7 @@
             -webkit-animation: colorchange-chatmessage-muc 1s;
         }
         .separator {
-            border: 0.5px solid $chatroom-head-color;
+            border: 0.5px solid var(--chatroom-head-color);
         }
     }
 }
diff --git a/sass/_minimized_chats.scss b/sass/_minimized_chats.scss
index 252e05ef36..74d55ac78a 100644
--- a/sass/_minimized_chats.scss
+++ b/sass/_minimized_chats.scss
@@ -2,23 +2,23 @@
     #minimized-chats {
         order: 100;
 
-        width: $minimized-chats-width;
+        width: var(--minimized-chats-width);
         margin-bottom: 0;
-        border-top-left-radius: $chatbox-border-radius;
-        border-top-right-radius: $chatbox-border-radius;
-        color: $inverse-link-color;
-        margin-right: $chat-gutter;
+        border-top-left-radius: var(--chatbox-border-radius);
+        border-top-right-radius: var(--chatbox-border-radius);
+        color: var(--inverse-link-color);
+        margin-right: var(--chat-gutter);
         padding: 0;
 
         .badge {
             bottom: 8px;
-            border: 1px solid $gray-color;
+            border: 1px solid var(--overlayed-badge-color);
         }
 
         #toggle-minimized-chats {
-            border-top-left-radius: $chatbox-border-radius;
-            border-top-right-radius: $chatbox-border-radius;
-            background-color: $link-color;
+            border-top-left-radius: var(--chatbox-border-radius);
+            border-top-right-radius: var(--chatbox-border-radius);
+            background-color: var(--link-color);
             padding: 1em 0 0 0;
             text-align: center;
             color: white;
@@ -31,7 +31,7 @@
 
         a.restore-chat {
             padding: 1px 0 1px 5px;
-            color: $chat-head-text-color;
+            color: var(--chat-head-text-color);
             line-height: 15px;
             display: block;
             overflow: hidden;
@@ -43,17 +43,17 @@
         }
 
         a.restore-chat:visited {
-            color: $chat-head-text-color;
+            color: var(--chat-head-text-color);
         }
 
         .minimized-chats-flyout {
             flex-direction: column-reverse;
             bottom: 42px;
-            width: $minimized-chats-width;
+            width: var(--minimized-chats-width);
 
             .chat-head {
                 padding: 0.3em;
-                border-radius: $chatbox-border-radius;
+                border-radius: var(--chatbox-border-radius);
                 height: 35px;
                 margin-bottom: 0.2em;
                 box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4);
@@ -68,8 +68,8 @@
             font-weight: bold;
             background-color: white;
             border: 1px solid;
-            text-shadow: 1px 1px 0 $text-shadow-color;
-            color: $warning-color;
+            text-shadow: 1px 1px 0 var(--text-shadow-color);
+            color: var(--warning-color);
             border-radius: 5px;
             padding: 2px 4px;
             font-size: 16px;
diff --git a/sass/_roster.scss b/sass/_roster.scss
index 512476c741..146d809ac6 100644
--- a/sass/_roster.scss
+++ b/sass/_roster.scss
@@ -3,7 +3,7 @@
     width: 100%;
     position: relative;
     margin: 0;
-    height: $roster-height;
+    height: var(--roster-height);
     padding: 0;
     overflow: hidden;
     // XXX: FIXME
@@ -37,10 +37,10 @@
         .roster-filter {
             width: 100%;
             margin: 0.2em;
-            font-size: calc(#{$font-size} - 2px);
+            font-size: calc(var(--font-size) - 2px);
         }
         .state-type {
-            font-size: calc(#{$font-size} - 2px);
+            font-size: calc(var(--font-size) - 2px);
             width: 100%;
         }
     }
@@ -54,17 +54,17 @@
 
         .roster-group {
             border: none;
-            color: $text-color;
+            color: var(--text-color);
             font-weight: normal;
-            text-shadow: 0 1px 0 $text-shadow-color;
+            text-shadow: 0 1px 0 var(--text-shadow-color);
             margin: 0.75em 0 0.75em 0;
 
             .group-toggle {
                 &:hover {
-                    color: $dark-gray-color;
+                    color: var(--roster-group-toggle-hover-color);
                 }
-                font-family: $heading-font; 
-                color: $text-color;
+                font-family: var(--heading-font);
+                color: var(--text-color);
                 display: block;
                 width: 100%;
                 padding-top: 0;
@@ -74,7 +74,7 @@
             li {
                 &.requesting-xmpp-contact {
                     a {
-                        line-height: $line-height;
+                        line-height: var(--line-height);
                         &.far, &.fas, &.fa {
                             width: 1.5em;
                         }
@@ -96,11 +96,11 @@
 
                     .msgs-indicator {
                         color: white;
-                        background-color: $chat-head-color;
+                        background-color: var(--chat-head-color);
                         opacity: 1;
                         border-radius: 10%;
                         padding: 0.2em;
-                        font-size: $font-size-small;
+                        font-size: var(--font-size-small);
                     }
 
                     .contact-name {
@@ -123,7 +123,7 @@
                     }
                 }
                 &.current-xmpp-contact span {
-                    font-size: $font-size;
+                    font-size: var(--font-size);
                     float: left;
                     margin-right: 0.5em;
                 }
@@ -141,7 +141,7 @@
                     margin-left: 5px;
                 }
                 &:hover {
-                    background-color: lighten($controlbox-head-color, 45%);
+                    background-color: var(--controlbox-head-color-lighten-45-percent);
                     .remove-xmpp-contact {
                         display: inline-block;
                     }
@@ -151,7 +151,7 @@
     }
     span {
         &.pending-contact-name {
-            line-height: $line-height;
+            line-height: var(--line-height);
             width: 100%;
         }
     }
diff --git a/sass/_variables.scss b/sass/_variables.scss
index ea60436aa4..0f31d5053e 100644
--- a/sass/_variables.scss
+++ b/sass/_variables.scss
@@ -1,162 +1,126 @@
-/*
-    Color scheme helpers:
-    https://coolors.co/app/264653-2a9d8f-e9c46a-f4a261-e76f51
-    http://paletton.com/#uid=70a0u0kkNs+b4JOgryLpxqpsbkI
- */
-$subdued-color: #A8ABA1 !default;
-$gray-color: #818479 !default;
-$dark-gray-color: #585B51!default;
-$visitor-color: #A8ABA1 !default;
-
-$lightest-blue: #89B7CD;
-$light-blue: #578EA9;
-$blue: #387592;
-$dark-blue: #206485;
-$darkest-blue: #114C68;
-
-$lightest-red: #FFB9A7;
-$light-red: #FF977C;
-$red: #E77051;
-$dark-red: #D24E2B;
-$darkest-red: #A53214;
-
-$lightest-orange: #FFD6A7;
-$light-orange: #E7A151;
-$orange: #E7A151;
-$dark-orange: #D2842B;
-$darkest-orange: #A56214;
-
-$greenish-white: #E7FBF0;
-$reddish-white: #FFECE7;
-
-$light-green: #5CBC86;
-$green: #3AA569;
-$dark-green: #1E9652;
-$darkest-green: #0E763B;
-
-$info:  $green !default;
-
-$lightest-green: #E7FBF0;
-$light-green: #5CBC86;
-$green: #3AA569;
-$dark-green: #1E9652;
-$darkest-green: #0E763B;
-
-$link-color: $light-blue !default;
-$dark-link-color: $dark-blue !default;
-$global-background-color: $light-blue !default;
-
-$inverse-link-color: white !default;
-$link-shadow-color: #FAFAFA !default;
-$text-shadow-color: #FAFAFA !default;
-$text-color: #666 !default;
-$message-text-color: #555 !default;
-$light-text-color: #A8ABA1 !default;
-$border-color: #CCC !default;
-$icon-color: $blue !default;
-$save-button-color: $green !default;
-
-$chat-textarea-color: #666 !default;
-$chat-textarea-height: 60px !default;
-
-$send-button-height: 27px !default;
-$send-button-margin: 3px !default;
-
-$message-them-color: $green !default;
-
-$roster-height: 194px !default;
-
-$flyout-padding: 1.2em;
-
-$chat-head-color: $green !default;
-$chat-head-text-color: white !default;
-$chat-head-inverse-text-color: white !default;
-
-$input-focus-color: #1A9707 !default;
-$highlight-color: #DCF9F6 !default;
-
-$primary-color: $orange !default;
-$secondary-color: $blue !default;
-$warning-color: $dark-red !default;
-
-$light-background-border-color: #B1BFC4 !default;
-$light-background-color: #FCFDFD !default;
-
-$moderator-color: $dark-red !default;
-$online-color: $green !default;
-$error-color: $darkest-red !default;
-$info-color: $dark-green !default;
-
-$rounded-border-radius: 4px !default;
-
-$button-border-radius: 5px !default;
-$chatbox-border-radius: 4px !default;
-$bottom-gutter-height: 35px !default;
-
 $mobile_landscape_height: 450px !default;
 $mobile_portrait_length: 480px !default;
 
-$message-font-size: 14px !default;
+$font-path: "webfonts/icomoon/fonts/" !default;
 
-$font-size-tiny: 10px !default;
+#conversejs {
+    --subdued-color: #A8ABA1;
+    --subdued-color-lighten-25-percent: #e6e7e4; // lighten(#A8ABA1, 25%)
 
-$controlbox-width: 250px !default;
-$controlbox-head-color: $light-blue !default;
+    --chat-status-online: #3AA569; // $green
+    --chat-status-busy: #E77051; // $red
+    --chat-status-away: #E7A151; // $orange
 
-$chat-gutter: 0.5em !default;
-$minimized-chats-width: 130px !default;
+    --brand-heading-color: #387592; // $blue
 
-$mobile-chat-width: 100% !default;
-$mobile-chat-height: 400px !default;
-$small-mobile-chat-height: 300px !default;
+    --completion-light-color: #FFB9A7; // $lightest-red
+    --completion-normal-color: #E77051; // $red
+    --completion-dark-color: #D24E2B; // $dark-red
 
-$font-path: "webfonts/icomoon/fonts/" !default;
+    --link-color: #578EA9; // $light-blue
+    --link-color-darken-20-percent: #345566; // darken($light-blue, 20%)
+    --link-color-lighten-10-percent: #79a5ba; // lighten($light-blue, 10%)
+    --dark-link-color: #206485; // $dark-blue
+    --global-background-color: #578EA9; // $light-blue
+
+    --inverse-link-color: white;
+    --text-shadow-color: #FAFAFA;
+    --text-color: #666;
+    --text-color-lighten-15-percent: #8c8c8c; // lighten(#666, 15%)
+    --message-text-color: #555;
+    --save-button-color: #3AA569; // $green
+
+    --chat-textarea-color: #666;
+    --chat-textarea-height: 60px;
+
+    --send-button-height: 27px;
+    --send-button-margin: 3px;
+
+    --roster-height: 194px;
+    --roster-group-toggle-hover-color: #585B51; // $dark-gray-color
+
+    --flyout-padding: 1.2em;
+
+    --chat-head-color: #3AA569; // $green
+    --chat-head-color-lighten-50-percent: #e7f7ee; // lighten($green, 50%)
+    --chat-head-text-color: white;
+
+    --highlight-color: #DCF9F6;
+
+    --primary-color: #E7A151; // $orange
+    --secondary-color: #387592; // $blue
+    --warning-color: #D24E2B; // $dark-red
+
+    --light-background-color: #FCFDFD;
+
+    --error-color: #A53214; // $darkest-red
+    --info-color: #1E9652; // $dark-green
+
+    --button-border-radius: 5px;
+    --chatbox-border-radius: 4px;
+
+    --controlbox-width: 250px;
+    --controlbox-head-color: #578EA9; // $light-blue
+    --controlbox-head-color-lighten-45-percent: #eff4f7; // lighten($light-blue, 45%)
+
+    --chat-gutter: 0.5em;
+    --minimized-chats-width: 130px;
+
+    --mobile-chat-width: 100%;
+    --mobile-chat-height: 400px;
+
+    // TODO: figure out a way to concatenate custom properties with strings.
+    // --font-path: "webfonts/icomoon/fonts/";
 
-$normal-font: "Helvetica", "Arial", sans-serif;
-$heading-font: 'Century Gothic', futura, 'URW Gothic L', Verdana, sans-serif !default;
+    --normal-font: "Helvetica", "Arial", sans-serif;
+    --heading-font: 'Century Gothic', futura, 'URW Gothic L', Verdana, sans-serif;
 
-$chatroom-color-dark: $darkest-red !default;
-$chatroom-color-light: $light-red !default;
-$chatroom-head-color: $red !default;
-$chatroom-message-them-color: $green !default;
-$chatroom-width: 400px !default;
+    --chatroom-head-color: #E77051; // $red
+    --chatroom-head-color-lighten-25-percent: #f6ccc1; // lighten($red, 25%)
+    --chatroom-head-color-lighten-30-percent: #fadfd7; // lighten($red, 30%)
+    --chatroom-width: 400px;
 
-$headline-head-color: $orange !default;
+    --headline-head-color: #E7A151; // $orange
+    --headline-message-color: #D2842B; // $dark-orange
 
-$box-close-button-padding-top: 4px !default;
-$box-close-button-padding-bottom: 4px !default;
-$box-close-button-padding-left: 4px !default;
-$box-close-button-padding-right: 4px !default;
+    --chatbox-button-size: 14px;
+    --fullpage-chatbox-button-size: 16px;
 
-$chatbox-button-size: 14px !default;
-$fullpage-chatbox-button-size: 16px !default;
+    --font-size-tiny: 10px;
+    --font-size-small: 12px;
+    --font-size: 14px;
+    --font-size-large: 16px;
+    --font-size-huge: 20px;
 
-$font-size-tiny: 10px !default;
-$font-size-small: 12px !default;
-$font-size: 14px !default;
-$font-size-large: 16px !default;
-$font-size-huge: 20px !default;
+    --message-font-size: var(--font-size);
 
-$legend-font-size: 16px !default;
+    --line-height-small: 14px;
+    --line-height: 16px;
+    --line-height-large: 20px;
+    --line-height-huge: 27px;
 
-$line-height-small:  14px !default;
-$line-height:  16px !default;
-$line-height-large:  20px !default;
-$line-height-huge:  27px !default;
+    --occupants-padding: 1em;
 
-$occupants-padding: 1em;
+    --embedded-emoji-picker-height: 200px;
 
-$embedded-emoji-picker-height: 200px !default;
+    --fullpage-chat-head-height: 62px;
+    --fullpage-chat-height: 100vh;
+    --fullpage-chat-width: 100%;
+    --fullpage-emoji-picker-height: 200px;
+    --fullpage-max-chat-textarea-height: 15em;
 
-$fullpage-chat-head-height: 62px !default;
-$fullpage-chat-height: 100vh;
-$fullpage-chat-width: 100%;
-$fullpage-emoji-picker-height: 200px !default;
-$fullpage-max-chat-textarea-height: 15em!default;
+    --overlayed-chat-head-height: 55px;
+    --overlayed-chat-height: 450px;
+    --overlayed-chat-width: 250px;
+    --overlayed-chatbox-hover-height: 1em;
+    --overlayed-emoji-picker-height: 100px;
+    --overlayed-max-chat-textarea-height: 200px;
+    --overlayed-badge-color: #818479; // $gray-color
 
-$overlayed-chat-head-height: 55px !default;
-$overlayed-chat-height: 450px !default;
-$overlayed-chat-width: 250px !default;
-$overlayed-chatbox-hover-height: 1em !default;
-$overlayed-emoji-picker-height: 100px !default;
-$overlayed-max-chat-textarea-height: 200px !default;
+    --list-toggle-color: #585B51; // $dark-gray-color
+    --list-toggle-hover-color: #818479; // $gray-color
+    --list-item-action-color: #e3eef3; // lighten($lightest-blue, 25%)
+    --list-circle-color: #89d6ab; // lighten($green, 25%)
+    --list-minus-circle-color: #f0a794; // lighten($red, 15%)
+    --list-dot-circle-color: #f6dec1; // lighten($orange, 25%)
+}