Add dark theme Dracula

https://draculatheme.com

dev.html

@@ -36,7 +36,7 @@
         muc_respect_autojoin: true,
         muc_show_logs_before_join: true,
         notify_all_room_messages: ['discuss@conference.conversejs.org'],
-        theme: 'concord',
+        theme: 'dracula',
         view_mode: 'fullscreen',
         websocket_url: 'wss://conversejs.org/xmpp-websocket',
         // websocket_url: 'ws://chat.example.org:5380/xmpp-websocket',

package-lock.json

@@ -21270,6 +21270,7 @@
 			"version": "1.4.4",
 			"resolved": "https://registry.npmjs.org/strophe.js/-/strophe.js-1.4.4.tgz",
 			"integrity": "sha512-Y6JMbv8EQyvajfR6QKZERTxJsO1pvYjbsEhjKkDKBns8KTWn6RRAP+lZ8Fdh/NpbMjjRPi0hg89KeUWsWCLklw==",
+			"license": "MIT",
 			"dependencies": {
 				"abab": "^2.0.3"
 			},

src/modals/modals.scss

@@ -1,4 +1,9 @@
 .conversejs {
+
+    .modal-content {
+        background-color: var(--modal-background-color);
+    }
+
     .modal-body {
         .row {
             margin-left: 0;

src/plugins/bookmark-views/styles/bookmarks.scss

@@ -15,10 +15,8 @@
             .bookmarks-list {
                 dl.rooms-list.bookmarks {
                     dd.available-chatroom {
-                        a {
-                            &.open-room {
-                                width: 80%;
-                            }
+                        a.open-room {
+                            width: 80%;
                         }
                     }
                 }

src/plugins/chatview/styles/chat-bottom-panel.scss

@@ -16,7 +16,7 @@
                 -webkit-background-clip: padding-box;
                 border-bottom-radius: var(--chatbox-border-radius);
                 background-clip: padding-box;
-                background-color: white;
+                background-color: var(--chat-textarea-background-color);
                 border: 0;
                 margin: 0;
                 padding: 0;

src/plugins/chatview/styles/chat-head.scss

@@ -11,6 +11,7 @@
 
             &.chat-head-chatbox {
                 background-color: var(--chat-head-color);
+                border-bottom: var(--chat-head-border-bottom);
             }
 
             .avatar {

src/plugins/controlbox/styles/_controlbox.scss

@@ -326,7 +326,7 @@
 
         .controlbox-panes {
             background-color: var(--controlbox-pane-background-color);
-            border-right: 0.2143rem solid var(--panel-divider-color);
+            border-right: 0.2rem solid var(--panel-divider-color);
             height: 100%;
             overflow-y: auto;
         }

src/plugins/modal/styles/_modal.scss

@@ -7,6 +7,10 @@
 
     #converse-modals {
         .modal {
+            .modal-content {
+                box-shadow: var(--raised-el-shadow);
+            }
+
             .modal-body {
                 overflow-y: auto;
                 max-height: 75vh;

src/plugins/muc-views/styles/muc-forms.scss

@@ -7,7 +7,7 @@ converse-muc-config-form {
     .chatroom {
         .box-flyout {
             .muc-form-container {
-                background-color: white;
+                background-color: var(--background);
                 border: 0;
                 color: var(--text-color);
                 font-size: var(--font-size);

src/plugins/muc-views/styles/muc-occupants.scss

@@ -87,6 +87,10 @@
                         }
                         &.occupant {
                             cursor: pointer;
+                            color: var(--link-color);
+                            &:hover {
+                                color: var(--link-hover-color);
+                            }
 
                             .occupant-nick-badge {
                                 display: flex;

src/plugins/omemo/utils.js

@@ -710,7 +710,11 @@ export function getOMEMOToolbarButton (toolbar_el, buttons) {
 
     let color;
     if (model.get('omemo_supported')) {
-        color = model.get('omemo_active') ? `var(--info-color)` : `var(--error-color)`;
+        if (model.get('omemo_active')) {
+            color = is_muc ? `var(--muc-color)` : `var(--chat-toolbar-btn-color)`;
+        } else {
+            color = `var(--error-color)`;
+        }
     } else {
         color = `var(--muc-toolbar-btn-disabled-color)`;
     }

src/plugins/rosterview/styles/roster.scss

@@ -83,7 +83,7 @@
             margin: 0.25em 0;
         }
 
-        li {
+        .list-item {
             &.requesting-xmpp-contact {
                 a {
                     line-height: var(--line-height);
@@ -98,6 +98,7 @@
                 padding: 0;
                 &.unread-msgs {
                     font-weight: bold;
+                    color: var(--unread-msgs-color);
                     .contact-name {
                         width: 70%;
                     }
@@ -142,7 +143,7 @@
                 margin-left: 5px;
             }
             &:hover {
-                background-color: var(controlbox-pane-bg-hover-color);
+                background-color: var(--controlbox-pane-bg-hover-color);
             }
         }
     }

src/shared/chat/emoji-dropdown.js

@@ -38,6 +38,8 @@ export default class EmojiDropdown extends DropdownBase {
     }
 
     render() {
+        const is_groupchat = this.chatview.model.get('type') === _converse.CHATROOMS_TYPE;
+        const color = is_groupchat ? '--muc-toolbar-btn-color' : '--chat-toolbar-btn-color';
         return html`
             <div class="dropup">
                 <button class="toggle-emojis"
@@ -46,6 +48,7 @@ export default class EmojiDropdown extends DropdownBase {
                         aria-haspopup="true"
                         aria-expanded="false">
                     <converse-icon
+                        color="var(${color})"
                         class="fa fa-smile "
                         path-prefix="${api.settings.get('assets_path')}"
                         size="1em"></converse-icon>

src/shared/chat/styles/emoji.scss

@@ -34,7 +34,6 @@
             padding-bottom: 0;
             background-color: var(--chat-head-color);
             overflow-y: hidden;
-            background: white;
             .emoji-picker__lists {
                 height: 8em;
                 overflow-y: auto;
@@ -49,6 +48,7 @@
                 }
 
                 .emoji-lists__container {
+                    background-color: var(--background);
                     overflow-x: hidden;
                 }
 
@@ -66,13 +66,6 @@
                 background-color: var(--chat-head-color);
                 width: 100%;
                 font-size: var(--font-size);
-                label {
-                    margin: 0;
-                    padding: 0 0.5em;
-                    white-space: nowrap;
-                    font-size: var(--font-size-small);
-                    color: var(--heading-color);
-                }
                 ul {
                     display: flex;
                     flex-direction: row;
@@ -83,7 +76,7 @@
                 }
             }
             .emoji-picker {
-                background-color: white;
+                background-color: var(--background);
                 padding: 0.5em 0 0 0.5em;
                 &:last-child {
                     padding-bottom: 0.5em;
@@ -114,7 +107,6 @@
                             vertical-align: baseline;
                         }
                         a {
-                            padding: 3px;
                             display: inline-block;
                             font-size: var(--font-size-huge);
                             line-height: calc(var(--font-size-huge) * 1.5);
@@ -148,10 +140,8 @@
                     .emoji-category {
                         padding: 0.25em 0;
                         font-size: var(--font-size-huge);
-                        &.picked {
-                            background-color: white;
-                            border: 1px var(--chat-head-color) solid;
-                            border-bottom: none;
+                        &.picked a {
+                            background-color: var(--heading-color);
                         }
                         &.selected a, &:hover a {
                             background-color: var(--highlight-color-darker);
@@ -173,20 +163,11 @@
     .chatroom {
         converse-emoji-picker {
             background-color: var(--chatroom-head-bg-color);
-            background: white;
             .emoji-skintone-picker {
                 background-color: var(--chatroom-head-bg-color);
             }
             .emoji-picker__header {
                 background-color: var(--chatroom-head-bg-color);
-                ul {
-                    .emoji-category {
-                        &.picked {
-                            border: 1px var(--chatroom-head-bg-color) solid;
-                            border-bottom: none;
-                        }
-                    }
-                }
             }
         }
     }

src/shared/chat/styles/toolbar.scss

@@ -12,7 +12,8 @@
 
     .chatbox {
         .send-button {
-            background-color: var(--chat-head-color);
+            color: var(--background);
+            background-color: var(--chat-toolbar-btn-color);
         }
     }
 
@@ -55,7 +56,6 @@
                 cursor: pointer;
             }
             .toolbar-menu {
-                background-color: #fff;
                 bottom: 1.7rem;
                 box-shadow: -1px -1px 2px 0 rgba(0, 0, 0, 0.4);
                 height: auto;
@@ -99,7 +99,7 @@
     }
 
     converse-chat-toolbar {
-        background-color: white;
+        background-color: var(--chat-background-color);
         box-sizing: border-box;
         display: flex;
         justify-content: space-between;
@@ -143,7 +143,7 @@
         converse-chat-toolbar {
             border-top: var(--chatbox-message-input-border-top);
             color: var(--chat-toolbar-btn-color);
-            background-color: white;
+            background-color: var(--chat-background-color);
             .fas, .fas:hover,
             .far, .far:hover,
             .fa, .fa:hover {

src/shared/chat/styles/unfurl.scss

@@ -6,6 +6,10 @@
     @import "bootstrap/scss/card";
 
     converse-chats {
+        .card--unfurl {
+            background-color: var(--chat-content-background-color);
+        }
+
         &.converse-embedded,
         &.converse-fullscreen {
             .message {
@@ -26,11 +30,7 @@
                 }
             }
         }
-    }
-}
 
-.conversejs {
-    converse-chats {
         &.converse-overlayed,
         &.converse-mobile {
             .message {

src/shared/chat/templates/emoji-picker.js

@@ -91,7 +91,6 @@ export const tpl_emoji_picker = (o) => {
                 query="${o.query}"></converse-emoji-picker-content>` : ''}
 
         <div class="emoji-skintone-picker">
-            <label>Skin tone</label>
             <ul>${ skintones.map(skintone => skintone_emoji(Object.assign({skintone}, o))) }</ul>
         </div>`;
 }

src/shared/chat/toolbar.js

@@ -56,10 +56,11 @@ export class ChatToolbar extends CustomElement {
         }
 
         if (this.show_call_button) {
+            const color = this.is_groupchat ? '--muc-toolbar-btn-color' : '--chat-toolbar-btn-color';
             const i18n_start_call = __('Start a call');
             buttons.push(html`
                 <button class="toggle-call" @click=${this.toggleCall} title="${i18n_start_call}">
-                    <converse-icon class="fa fa-phone" path-prefix="/dist" size="1em"></converse-icon>
+                    <converse-icon color="var(${color})" class="fa fa-phone" path-prefix="/dist" size="1em"></converse-icon>
                 </button>`
             );
         }
@@ -86,8 +87,10 @@ export class ChatToolbar extends CustomElement {
                 <button class="toggle_occupants right"
                         title="${this.hidden_occupants ? i18n_show_occupants : i18n_hide_occupants}"
                         @click=${this.toggleOccupants}>
-                    <converse-icon class="fa ${this.hidden_occupants ? `fa-angle-double-left` : `fa-angle-double-right`}"
-                             path-prefix="${api.settings.get('assets_path')}" size="1em"></converse-icon>
+                    <converse-icon
+                        color="var(--muc-toolbar-btn-color)"
+                        class="fa ${this.hidden_occupants ? `fa-angle-double-left` : `fa-angle-double-right`}"
+                        path-prefix="${api.settings.get('assets_path')}" size="1em"></converse-icon>
                 </button>`
             );
         }
@@ -109,9 +112,12 @@ export class ChatToolbar extends CustomElement {
     getHTTPUploadButton (is_supported) {
         if (is_supported) {
             const i18n_choose_file =  __('Choose a file to send')
+            const color = this.is_groupchat ? '--muc-toolbar-btn-color' : '--chat-toolbar-btn-color';
             return html`
                 <button title="${i18n_choose_file}" @click=${this.toggleFileUpload}>
-                    <converse-icon class="fa fa-paperclip"
+                    <converse-icon
+                        color="var(${color})"
+                        class="fa fa-paperclip"
                         path-prefix="${api.settings.get('assets_path')}"
                         size="1em"></converse-icon>
                 </button>
@@ -133,13 +139,16 @@ export class ChatToolbar extends CustomElement {
         } else {
             i18n_toggle_spoiler = __("Click to write your message as a spoiler");
         }
+        const color = this.is_groupchat ? '--muc-toolbar-btn-color' : '--chat-toolbar-btn-color';
         const markup = html`
             <button class="toggle-compose-spoiler"
                     title="${i18n_toggle_spoiler}"
                     @click=${this.toggleComposeSpoilerMessage}>
-                <converse-icon class="fa ${this.composing_spoiler ? 'fa-eye-slash' : 'fa-eye'}"
-                         path-prefix="${api.settings.get('assets_path')}"
-                         size="1em"></converse-icon>
+                <converse-icon
+                    color="var(${color})"
+                    class="fa ${this.composing_spoiler ? 'fa-eye-slash' : 'fa-eye'}"
+                    path-prefix="${api.settings.get('assets_path')}"
+                    size="1em"></converse-icon>
             </button>`;
 
         if (this.is_groupchat) {

src/shared/components/styles/dropdown.scss

@@ -5,6 +5,7 @@
 .conversejs {
     @import "bootstrap/scss/dropdown";
     converse-dropdown {
+
         &.dropup {
             &.dropup--left {
                 .dropdown-menu {
@@ -20,7 +21,9 @@
         }
 
         .dropdown-menu {
+            background: var(--background);
             margin-top: -0.2em !important;
+            box-shadow: var(--raised-el-shadow);
         }
 
         .dropdown-item {
@@ -41,6 +44,7 @@
             }
             &:hover {
                 color: var(--text-color);
+                background-color: var(--list-item-hover-color);
             }
         }
     }

src/shared/styles/_core.scss

@@ -8,14 +8,28 @@
       position: absolute;
     }
 
+    .img-thumbnail {
+        background-color: var(--img-thumbnail-background-color);
+        border: 1px solid var(--img-thumbnail-border-color);
+    }
+
     textarea:disabled {
-        background-color: #EEE !important;
+        background-color: var(--chat-textarea-disabled-bg-color) !important;
     }
 
     .subdued {
         opacity: 0.35;
     }
 
+    .close {
+      color: var(--close-color);
+      text-shadow: none;
+
+      &:hover {
+        color: var(--close-color-hover);
+      }
+    }
+
     .fit-content {
         width: fit-content !important;
         max-width: fit-content !important;
@@ -410,10 +424,6 @@
         font-size: 90%;
     }
 
-    .form-control--labeled {
-        margin-top: 0.5em;
-    }
-
     .nav-pills .nav-link.active,
     .nav-pills .show > .nav-link {
         background-color: var(--primary-color);

src/shared/styles/_variables.scss

@@ -1,2 +1,56 @@
 $mobile_landscape_height: 450px !default;
 $mobile_portrait_length: 480px !default;
+
+.conversejs, .conversejs-bg, #conversejs-bg, body.converse-fullscreen {
+
+    --avatar-border-radius: 10%;
+    --message-avatar-width: 36px;
+    --message-avatar-height: 36px;
+
+    --chatroom-width: 500px;
+
+    --send-button-height: 27px;
+    --send-button-margin: 3px;
+
+    --inline-action-margin: 0.75em;
+
+    --roster-height: 194px;
+
+    --button-border-radius: 5px;
+    --chatbox-border-radius: 4px;
+
+    --normal-font: "Helvetica", "Arial", sans-serif;
+    --heading-font: 'Muli', normal;
+    --branding-font: 'Baumans', cursive;
+
+    --font-size-tiny: 10px;
+    --font-size-small: 12px;
+    --font-size: 14px;
+    --font-size-large: 16px;
+    --font-size-huge: 20px;
+    --message-font-size: var(--font-size);
+
+    --line-height-small: 14px;
+    --line-height: 16px;
+    --line-height-large: 20px;
+    --line-height-huge: 27px;
+
+    --embedded-emoji-picker-height: 300px;
+
+    --chat-gutter: 0.5em;
+
+    --occupants-padding: 1em;
+
+    --minimized-chats-width: 130px;
+    --mobile-chat-width: 100%;
+    --mobile-chat-height: 400px;
+
+    --overlayed-chat-head-height: 55px;
+    --overlayed-chat-height: 450px;
+    --overlayed-chat-width: 300px;
+    --overlayed-chatbox-hover-height: 1em;
+    --overlayed-emoji-picker-height: 200px;
+    --overlayed-max-chat-textarea-height: 200px;
+
+    --list-toggle-font-weight: normal;
+}

src/shared/styles/badges.scss

@@ -2,7 +2,7 @@
     @import "bootstrap/scss/badge";
 
     .badge {
-        color: white;
+        color: var(--badge-color);
         font-size: 90%;
         font-weight: normal;
         line-height: 1;

src/shared/styles/buttons.scss

@@ -5,6 +5,9 @@
     .btn {
         font-weight: normal;
         color: var(--button-text-color);
+        &:hover {
+            color: var(--button-hover-text-color);
+        }
         &.fa {
             color: var(--button-text-color) !important;
         }

src/shared/styles/forms.scss

@@ -22,6 +22,13 @@
         }
 
         .form-control {
+            color: var(--text-color);
+            background-color: var(--background);
+            &:focus {
+                color: var(--text-color);
+                background-color: var(--comment);
+            }
+
             &::-webkit-input-placeholder { /* Chrome/Opera/Safari */
                 color: var(--subdued-color);
             }
@@ -39,6 +46,10 @@
             }
         }
 
+        .form-control--labeled {
+            margin-top: 0.5em;
+        }
+
         .clear-input {
             margin-top: 0.5em;
             margin-bottom : 0.5em;

src/shared/styles/index.scss

@@ -29,6 +29,7 @@
 @import "variables";
 @import "themes/classic";
 @import "themes/concord";
+@import "themes/dracula";
 
 @import "core";
 @import "buttons";

src/shared/styles/lists.scss

@@ -1,9 +1,13 @@
 .conversejs {
     @import "bootstrap/scss/list-group";
 
-    .list-group-item.active {
-        background-color: var(--primary-color);
-        border-color: var(--primary-color-dark);
+    .list-group-item {
+        &.active {
+            background-color: var(--primary-color);
+            border-color: var(--primary-color-dark);
+        }
+
+        background-color: var(--comment);
     }
 
     .list-container {
@@ -39,6 +43,12 @@
                 font-weight: bold;
             }
 
+            &:hover {
+                .list-item-link {
+                    color: var(--list-item-link-hover-color);
+                }
+            }
+
             .list-item-link {
                 color: var(--list-item-link-color);
                 &:hover {
@@ -90,20 +100,20 @@
             &.open {
                 background-color: var(--list-item-open-color);
                 &:hover {
-                    background-color: var(--list-item-open-hover-color) !important;
+                    background-color: var(--list-item-open-hover-color);
                 }
                 a {
                     color: white;
                 }
                 .list-item-link {
                     &:hover {
-                        color: white;
+                        color: var(--list-item-link-hover-color);
                     }
                 }
                 .list-item-action {
                     color: var(--list-item-action-color);
                     &:hover {
-                        color: white;
+                        color: var(--list-item-link-hover-color);
                     }
                 }
             }

src/shared/styles/messages.scss

@@ -8,11 +8,12 @@
             font-weight: bold;
         }
     }
+
     .message {
         .show-msg-author-modal {
             align-self: flex-start; // Don't expand height to that of largest sibling
                                     // https://stackoverflow.com/questions/27575779/prevent-a-flex-items-height-from-expanding-to-match-other-flex-items/40156422#40156422
-            color: var(--text-color) !important;
+            color: var(--message-author-color) !important;
         }
 
         blockquote {
@@ -51,7 +52,7 @@
             }
 
             .separator-text {
-                background: white;
+                background: var(--chat-background-color);
                 bottom: 1px; // Offset needed due to .separator border size
                 color: var(--separator-text-color);
                 display: inline-block;
@@ -63,7 +64,7 @@
         }
 
         &.chat-info {
-            color: var(--chat-head-color);
+            color: var(--chat-info-color);
             font-size: var(--message-font-size);
             line-height: var(--line-height-small);
             font-size: 90%;
@@ -114,7 +115,7 @@
                 -webkit-animation: colorchange-chatmessage 1s;
             }
             &:hover {
-                background-color: var(--list-item-hover-color);
+                background-color: var(--chat-msg-hover-color);
             }
             &.correcting {
                 &.groupchat  {

src/shared/styles/themes/classic.scss

@@ -1,11 +1,14 @@
 .conversejs, .conversejs-bg, #conversejs-bg, body.converse-fullscreen {
-    --subdued-color: #A8ABA1;
 
+    // Theme-defined variables:
     --green: #3AA569;
     --redder-orange: #E77051;
     --orange: #E7A151;
     --light-blue: #578EA9;
     --lighter-blue: #85B47B;
+    --background: white;
+
+    --subdued-color: #A8ABA1;
 
     --chat-status-online: var(--green);
     --chat-status-busy: var(--redder-orange);
@@ -17,17 +20,24 @@
     --completion-normal-color: var(--redder-orange);
     --completion-dark-color: #D24E2B; // $dark-red
 
+    --dark-link-color: #206485; // $dark-blue
+    --inverse-link-color: white;
+    --link-color-lighten-10-percent: #79a5ba; // lighten($light-blue, 10%)
     --link-color: var(--light-blue);
     --link-hover-color: #345566;
-    --link-color-lighten-10-percent: #79a5ba; // lighten($light-blue, 10%)
-    --dark-link-color: #206485; // $dark-blue
+
     --global-background-color: #397491; // dark blue
+    --modal-background-color: white;
+
+    --img-thumbnail-background-color: white;
+    --img-thumbnail-border-color: #DEE2E6;
 
-    --inverse-link-color: white;
     --text-shadow-color: #FAFAFA;
     --text-color: #666;
     --controlbox-text-color: #666;
     --text-color-lighten-15-percent: #8c8c8c; // lighten(#666, 15%)
+    --message-author-color: var(--text-color);
+
     --message-text-color: #555;
     --message-receipt-color: var(--green);
 
@@ -35,22 +45,12 @@
 
     --button-text-color: white;
 
-    --message-avatar-width: 36px;
-    --message-avatar-height: 36px;
-
     --chat-background-color: white;
-
     --chat-textarea-color: #666;
     --chat-textarea-background-color: white;
+    --chat-textarea-disabled-bg-color: #EEE;
     --chat-textarea-height: 60px;
 
-    --send-button-height: 27px;
-    --send-button-margin: 3px;
-
-    --inline-action-margin: 0.75em;
-
-    --roster-height: 194px;
-
     --chat-correcting-color: var(--chat-head-color-lighten-50-percent);
     --chat-head-color-dark: #1E9652;
     --chat-head-color-darker: #0E763B;
@@ -66,30 +66,22 @@
 
     --chat-info-color: var(--chatroom-head-bg-color);
 
-    --highlight-color: #DCF9F6;
+    --danger-color-dark: #A93415; // darker red
+    --danger-color: #D24E2B; // dark-red
     --highlight-color-darker: #B0E8E2;
-
-    --primary-color: var(--light-blue);
+    --highlight-color: #DCF9F6;
     --primary-color-dark:  #397491;
-
-    --secondary-color: #818479; // gray
+    --primary-color: var(--light-blue);
     --secondary-color-dark: #585B51;
-
-    --warning-color: var(--orange);
+    --secondary-color: #818479; // gray
     --warning-color-dark: #D2842B;
-
-    --danger-color: #D24E2B; // dark-red
-    --danger-color-dark: #A93415; // darker red
+    --warning-color: var(--orange);
 
     --light-background-color: #FCFDFD;
 
     --error-color: #D24E2B; // dark-red
     --info-color: #1E9652; // $dark-green
 
-    --button-border-radius: 5px;
-    --chatbox-border-radius: 4px;
-
-
     --groupchats-header-color: var(--chatroom-head-bg-color);
     --groupchats-header-color-dark: var(--chatroom-head-bg-color-dark);
 
@@ -102,21 +94,14 @@
     --controlbox-pane-bg-hover-color: #eff4f7;
     --panel-divider-color: #e7e7e7;
 
-    --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: 'Muli', normal;
-    --branding-font: 'Baumans', cursive;
     --heading-display: block;
     --heading-color: white;
 
+    --badge-color: white;
+
     --chatroom-color: var(--redder-orange);
     --chatroom-badge-color: var(--chatroom-head-bg-color);
     --chatroom-badge-hover-color: var(--chatroom-head-bg-color-dark);
@@ -130,7 +115,6 @@
     --chatroom-head-description-link-color: white;
     --chatroom-head-title-font-weight: normal;
     --chatroom-head-title-padding-right: 0px;
-    --chatroom-width: 500px;
     --muc-toolbar-btn-color: var(--redder-orange);
     --muc-toolbar-btn-disabled-color: gray;
 
@@ -140,50 +124,29 @@
     --chatbox-button-size: 14px;
     --fullpage-chatbox-button-size: 16px;
 
-    --font-size-tiny: 10px;
-    --font-size-small: 12px;
-    --font-size: 14px;
-    --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);
+    --chat-separator-border-bottom: 2px solid var(--chat-color);
     --chatroom-separator-border-bottom: 2px solid var(--chatroom-head-bg-color);
 
     --chatbox-message-input-border-top: 4px solid var(--chat-head-color);
     --chatroom-message-input-border-top: 4px solid var(--chatroom-head-bg-color);
 
-    --line-height-small: 14px;
-    --line-height: 16px;
-    --line-height-large: 20px;
-    --line-height-huge: 27px;
-
-    --occupants-padding: 1em;
     --occupants-background-color: white;
-    --occupants-border-left: 0.2143rem solid var(--panel-divider-color);
+    --occupants-border-left: 0.2rem solid var(--panel-divider-color);
     --occupants-border-bottom: 1px solid lightgrey;
 
-    --embedded-emoji-picker-height: 300px;
-
-    --avatar-border-radius: 10%;
-
     --fullpage-chat-height: calc(var(--vh, 1vh) * 100);
     --fullpage-chat-width: 100%;
     --fullpage-emoji-picker-height: 300px;
     --fullpage-max-chat-textarea-height: 15em;
 
-    --overlayed-chat-head-height: 55px;
-    --overlayed-chat-height: 450px;
-    --overlayed-chat-width: 300px;
-    --overlayed-chatbox-hover-height: 1em;
-    --overlayed-emoji-picker-height: 200px;
-    --overlayed-max-chat-textarea-height: 200px;
     --overlayed-badge-color: #818479; // $gray-color
 
-    --list-toggle-color: #818479; // $gray-color
-    --list-toggle-hover-color: #585B51; // $dark-gray-color
-    --list-toggle-font-weight: normal;
+    --close-color: var(--text-color);
+    --close-color: #585B51;
+
+    --list-toggle-color: #818479;
+    --list-toggle-hover-color: #585B51;
     --list-item-hover-color: rgba(0, 0, 0, 0.035);
     --list-item-action-color: #e3eef3; // lighten($lightest-blue, 25%)
     --list-item-link-color: inherit;
@@ -191,5 +154,6 @@
     --list-item-open-color: var(--controlbox-head-color);
     --list-item-open-hover-color: var(--controlbox-head-color);
     --list-dot-circle-color: #f6dec1; // lighten($orange, 25%)
-}
 
+    --chat-msg-hover-color: var(--list-item-hover-color);
+}

src/shared/styles/themes/concord.scss

@@ -1,6 +1,4 @@
 .conversejs.theme-concord {
-    --avatar-border-radius: 10%;
-
     --controlbox-pane-background-color: #333;
     --panel-divider-color: #333;
     --controlbox-pane-bg-hover-color: #464646;
@@ -57,4 +55,6 @@
     --list-item-link-hover-color: #DDD;
     --list-item-open-color: #444;
     --list-item-open-hover-color: #444;
+
+    --unread-msgs-color: #F1F1F1;
 }

src/shared/styles/themes/dracula.scss

@@ -0,0 +1,129 @@
+.conversejs.theme-dracula {
+    // Theme-defined variables:
+    // https://draculatheme.com
+    --background: #282a36;
+    --current-line: #44475a;
+    --foreground: #f8f8f2;
+    --comment: #6272a4;
+    --cyan: #8be9fd;
+    --green: #50fa7b;
+    --orange: #ffb86c;
+    --pink: #ff79c6;
+    --purple: #bd93f9;
+    --red: #ff5555;
+    --yellow: #f1fa8c;
+
+    --muc-color: var(--orange);
+    --chat-color: var(--green);
+    --disabled-color: var(--comment);
+
+    --highlight-color: var(--foreground);
+    --highlight-color-darker: var(--comment);
+
+    --redder-orange: var(--muc-color);
+
+    --chat-background-color: var(--background);
+    --chat-content-background-color: var(--background);
+    --chat-textarea-background-color: var(--background);
+    --chat-textarea-disabled-bg-color: var(--disabled-color);
+    --controlbox-pane-background-color: var(--background);
+    --controlbox-pane-bg-hover-color: var(--list-item-hover-color);
+
+    --chat-msg-hover-color: var(--current-line);
+    --chat-textarea-color: var(--foreground);
+
+    --close-color: var(--foreground);
+    --close-color-hover: var(--purple);
+
+    --global-background-color: var(--background);
+    --groupchats-header-color-dark: var(--muc-color);
+    --groupchats-header-color: var(--muc-color);
+    --img-thumbnail-background-color: var(--comment);
+    --img-thumbnail-border-color: black;
+    --modal-background-color: var(--background);
+    --occupants-background-color: var(--background);
+
+    --raised-el-shadow: 1px 1px 10px black;
+
+    --badge-color: var(--background);
+
+    --chatroom-head-color: var(--muc-color);
+    --chatroom-head-bg-color: var(--background);
+    --chatroom-head-border-bottom: 0.15em solid var(--muc-color);
+    --chatroom-head-description-link-color: var(--link-color);
+    --chatroom-separator-border-bottom: 0.15em solid var(--muc-color);
+    --chatroom-message-input-border-top: 0.15em solid var(--muc-color);
+    --chatroom-head-bg-color-dark: var(--muc-color);
+    --muc-toolbar-btn-disabled-color: var(--disabled-color);
+
+    --occupants-border-left: 0.15em solid var(--muc-color);
+    --occupants-border-bottom: 0.15em solid var(--muc-color);
+
+    --chat-head-color: var(--background);
+    --chat-head-color-dark: var(--chat-color);
+    --chat-head-color-darker: var(--chat-color);
+    --chat-head-color-lighten-50-percent: var(--chat-color);
+    --chat-head-border-bottom: 0.15em solid var(--chat-color);
+    --chatbox-message-input-border-top: 0.15em solid var(--chat-color);
+    --chat-toolbar-btn-color: var(--chat-color);
+
+    --toolbar-btn-text-color: var(--background);
+
+    --unread-msgs-color: var(--yellow);
+
+    --panel-divider-color: var(--comment);
+
+    --chat-status-online: var(--green);
+    --chat-status-busy: var(--red);
+    --chat-status-away: var(--orange);
+
+    --chat-info-color: var(--orange);
+
+    --brand-heading-color: var(--cyan);
+
+    --completion-light-color: var(--pink);
+    --completion-normal-color: var(--red);
+    --completion-dark-color: var(--purple);
+
+    --button-text-color: var(--background);
+    --button-hover-text-color: var(--background);
+
+    --controlbox-text-color: var(--foreground);
+    --message-text-color: var(--foreground);
+    --text-color: var(--foreground);
+    --text-color-lighten-15-percent: var(--yellow);
+
+    --message-author-color: var(--purple);
+
+    --controlbox-head-color: var(--purple);
+
+    --message-receipt-color: var(--green);
+
+    --heading-color: var(--purple);
+
+    --inverse-link-color: var(--foreground);
+    --link-color: var(--cyan);
+    --dark-link-color: var(--cyan);
+    --link-hover-color: var(--green);
+
+    --primary-color: var(--purple);
+    --primary-color-dark: var(--purple);
+    --danger-color-dark: var(--pink);
+    --danger-color: var(--pink);
+    --error-color: var(--red);
+    --info-color: var(--comment);
+    --secondary-color-dark: var(--cyan);
+    --secondary-color: var(--cyan);
+    --warning-color-dark: var(--orange);
+    --warning-color: var(--orange);
+
+    --list-toggle-color: #818479; // $gray-color
+    --list-toggle-hover-color: #585B51; // $dark-gray-color
+    --list-item-hover-color: var(--current-line);
+    --list-item-action-color: #e3eef3; // lighten($lightest-blue, 25%)
+    --list-item-link-color: var(--foreground);
+    --list-item-link-hover-color: var(--link-color);
+    --list-item-open-color: var(--current-line);
+    --list-item-open-hover-color: var(--controlbox-head-color);
+    --list-dot-circle-color: #f6dec1; // lighten($orange, 25%)
+}

webpack.html

@@ -21,7 +21,7 @@
         });
         converse.initialize({
             muc_subscribe_to_rai: true,
-            theme: 'concord',
+            theme: 'dracula',
             show_send_button: true,
             auto_away: 300,
             message_limit: 300,
@@ -38,7 +38,7 @@
             muc_domain: 'conference.chat.example.org',
             muc_respect_autojoin: true,
             view_mode: 'fullscreen',
-            // websocket_url: 'ws://chat.example.org:5380/xmpp-websocket',
+            websocket_url: 'ws://chat.example.org:5380/xmpp-websocket',
             // bosh_service_url: 'http://chat.example.org:5280/http-bind',
             allow_user_defined_connection_url: true,
             muc_show_logs_before_join: true,