Add a dark theme inspired by Discord

This theme takes inspiration from https://discordapp.com/ and builds on
top of custom-properties, making the design more familiar to some users.

In order to change the theme, add the 'theme-dark' class on #conversejs,
you can do it at any point during the lifetime of Converse, either
directly in your HTML or by changing the DOM at runtime.

css/converse.css

@@ -9306,6 +9306,7 @@ readers do not read off random characters that represent icons */
   --message-receipt-color: #3AA569;
   --save-button-color: #3AA569;
   --chat-textarea-color: #666;
+  --chat-textarea-background-color: white;
   --chat-textarea-height: 60px;
   --send-button-height: 27px;
   --send-button-margin: 3px;
@@ -9315,6 +9316,9 @@ readers do not read off random characters that represent icons */
   --chat-head-color: #3AA569;
   --chat-head-color-lighten-50-percent: #e7f7ee;
   --chat-head-text-color: white;
+  --chat-correcting-color: var(--chat-head-color-lighten-50-percent);
+  --chat-topic-display: block;
+  --chat-info-display: block;
   --highlight-color: #DCF9F6;
   --primary-color: #578EA9;
   --primary-color-dark:  #397491;
@@ -9332,16 +9336,30 @@ readers do not read off random characters that represent icons */
   --controlbox-width: 250px;
   --controlbox-head-color: #578EA9;
   --controlbox-head-color-lighten-45-percent: #eff4f7;
+  --controlbox-pane-background-color: white;
+  --controlbox-heading-color: inherit;
+  --controlbox-heading-font-weight: normal;
   --chat-gutter: 0.5em;
   --minimized-chats-width: 130px;
   --mobile-chat-width: 100%;
   --mobile-chat-height: 400px;
   --normal-font: "Helvetica", "Arial", sans-serif;
   --heading-font: futura, 'Century Gothic', 'URW Gothic L', Verdana, sans-serif;
+  --heading-display: block;
+  --heading-color: white;
   --chatroom-head-color: #E77051;
   --chatroom-head-color-lighten-25-percent: #f6ccc1;
-  --chatroom-head-color-lighten-30-percent: #fadfd7;
+  --chatroom-head-button-color: var(--chatroom-head-color);
+  --chatroom-head-title-font-weight: normal;
+  --chatroom-head-title-padding-right: 0px;
+  --chatroom-head-description-color: var(--chatroom-head-color-lighten-25-percent);
+  --chatroom-head-description-link-color: white;
+  --chatroom-head-description-display: block;
+  --chatroom-head-description-border-left: 0px;
+  --chatroom-head-description-padding-left: 0px;
+  --chatroom-head-border-bottom: 0px;
   --chatroom-width: 400px;
+  --chatroom-correcting-color: #fadfd7;
   --headline-head-color: #E7A151;
   --headline-message-color: #D2842B;
   --chatbox-button-size: 14px;
@@ -9352,12 +9370,25 @@ readers do not read off random characters that represent icons */
   --font-size-large: 16px;
   --font-size-huge: 20px;
   --message-font-size: var(--font-size);
+  --separator-text-color: var(--message-text-color);
+  --chat-separator-border-bottom: 2px solid var(--chat-head-color);
+  --chatroom-separator-border-bottom: 2px solid var(--chatroom-head-color);
+  --message-input-border-top: 4px solid var(--chatroom-head-color);
+  --message-input-color: var(--chatroom-head-color);
   --line-height-small: 14px;
   --line-height: 16px;
   --line-height-large: 20px;
   --line-height-huge: 27px;
   --occupants-padding: 1em;
+  --occupants-background-color: white;
+  --occupants-max-width: inherit;
+  --occupants-border-left: 1px solid var(--text-color);
+  --occupants-border-bottom: 1px solid lightgrey;
+  --occupants-features-display: block;
   --embedded-emoji-picker-height: 200px;
+  --avatar-border-radius: 10%;
+  --avatar-border: 1px solid lightgrey;
+  --avatar-background-color: white;
   --fullpage-chat-head-height: 62px;
   --fullpage-chat-height: 100vh;
   --fullpage-chat-width: 100%;
@@ -9372,11 +9403,62 @@ readers do not read off random characters that represent icons */
   --overlayed-badge-color: #818479;
   --list-toggle-color: #585B51;
   --list-toggle-hover-color: #818479;
+  --list-toggle-font-weight: normal;
   --list-item-action-color: #e3eef3;
+  --list-item-link-color: inherit;
+  --list-item-link-hover-color: var(--dark-link-color);
+  --list-item-open-color: var(--controlbox-head-color);
+  --list-item-open-hover-color: var(--controlbox-head-color);
   --list-circle-color: #89d6ab;
   --list-minus-circle-color: #f0a794;
   --list-dot-circle-color: #f6dec1; }
 
+#conversejs.theme-dark {
+  --avatar-border-radius: 100%;
+  --avatar-border: 0px;
+  --avatar-background-color: none;
+  --controlbox-pane-background-color: #333;
+  --controlbox-heading-color: #777;
+  --controlbox-heading-font-weight: bold;
+  --chat-topic-display: none;
+  --chat-info-display: none;
+  --chat-textarea-background-color: #F6F6F6;
+  --chat-correcting-color: #FFFFC0;
+  --chat-head-text-color: #999;
+  --chatbox-border-radius: 0px;
+  --heading-display: inline;
+  --heading-color: #4F545C;
+  --chatroom-head-color: white;
+  --chatroom-head-color-lighten-25-percent: blue;
+  --chatroom-head-button-color: #999;
+  --chatroom-head-title-font-weight: bold;
+  --chatroom-head-title-padding-right: 12px;
+  --chatroom-head-description-color: black;
+  --chatroom-head-description-link-color: #00b3f4;
+  --chatroom-head-description-display: inline;
+  --chatroom-head-description-border-left: 1px solid #DDD;
+  --chatroom-head-description-padding-left: 12px;
+  --chatroom-head-border-bottom: 1px solid #EEE;
+  --chatroom-correcting-color: #FFFFC0;
+  --occupants-background-color: #F3F3F3;
+  /* TODO: find a way to allow that and reflow the chat-area properly.
+     * --occupants-max-width: 240px; */
+  --occupants-border-left: 0px;
+  --occupants-border-bottom: 0px;
+  --occupants-features-display: none;
+  --separator-text-color: #AAA;
+  --chat-separator-border-bottom: 1px solid #AAA;
+  --chatroom-separator-border-bottom: 1px solid #AAA;
+  --message-input-border-top: 1px solid #CCC;
+  --message-input-color: #CCC;
+  --fullpage-chat-head-height: 40px;
+  --fullpage-chatbox-button-size: 24px;
+  --list-toggle-font-weight: bold;
+  --list-item-link-color: #F1F1F1;
+  --list-item-link-hover-color: #DDD;
+  --list-item-open-color: #444;
+  --list-item-open-hover-color: #444; }
+
 body.reset {
   margin: 0; }
 
@@ -9801,9 +9883,9 @@ body.reset {
     text-align: center;
     width: 100%; }
   #conversejs .avatar {
-    border-radius: 10%;
-    border: 1px solid lightgrey;
-    background: white; }
+    border-radius: var(--avatar-border-radius);
+    border: var(--avatar-border);
+    background-color: var(--avatar-background-color); }
   #conversejs .activated {
     display: block !important; }
   #conversejs .nav-pills .nav-link.active,
@@ -10104,13 +10186,16 @@ body.reset {
         width: var(--mobile-chat-width);
         height: 100vh; } }
   #conversejs .chatbox .chat-title {
+    display: var(--heading-display);
     font-family: var(--heading-font);
-    color: white;
+    color: var(--heading-color);
     display: block;
     line-height: var(--line-height-large);
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap; }
+    #conversejs .chatbox .chat-title.groupchat {
+      padding-right: var(--chatroom-head-title-padding-right); }
     #conversejs .chatbox .chat-title a {
       color: var(--chat-head-text-color);
       width: 100%; }
@@ -10191,6 +10276,7 @@ body.reset {
       width: 100%; }
     #conversejs .chatbox .sendXMPPMessage .chat-textarea {
       color: var(--chat-textarea-color);
+      background-color: var(--chat-textarea-background-color);
       border-top-left-radius: 0;
       border-top-right-radius: 0;
       border-bottom-radius: var(--chatbox-border-radius);
@@ -10203,7 +10289,7 @@ body.reset {
       #conversejs .chatbox .sendXMPPMessage .chat-textarea.spoiler {
         height: 42px; }
       #conversejs .chatbox .sendXMPPMessage .chat-textarea.correcting {
-        background-color: var(--chat-head-color-lighten-50-percent); }
+        background-color: var(--chat-correcting-color); }
     #conversejs .chatbox .sendXMPPMessage .send-button {
       position: static;
       left: var(--send-button-margin);
@@ -10691,6 +10777,8 @@ body.reset {
         width: 100%; }
   #conversejs #controlbox .controlbox-section .controlbox-heading {
     font-family: var(--heading-font);
+    color: var(--controlbox-heading-color);
+    font-weight: var(--controlbox-heading-font-weight);
     padding: 0;
     margin: 0.75em 0;
     font-size: 1.1em;
@@ -10737,13 +10825,13 @@ body.reset {
   #conversejs #controlbox .controlbox-panes {
     height: 100%;
     overflow-y: auto;
-    background-color: white; }
+    background-color: var(--controlbox-pane-background-color); }
   #conversejs #controlbox .controlbox-subtitle {
     font-size: 90%;
     padding: 0.5em;
     text-align: right; }
   #conversejs #controlbox .controlbox-pane {
-    background-color: white;
+    background-color: var(--controlbox-pane-background-color);
     border: 0;
     font-size: var(--font-size);
     left: 0;
@@ -11144,6 +11232,7 @@ body.reset {
   padding: 0.3em 0; }
   #conversejs .list-container .list-toggle {
     font-family: var(--heading-font);
+    font-weight: var(--list-toggle-font-weight);
     display: block;
     color: var(--text-color);
     padding: 0 0 0.5rem 0; }
@@ -11163,6 +11252,7 @@ body.reset {
     text-shadow: 0 1px 0 var(--text-shadow-color);
     word-wrap: break-word; }
     #conversejs .items-list .list-item .list-item-link {
+      color: var(--list-item-link-color);
       font-size: var(--font-size);
       line-height: var(--font-size);
       padding-right: 0.5em;
@@ -11170,7 +11260,7 @@ body.reset {
       white-space: nowrap;
       text-overflow: ellipsis; }
       #conversejs .items-list .list-item .list-item-link:hover {
-        color: var(--dark-link-color); }
+        color: var(--list-item-link-hover-color); }
     #conversejs .items-list .list-item .list-item-action {
       opacity: 0;
       font-size: var(--font-size-tiny);
@@ -11181,16 +11271,16 @@ body.reset {
       #conversejs .items-list .list-item .list-item-action:before {
         font-size: var(--font-size); }
       #conversejs .items-list .list-item .list-item-action.button-on {
-        color: var(--link-color); }
+        color: var(--list-item-link-color); }
         #conversejs .items-list .list-item .list-item-action.button-on:hover {
-          color: var(--dark-link-color); }
+          color: var(--list-item-link-hover-color); }
       #conversejs .items-list .list-item .list-item-action:hover {
         color: var(--list-toggle-hover-color);
         opacity: 1; }
     #conversejs .items-list .list-item.open {
-      background-color: var(--controlbox-head-color); }
+      background-color: var(--list-item-open-color); }
       #conversejs .items-list .list-item.open:hover {
-        background-color: var(--controlbox-head-color) !important; }
+        background-color: var(--list-item-open-hover-color) !important; }
       #conversejs .items-list .list-item.open a {
         color: white; }
       #conversejs .items-list .list-item.open .list-item-link:hover {
@@ -11250,20 +11340,24 @@ body.reset {
 
 #conversejs.converse-embedded .chat-head-chatroom,
 #conversejs .chat-head-chatroom {
-  background-color: var(--chatroom-head-color); }
+  background-color: var(--chatroom-head-color);
+  border-bottom: var(--chatroom-head-border-bottom); }
   #conversejs.converse-embedded .chat-head-chatroom .chatroom-description,
   #conversejs .chat-head-chatroom .chatroom-description {
-    color: var(--chatroom-head-color-lighten-25-percent);
+    color: var(--chatroom-head-description-color);
+    display: var(--chatroom-head-description-display);
     font-size: var(--font-size);
     font-size: 70%;
     margin-top: 3px;
     overflow-y: hidden;
     overflow: hidden;
     text-overflow: ellipsis;
-    white-space: nowrap; }
+    white-space: nowrap;
+    border-left: var(--chatroom-head-description-border-left);
+    padding-left: var(--chatroom-head-description-padding-left); }
     #conversejs.converse-embedded .chat-head-chatroom .chatroom-description a,
     #conversejs .chat-head-chatroom .chatroom-description a {
-      color: white; }
+      color: var(--chatroom-head-description-link-color); }
   #conversejs.converse-embedded .chat-head-chatroom a.chatbox-btn.fa, #conversejs.converse-embedded .chat-head-chatroom a:visited.chatbox-btn.fa, #conversejs.converse-embedded .chat-head-chatroom a:hover.chatbox-btn.fa, #conversejs.converse-embedded .chat-head-chatroom a:not([href]):not([tabindex]).chatbox-btn.fa,
   #conversejs .chat-head-chatroom a.chatbox-btn.fa,
   #conversejs .chat-head-chatroom a:visited.chatbox-btn.fa,
@@ -11275,13 +11369,18 @@ body.reset {
     #conversejs .chat-head-chatroom a:visited.chatbox-btn.fa.button-on:before,
     #conversejs .chat-head-chatroom a:hover.chatbox-btn.fa.button-on:before,
     #conversejs .chat-head-chatroom a:not([href]):not([tabindex]).chatbox-btn.fa.button-on:before {
-      color: var(--chatroom-head-color); }
+      color: var(--chatroom-head-button-color); }
   #conversejs.converse-embedded .chat-head-chatroom .chatbox-btn.button-on:before,
   #conversejs .chat-head-chatroom .chatbox-btn.button-on:before {
-    color: var(--chatroom-head-color); }
-  #conversejs.converse-embedded .chat-head-chatroom .chat-title .chatroom-jid,
-  #conversejs .chat-head-chatroom .chat-title .chatroom-jid {
-    font-size: var(--font-size-small); }
+    color: var(--chatroom-head-button-color); }
+  #conversejs.converse-embedded .chat-head-chatroom .chat-title,
+  #conversejs .chat-head-chatroom .chat-title {
+    display: var(--heading-display);
+    font-weight: var(--chatroom-head-title-font-weight);
+    padding-right: var(--chatroom-head-title-padding-right); }
+    #conversejs.converse-embedded .chat-head-chatroom .chat-title .chatroom-jid,
+    #conversejs .chat-head-chatroom .chat-title .chatroom-jid {
+      font-size: var(--font-size-small); }
 
 #conversejs.converse-embedded .chatroom,
 #conversejs .chatroom {
@@ -11325,10 +11424,12 @@ body.reset {
         flex-direction: row; }
       #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chat-topic,
       #conversejs .chatroom .box-flyout .chatroom-body .chat-topic {
+        display: var(--chat-topic-display);
         font-weight: bold;
         color: var(--chatroom-head-color); }
       #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chat-info,
       #conversejs .chatroom .box-flyout .chatroom-body .chat-info {
+        display: var(--chat-info-display);
         color: var(--chatroom-head-color);
         line-height: normal; }
         #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chat-info.badge,
@@ -11360,10 +11461,11 @@ body.reset {
         overflow-x: hidden;
         overflow-y: hidden;
         vertical-align: top;
-        background-color: white;
-        border-left: 1px solid var(--text-color);
+        background-color: var(--occupants-background-color);
+        border-left: var(--occupants-border-left);
         border-bottom-right-radius: var(--chatbox-border-radius);
-        padding: 0.5em; }
+        padding: 0.5em;
+        max-width: var(--occupants-max-width); }
         #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants .occupants-header,
         #conversejs .chatroom .box-flyout .chatroom-body .occupants .occupants-header {
           display: flex;
@@ -11375,6 +11477,9 @@ body.reset {
         #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants .occupants-heading,
         #conversejs .chatroom .box-flyout .chatroom-body .occupants .occupants-heading {
           font-family: var(--heading-font); }
+        #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants .chatroom-features,
+        #conversejs .chatroom .box-flyout .chatroom-body .occupants .chatroom-features {
+          display: var(--occupants-features-display); }
         #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants .awesomplete ul,
         #conversejs .chatroom .box-flyout .chatroom-body .occupants .awesomplete ul {
           padding: 0; }
@@ -11393,7 +11498,7 @@ body.reset {
             overflow-y: auto;
             flex-basis: 0;
             flex-grow: 1;
-            border-bottom: 1px solid lightgrey; }
+            border-bottom: var(--occupants-border-bottom); }
           #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants ul li,
           #conversejs .chatroom .box-flyout .chatroom-body .occupants ul li {
             cursor: default;
@@ -11476,12 +11581,12 @@ body.reset {
           margin: 0 0.5em; }
         #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chatroom-form-container .button-primary,
         #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container .button-primary {
-          background-color: var(--chatroom-head-color); }
+          background-color: var(--chatroom-head-button-color); }
   #conversejs.converse-embedded .chatroom .sendXMPPMessage .chat-toolbar,
   #conversejs .chatroom .sendXMPPMessage .chat-toolbar {
     background-color: white;
-    border-top: 4px solid var(--chatroom-head-color);
-    color: var(--chatroom-head-color); }
+    border-top: var(--message-input-border-top);
+    color: var(--message-input-color); }
     #conversejs.converse-embedded .chatroom .sendXMPPMessage .chat-toolbar .fas, #conversejs.converse-embedded .chatroom .sendXMPPMessage .chat-toolbar .fas:hover,
     #conversejs.converse-embedded .chatroom .sendXMPPMessage .chat-toolbar .far, #conversejs.converse-embedded .chatroom .sendXMPPMessage .chat-toolbar .far:hover,
     #conversejs.converse-embedded .chatroom .sendXMPPMessage .chat-toolbar .fa, #conversejs.converse-embedded .chatroom .sendXMPPMessage .chat-toolbar .fa:hover,
@@ -11491,16 +11596,16 @@ body.reset {
     #conversejs .chatroom .sendXMPPMessage .chat-toolbar .far:hover,
     #conversejs .chatroom .sendXMPPMessage .chat-toolbar .fa,
     #conversejs .chatroom .sendXMPPMessage .chat-toolbar .fa:hover {
-      color: var(--chatroom-head-color); }
+      color: var(--message-input-color); }
   #conversejs.converse-embedded .chatroom .sendXMPPMessage .chat-textarea,
   #conversejs .chatroom .sendXMPPMessage .chat-textarea {
     border-bottom-right-radius: 0; }
     #conversejs.converse-embedded .chatroom .sendXMPPMessage .chat-textarea.correcting,
     #conversejs .chatroom .sendXMPPMessage .chat-textarea.correcting {
-      background-color: var(--chatroom-head-color-lighten-30-percent); }
+      background-color: var(--chatroom-correcting-color); }
   #conversejs.converse-embedded .chatroom .sendXMPPMessage .send-button,
   #conversejs .chatroom .sendXMPPMessage .send-button {
-    background-color: var(--chatroom-head-color); }
+    background-color: var(--message-input-color); }
   #conversejs.converse-embedded .chatroom .room-invite,
   #conversejs .chatroom .room-invite {
     padding-bottom: 1em; }
@@ -11635,7 +11740,8 @@ body.reset {
   text-align: center;
   z-index: 0; }
   #conversejs .message.date-separator .separator {
-    border: 0.5px solid var(--chat-head-color);
+    border-top: 0px;
+    border-bottom: var(--chat-separator-border-bottom);
     margin: 0 1em;
     position: relative;
     top: 1em;
@@ -11643,7 +11749,7 @@ body.reset {
   #conversejs .message.date-separator .separator-text {
     background: white;
     bottom: 1px;
-    color: var(--message-text-color);
+    color: var(--separator-text-color);
     display: inline-block;
     line-height: 2em;
     padding: 0 1em;
@@ -11689,9 +11795,9 @@ body.reset {
     #conversejs .message.chat-msg:hover .chat-msg__actions .chat-msg__action {
       opacity: 1; }
   #conversejs .message.chat-msg.correcting.groupchat {
-    background-color: var(--chatroom-head-color-lighten-30-percent); }
+    background-color: var(--chatroom-correcting-color); }
   #conversejs .message.chat-msg.correcting:not(.groupchat) {
-    background-color: var(--chat-head-color-lighten-50-percent); }
+    background-color: var(--chat-correcting-color); }
   #conversejs .message.chat-msg .spoiler {
     margin-top: 0.5em; }
   #conversejs .message.chat-msg .spoiler-hint {
@@ -11810,7 +11916,8 @@ body.reset {
   -webkit-animation: colorchange-chatmessage-muc 1s; }
 
 #conversejs .chatroom-body .message .separator {
-  border: 0.5px solid var(--chatroom-head-color); }
+  border-top: 0px;
+  border-bottom: var(--chatroom-separator-border-bottom); }
 
 #conversejs.converse-overlayed .message.chat-msg.chat-msg--followup .chat-msg__content {
   margin-left: 0; }

sass/_chatbox.scss

@@ -152,13 +152,17 @@
             }
         }
         .chat-title {
+            display: var(--heading-display);
             font-family: var(--heading-font);
-            color: white;
+            color: var(--heading-color);
             display: block;
             line-height: var(--line-height-large);
             overflow: hidden;
             text-overflow: ellipsis;
             white-space: nowrap;
+            &.groupchat {
+                padding-right: var(--chatroom-head-title-padding-right);
+            }
             a {
                 color: var(--chat-head-text-color);
                 width: 100%;
@@ -260,6 +264,7 @@
 
             .chat-textarea {
                 color: var(--chat-textarea-color);
+                background-color: var(--chat-textarea-background-color);
                 border-top-left-radius: 0;
                 border-top-right-radius: 0;
                 border-bottom-radius: var(--chatbox-border-radius);
@@ -273,7 +278,7 @@
                     height: 42px;
                 }
                 &.correcting {
-                    background-color: var(--chat-head-color-lighten-50-percent);
+                    background-color: var(--chat-correcting-color);
                 }
             }
 

sass/_chatrooms.scss

@@ -34,9 +34,11 @@
 
     .chat-head-chatroom {
         background-color: var(--chatroom-head-color);
+        border-bottom: var(--chatroom-head-border-bottom);
 
         .chatroom-description {
-            color: var(--chatroom-head-color-lighten-25-percent);
+            color: var(--chatroom-head-description-color);
+            display: var(--chatroom-head-description-display);
             font-size: var(--font-size);
             font-size: 70%;
             margin-top: 3px;
@@ -44,8 +46,10 @@
             overflow: hidden;
             text-overflow: ellipsis;
             white-space: nowrap;
+            border-left: var(--chatroom-head-description-border-left);
+            padding-left: var(--chatroom-head-description-padding-left);
             a {
-                color: white;
+                color: var(--chatroom-head-description-link-color);
             }
         }
 
@@ -54,7 +58,7 @@
                 &.fa {
                     color: var(--chat-head-text-color);
                     &.button-on:before {
-                        color: var(--chatroom-head-color);
+                        color: var(--chatroom-head-button-color);
                     }
                 }
             }
@@ -62,10 +66,13 @@
 
         .chatbox-btn {
             &.button-on:before {
-                color: var(--chatroom-head-color);
+                color: var(--chatroom-head-button-color);
             }
         }
         .chat-title {
+            display: var(--heading-display);
+            font-weight: var(--chatroom-head-title-font-weight);
+            padding-right: var(--chatroom-head-title-padding-right);
             .chatroom-jid {
                 font-size: var(--font-size-small);
             }
@@ -109,10 +116,12 @@
                     flex-direction: row;
                 }
                 .chat-topic {
+                    display: var(--chat-topic-display);
                     font-weight: bold;
                     color: var(--chatroom-head-color);
                 }
                 .chat-info {
+                    display: var(--chat-info-display);
                     color: var(--chatroom-head-color);
                     line-height: normal;
                     &.badge {
@@ -144,10 +153,11 @@
                     overflow-x: hidden;
                     overflow-y: hidden;
                     vertical-align: top;
-                    background-color: white;
-                    border-left: 1px solid var(--text-color);
+                    background-color: var(--occupants-background-color);
+                    border-left: var(--occupants-border-left);
                     border-bottom-right-radius: var(--chatbox-border-radius);
                     padding: 0.5em;
+                    max-width: var(--occupants-max-width);
 
                     .occupants-header {
                         display: flex;
@@ -160,6 +170,9 @@
                     .occupants-heading {
                         font-family: var(--heading-font);
                     }
+                    .chatroom-features {
+                        display: var(--occupants-features-display);
+                    }
                     .awesomplete {
                         ul {
                             padding: 0;
@@ -179,7 +192,7 @@
                             overflow-y: auto;
                             flex-basis: 0;
                             flex-grow: 1;
-                            border-bottom: 1px solid lightgrey;
+                            border-bottom: var(--occupants-border-bottom);
                         }
                         li {
                             cursor: default;
@@ -269,7 +282,7 @@
                         margin: 0 0.5em;
                     }
                     .button-primary {
-                        background-color: var(--chatroom-head-color);
+                        background-color: var(--chatroom-head-button-color);
                     }
                 }
             }
@@ -278,22 +291,22 @@
         .sendXMPPMessage {
             .chat-toolbar {
                 background-color: white;
-                border-top: 4px solid var(--chatroom-head-color);
-                color: var(--chatroom-head-color);
+                border-top: var(--message-input-border-top);
+                color: var(--message-input-color);
                 .fas, .fas:hover,
                 .far, .far:hover,
                 .fa, .fa:hover {
-                    color: var(--chatroom-head-color);
+                    color: var(--message-input-color);
                 }
             }
             .chat-textarea {
                 border-bottom-right-radius: 0;
                 &.correcting {
-                    background-color: var(--chatroom-head-color-lighten-30-percent);
+                    background-color: var(--chatroom-correcting-color);
                 }
             }
             .send-button {
-                background-color: var(--chatroom-head-color);
+                background-color: var(--message-input-color);
             }
         }
 

sass/_controlbox.scss

@@ -215,6 +215,8 @@
 
             .controlbox-heading {
                 font-family: var(--heading-font);
+                color: var(--controlbox-heading-color);
+                font-weight: var(--controlbox-heading-font-weight);
                 padding: 0;
                 margin: 0.75em 0;
                 font-size: 1.1em;
@@ -282,7 +284,7 @@
         .controlbox-panes {
             height: 100%;
             overflow-y: auto;
-            background-color: white;
+            background-color: var(--controlbox-pane-background-color);
         }
 
         .controlbox-subtitle {
@@ -292,7 +294,7 @@
         }
 
         .controlbox-pane {
-            background-color: white;
+            background-color: var(--controlbox-pane-background-color);
             border: 0;
             font-size: var(--font-size);
             left: 0;

sass/_core.scss

@@ -447,9 +447,9 @@ body.reset {
     }
 
     .avatar {
-        border-radius: 10%;
-        border: 1px solid lightgrey;
-        background: white;
+        border-radius: var(--avatar-border-radius);
+        border: var(--avatar-border);
+        background-color: var(--avatar-background-color);
     }
 
     .activated {

sass/_lists.scss

@@ -5,6 +5,7 @@
 
         .list-toggle {
             font-family: var(--heading-font);
+            font-weight: var(--list-toggle-font-weight);
             display: block;
             color: var(--text-color);
             padding: 0 0 0.5rem 0;
@@ -29,8 +30,9 @@
             word-wrap: break-word;
 
             .list-item-link {
+                color: var(--list-item-link-color);
                 &:hover {
-                    color: var(--dark-link-color);
+                    color: var(--list-item-link-hover-color);
                 }
                 font-size: var(--font-size);
                 line-height: var(--font-size);
@@ -50,9 +52,9 @@
                     font-size: var(--font-size);
                 }
                 &.button-on {
-                    color: var(--link-color);
+                    color: var(--list-item-link-color);
                     &:hover {
-                        color: var(--dark-link-color);
+                        color: var(--list-item-link-hover-color);
                     }
                 }
                 color: var(--subdued-color);
@@ -63,9 +65,9 @@
             }
 
             &.open {
-                background-color: var(--controlbox-head-color);
+                background-color: var(--list-item-open-color);
                 &:hover {
-                    background-color: var(--controlbox-head-color) !important;
+                    background-color: var(--list-item-open-hover-color) !important;
                 }
                 a {
                     color: white;

sass/_messages.scss

@@ -14,7 +14,8 @@
             z-index: 0;
 
             .separator {
-                border: 0.5px solid var(--chat-head-color);
+                border-top: 0px;
+                border-bottom: var(--chat-separator-border-bottom);
                 margin: 0 1em;
                 position: relative;
                 top: 1em;
@@ -24,7 +25,7 @@
             .separator-text {
                 background: white;
                 bottom: 1px; // Offset needed due to .separator border size
-                color: var(--message-text-color);
+                color: var(--separator-text-color);
                 display: inline-block;
                 line-height: 2em;
                 padding: 0 1em;
@@ -86,10 +87,10 @@
             }
             &.correcting {
                 &.groupchat  {
-                    background-color: var(--chatroom-head-color-lighten-30-percent);
+                    background-color: var(--chatroom-correcting-color);
                 }
                 &:not(.groupchat) {
-                    background-color: var(--chat-head-color-lighten-50-percent);
+                    background-color: var(--chat-correcting-color);
                 }
             }
 
@@ -269,7 +270,8 @@
             -webkit-animation: colorchange-chatmessage-muc 1s;
         }
         .separator {
-            border: 0.5px solid var(--chatroom-head-color);
+            border-top: 0px;
+            border-bottom: var(--chatroom-separator-border-bottom);
         }
     }
 }

sass/_variables.scss

@@ -32,6 +32,7 @@ $font-path: "webfonts/icomoon/fonts/" !default;
     --save-button-color: #3AA569; // $green
 
     --chat-textarea-color: #666;
+    --chat-textarea-background-color: white;
     --chat-textarea-height: 60px;
 
     --send-button-height: 27px;
@@ -45,6 +46,10 @@ $font-path: "webfonts/icomoon/fonts/" !default;
     --chat-head-color: #3AA569; // $green
     --chat-head-color-lighten-50-percent: #e7f7ee; // lighten($green, 50%)
     --chat-head-text-color: white;
+    --chat-correcting-color: var(--chat-head-color-lighten-50-percent);
+
+    --chat-topic-display: block;
+    --chat-info-display: block;
 
     --highlight-color: #DCF9F6;
 
@@ -71,6 +76,9 @@ $font-path: "webfonts/icomoon/fonts/" !default;
     --controlbox-width: 250px;
     --controlbox-head-color: #578EA9; // $light-blue
     --controlbox-head-color-lighten-45-percent: #eff4f7; // lighten($light-blue, 45%)
+    --controlbox-pane-background-color: white;
+    --controlbox-heading-color: inherit;
+    --controlbox-heading-font-weight: normal;
 
     --chat-gutter: 0.5em;
     --minimized-chats-width: 130px;
@@ -83,11 +91,22 @@ $font-path: "webfonts/icomoon/fonts/" !default;
 
     --normal-font: "Helvetica", "Arial", sans-serif;
     --heading-font: futura, 'Century Gothic', 'URW Gothic L', Verdana, sans-serif;
+    --heading-display: block;
+    --heading-color: white;
 
     --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-head-button-color: var(--chatroom-head-color);
+    --chatroom-head-title-font-weight: normal;
+    --chatroom-head-title-padding-right: 0px;
+    --chatroom-head-description-color: var(--chatroom-head-color-lighten-25-percent);
+    --chatroom-head-description-link-color: white;
+    --chatroom-head-description-display: block;
+    --chatroom-head-description-border-left: 0px;
+    --chatroom-head-description-padding-left: 0px;
+    --chatroom-head-border-bottom: 0px;
     --chatroom-width: 400px;
+    --chatroom-correcting-color: #fadfd7; // lighten($red, 30%)
 
     --headline-head-color: #E7A151; // $orange
     --headline-message-color: #D2842B; // $dark-orange
@@ -102,6 +121,12 @@ $font-path: "webfonts/icomoon/fonts/" !default;
     --font-size-huge: 20px;
 
     --message-font-size: var(--font-size);
+    --separator-text-color: var(--message-text-color);
+    --chat-separator-border-bottom: 2px solid var(--chat-head-color);
+    --chatroom-separator-border-bottom: 2px solid var(--chatroom-head-color);
+
+    --message-input-border-top: 4px solid var(--chatroom-head-color);
+    --message-input-color: var(--chatroom-head-color);
 
     --line-height-small: 14px;
     --line-height: 16px;
@@ -109,9 +134,18 @@ $font-path: "webfonts/icomoon/fonts/" !default;
     --line-height-huge: 27px;
 
     --occupants-padding: 1em;
+    --occupants-background-color: white;
+    --occupants-max-width: inherit;
+    --occupants-border-left: 1px solid var(--text-color);
+    --occupants-border-bottom: 1px solid lightgrey;
+    --occupants-features-display: block;
 
     --embedded-emoji-picker-height: 200px;
 
+    --avatar-border-radius: 10%;
+    --avatar-border: 1px solid lightgrey;
+    --avatar-background-color: white;
+
     --fullpage-chat-head-height: 62px;
     --fullpage-chat-height: 100vh;
     --fullpage-chat-width: 100%;
@@ -128,8 +162,70 @@ $font-path: "webfonts/icomoon/fonts/" !default;
 
     --list-toggle-color: #585B51; // $dark-gray-color
     --list-toggle-hover-color: #818479; // $gray-color
+    --list-toggle-font-weight: normal;
     --list-item-action-color: #e3eef3; // lighten($lightest-blue, 25%)
+    --list-item-link-color: inherit;
+    --list-item-link-hover-color: var(--dark-link-color);
+    --list-item-open-color: var(--controlbox-head-color);
+    --list-item-open-hover-color: var(--controlbox-head-color);
     --list-circle-color: #89d6ab; // lighten($green, 25%)
     --list-minus-circle-color: #f0a794; // lighten($red, 15%)
     --list-dot-circle-color: #f6dec1; // lighten($orange, 25%)
 }
+
+#conversejs.theme-dark {
+    --avatar-border-radius: 100%;
+    --avatar-border: 0px;
+    --avatar-background-color: none;
+
+    --controlbox-pane-background-color: #333;
+    --controlbox-heading-color: #777;
+    --controlbox-heading-font-weight: bold;
+
+    --chat-topic-display: none;
+    --chat-info-display: none;
+    --chat-textarea-background-color: #F6F6F6;
+    --chat-correcting-color: #FFFFC0;
+    --chat-head-text-color: #999;
+
+    --chatbox-border-radius: 0px;
+
+    --heading-display: inline;
+    --heading-color: #4F545C;
+
+    --chatroom-head-color: white;
+    --chatroom-head-color-lighten-25-percent: blue;
+    --chatroom-head-button-color: #999;
+    --chatroom-head-title-font-weight: bold;
+    --chatroom-head-title-padding-right: 12px;
+    --chatroom-head-description-color: black;
+    --chatroom-head-description-link-color: #00b3f4;
+    --chatroom-head-description-display: inline;
+    --chatroom-head-description-border-left: 1px solid #DDD;
+    --chatroom-head-description-padding-left: 12px;
+    --chatroom-head-border-bottom: 1px solid #EEE;
+    --chatroom-correcting-color: #FFFFC0;
+
+    --occupants-background-color: #F3F3F3;
+    /* TODO: find a way to allow that and reflow the chat-area properly.
+     * --occupants-max-width: 240px; */
+    --occupants-border-left: 0px;
+    --occupants-border-bottom: 0px;
+    --occupants-features-display: none;
+
+    --separator-text-color: #AAA;
+    --chat-separator-border-bottom: 1px solid #AAA;
+    --chatroom-separator-border-bottom: 1px solid #AAA;
+
+    --message-input-border-top: 1px solid #CCC;
+    --message-input-color: #CCC;
+
+    --fullpage-chat-head-height: 40px;
+    --fullpage-chatbox-button-size: 24px;
+
+    --list-toggle-font-weight: bold;
+    --list-item-link-color: #F1F1F1;
+    --list-item-link-hover-color: #DDD;
+    --list-item-open-color: #444;
+    --list-item-open-hover-color: #444;
+}