Simplify the theme files, to make theming easier.

- Try to whittle down the color variables to the bare minimum.
- Remove unnecessary CSS variables.
- Thicker border around chat bottom panel

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

@@ -1,9 +1,9 @@
 .conversejs {
     #controlbox {
         .bookmarks-toggle, .bookmarks-toggle .fa {
-            color: var(--groupchats-header-color) !important;
+            color: var(--muc-color) !important;
             &:hover {
-                color: var(--chatroom-head-bg-color-dark) !important;
+                color: var(--muc-color-hover) !important;
             }
         }
     }

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

@@ -12,12 +12,13 @@
             }
 
             .chat-message-form {
-                -moz-background-clip: padding;
-                -webkit-background-clip: padding-box;
+                border-bottom: 0;
+                border-left: 0;
+                border-top: 0.25em solid var(--chat-color);
+                border-right: 0.25em solid var(--chat-color);
                 border-bottom-radius: var(--chatbox-border-radius);
                 background-clip: padding-box;
-                background-color: var(--chat-textarea-background-color);
-                border: 0;
+                background-color: var(--background-color);
                 margin: 0;
                 padding: 0;
                 @media screen and (max-height: $mobile-landscape-height) {
@@ -35,12 +36,12 @@
 
                 .spoiler-hint {
                     width: 100%;
-                    color: var(--foreground);
-                    background-color: var(--background);
+                    color: var(--foreground-color);
+                    background-color: var(--background-color);
                 }
 
                 .chat-textarea, input {
-                    outline: 1px solid var(--chat-head-color);
+                    outline: 1px solid var(--background-color);
                     &:active, &:focus{
                         outline-width: 2px;
                     }
@@ -50,8 +51,8 @@
                 }
 
                 .chat-textarea {
-                    color: var(--chat-textarea-color);
-                    background-color: var(--chat-textarea-background-color);
+                    color: var(--foreground-color);
+                    background-color: var(--background-color);
                     border-top-left-radius: 0;
                     border-top-right-radius: 0;
                     border-bottom-radius: var(--chatbox-border-radius);

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

@@ -10,8 +10,8 @@
             position: relative;
 
             &.chat-head-chatbox {
-                background-color: var(--chat-head-color);
-                border-bottom: var(--chat-head-border-bottom);
+                background-color: var(--chat-header-bg-color);
+                border-bottom: 0.15em solid var(--chat-header-bg-color);
             }
 
             .avatar {
@@ -19,11 +19,11 @@
             }
 
             .show-msg-author-modal {
-                color: var(--chat-head-text-color) !important;
+                color: var(--chat-header-fg-color) !important;
             }
 
             .chat-head__desc {
-                color: var(--chat-head-color);
+                color: var(--chat-header-bg-color);
                 font-size: var(--font-size-small);
                 margin: 0;
                 overflow: hidden;
@@ -52,7 +52,7 @@
             }
 
             .chatbox-title__text {
-                color: var(--chat-head-text-color);;
+                color: var(--chat-header-bg-color);;
                 overflow: hidden;
                 text-overflow: ellipsis;
             }
@@ -80,11 +80,10 @@
                 }
             }
 
-
             .chatbox-btn {
                 converse-icon {
                     svg {
-                        fill: var(--chat-head-fg-color);
+                        fill: var(--chat-header-fg-color);
                     }
                 }
             }

src/plugins/chatview/styles/chatbox.scss

@@ -80,7 +80,7 @@
         }
 
         .chat-title {
-            display: var(--heading-display);
+            display: block;
             font-family: var(--heading-font);
             color: var(--heading-color);
             display: block;
@@ -89,10 +89,10 @@
             text-overflow: ellipsis;
             white-space: nowrap;
             &.groupchat {
-                padding-right: var(--chatroom-head-title-padding-right);
+                padding-right: 0;
             }
             a {
-                color: var(--chat-head-text-color);
+                color: var(--chat-color);
                 width: 100%;
             }
         }
@@ -128,8 +128,8 @@
             position: relative;
             width: 100%;
             cursor: pointer;
-            background-color: var(--chat-head-color);
-            color: var(--light-background-color);
+            background-color: var(--background-color);
+            color: var(--background-color);
             padding: 0.5em;
             font-size: 0.9em;
             text-align: center;
@@ -138,7 +138,7 @@
             margin-bottom: 0.25em;
         }
         .chat-content {
-            background-color: var(--chat-content-background-color);
+            background-color: var(--background-color);
             border: 0;
             color: var(--text-color);
             font-size: var(--message-font-size);
@@ -153,7 +153,7 @@
             .chat-content__help {
                 max-height: 100%;
                 converse-chat-help {
-                    border-top: 1px solid var(--chat-head-color);
+                    border-top: 1px solid var(--background-color);
                     display: block;
                     height: 100%;
                     overflow-y: auto;
@@ -163,9 +163,9 @@
                     float: right;
                     padding-right: 1em;
                     cursor: pointer;
-                    color: var(--chat-content-background-color);
+                    color: var(--background-color);
                     svg {
-                        fill: var(--chat-head-color);
+                        fill: var(--background-color);
                     }
                 }
             }
@@ -179,8 +179,8 @@
             .chat-content__notifications {
                 display: block;
                 white-space: pre;
-                background-color: var(--chat-content-background-color);
-                color: var(--subdued-color);
+                background-color: var(--background-color);
+                color: var(--secondary-color);
                 font-size: 90%;
                 font-style: italic;
                 line-height: var(--line-height-small);

src/plugins/chatview/styles/index.scss

@@ -171,7 +171,7 @@
             .chat-body {
                 height: inherit;
                 overflow: hidden;
-                background-color: var(--chat-background-color);
+                background-color: var(--background-color);
             }
             .chat-title {
                 font-size: var(--font-size-huge);
@@ -220,7 +220,7 @@
                     display: flex;
                     .fa-arrow-left {
                         svg {
-                            fill: var(--chat-head-text-color);
+                            fill: var(--chat-color);
                         }
                     }
                 }

src/plugins/controlbox/styles/_controlbox.scss

@@ -29,11 +29,11 @@
 
     #controlbox {
         order: -1;
-        color: var(--controlbox-text-color);
+        color: var(--foreground-color);
 
         .chat-status--avatar {
-            border: 1px solid var(--controlbox-pane-background-color);
-            background: var(--controlbox-pane-background-color);
+            border: 1px solid var(--background-color);
+            background: var(--background-color);
         }
 
         converse-brand-logo {
@@ -60,7 +60,7 @@
         }
 
         .box-flyout {
-            background-color: var(--controlbox-pane-background-color);
+            background-color: var(--background-color);
         }
 
         &.logged-out {
@@ -90,7 +90,7 @@
         }
 
         .conn-feedback {
-            color: var(--controlbox-head-color);
+            color: var(--controlbox-color);
             &.error {
                 color: var(--error-color);
             }
@@ -120,7 +120,7 @@
             .controlbox-heading {
                 font-family: var(--heading-font);
                 color: var(--controlbox-heading-color);
-                font-weight: var(--controlbox-heading-font-weight);
+                font-weight: bold;
                 padding: 0;
                 font-size: 1.1em;
                 line-height: 1.1em;
@@ -128,11 +128,11 @@
             }
 
             .controlbox-heading--groupchats {
-                color: var(--groupchats-header-color);
+                color: var(--muc-color);
             }
 
             .controlbox-heading--contacts {
-                color: var(--chat-head-color-dark);
+                color: var(--background-color);
             }
 
             .controlbox-heading--headline {
@@ -190,7 +190,7 @@
             .toggle-controlbox {
                 order: -2;
                 text-align: center;
-                background-color: var(--controlbox-head-color);
+                background-color: var(--controlbox-color);
                 float: right;
                 margin: 0 var(--overlayed-chat-gutter);
             }
@@ -221,7 +221,7 @@
         &.converse-fullscreen {
             #controlbox {
                 .flyout {
-                    border-right: 0.2rem solid var(--panel-divider-color);
+                    border-right: 0.2rem solid var(--controlbox-color);
                 }
             }
             .toggle-controlbox {

src/plugins/controlbox/styles/buttons.scss

@@ -10,10 +10,12 @@
                 cursor: pointer;
                 padding: 0 0 0 1em;
                 font-size: 1em;
-                margin: var(--controlbox-heading-top-margin) 0 var(--inline-action-margin) 0;
+                margin: 0.75em 0 var(--inline-action-margin) 0;
                 text-align: center;
-                &.fa-vcard {
-                    margin-top: 1em;
+                converse-icon {
+                    svg {
+                        fill: var(--controlbox-color);
+                    }
                 }
             }
         }

src/plugins/headlines-view/styles/headlines-head.scss

@@ -8,13 +8,13 @@
                     }
 
                     &.chat-head-chatbox {
-                        background-color: var(--headlines-head-bg-color);
-                        border-bottom: var(--headlines-head-border-bottom);
+                        background-color: var(--background-color);
+                        border-bottom: 0.15em solid var(--headlines-color);
                     }
-                    background-color: var(--headlines-head-bg-color);
+                    background-color: var(--background-color);
 
                     .chatbox-title__text {
-                        color: var(--headlines-head-text-color) !important;
+                        color: var(--headlines-color) !important;
                     }
 
                     converse-dropdown {
@@ -30,7 +30,7 @@
                     .chatbox-btn {
                         converse-icon {
                             svg {
-                                fill: var(--headlines-head-fg-color);
+                                fill: var(--headlines-color);
                             }
                         }
                     }
@@ -42,7 +42,7 @@
                     .chatbox.headlines {
                         .chat-head {
                             &.chat-head-chatbox {
-                                background-color: var(--headlines-head-bg-color);
+                                background-color: var(--background-color);
                             }
                         }
                     }

src/plugins/headlines-view/styles/headlines.scss

@@ -2,19 +2,18 @@
     .chatbox {
         &.headlines {
             .chat-body {
-                background-color: var(--background);
+                background-color: var(--background-color);
                 .chat-message {
-                    color: var(--headline-message-color);
+                    color: var(--headlines-color);
                 }
                 hr {
-                    border-bottom: var(--headline-separator-border-bottom);
+                    border-bottom: 2px solid var(--headlines-color);
                 }
             }
             .chat-content {
                 height: 100%;
             }
         }
-
     }
 
     .message {
@@ -30,7 +29,7 @@
     #controlbox {
         .controlbox-section {
             .controlbox-heading--headline {
-                color: var(--headlines-head-text-color);
+                color: var(--headlines-color);
             }
         }
     }
@@ -40,10 +39,10 @@
         &.converse-fullscreen {
             .chatbox.headlines {
                 .box-flyout {
-                    background-color: var(--headlines-head-text-color);
+                    background-color: var(--headlines-color);
                 }
                 .flyout {
-                    border-color: var(--headlines-head-text-color);
+                    border-color: var(--headlines-color);
                 }
             }
         }

src/plugins/mam-views/styles/placeholder.scss

@@ -22,7 +22,7 @@ converse-mam-placeholder {
         &:after {
             height: 1em;
             top: 0.75em;
-            background: linear-gradient(-135deg, var(--chat-background-color) 0.5em, transparent 0) 0 0.5em, linear-gradient( 135deg, var(--chat-background-color) 0.5em, transparent 0) 0 0.5em;
+            background: linear-gradient(-135deg, var(--background-color) 0.5em, transparent 0) 0 0.5em, linear-gradient( 135deg, var(--background-color) 0.5em, transparent 0) 0 0.5em;
             background-position: top left;
             background-repeat: repeat-x;
             background-size: 1em 1em;

src/plugins/minimize/styles/minimize.scss

@@ -7,12 +7,12 @@
 
             #minimized-chats {
                 min-width: var(--minimized-chats-width);
-                color: var(--chat-head-text-color);
+                color: var(--chat-color);
 
                 a.restore-chat {
                     cursor: pointer;
                     padding: 1px 0 1px 5px;
-                    color: var(--chat-head-text-color);
+                    color: var(--chat-color);
                     line-height: 15px;
                     display: block;
                     overflow: hidden;
@@ -24,7 +24,7 @@
                 }
 
                 a.restore-chat:visited {
-                    color: var(--chat-head-text-color);
+                    color: var(--chat-color);
                 }
 
                 .minimized-chats-flyout {
@@ -41,18 +41,18 @@
                         margin-bottom: 0.2em;
                         width: 100%;
                         flex-wrap: nowrap;
-                        background-color: var(--chat-head-color);
+                        background-color: var(--background-color);
                     }
                     .chat-head-chatroom {
-                        background-color: var(--chatroom-head-bg-color);
+                        background-color: var(--background-color);
                         a.restore-chat {
-                            color: var(--chatroom-head-color);
+                            color: var(--muc-color);
                         }
                     }
                     .chat-head-headline {
-                        background-color: var(--headlines-head-bg-color);
+                        background-color: var(--background-color);
                         a.restore-chat {
-                            color: var(--headlines-head-text-color);
+                            color: var(--headlines-color);
                         }
                     }
 

src/plugins/minimize/templates/trimmed_chat.js

@@ -9,11 +9,11 @@ export default (el) => {
     const i18n_tooltip = __('Click to restore this chat');
     let close_color;
     if (el.type === 'chatroom') {
-        close_color = "var(--chatroom-head-color)";
+        close_color = "var(--muc-color)";
     } else if (el.type === 'headline') {
-        close_color = "var(--headlines-head-text-color)";
+        close_color = "var(--headlines-color)";
     } else {
-        close_color = "var(--chat-head-text-color)";
+        close_color = "var(--chat-color)";
     }
 
     return html`

src/plugins/modal/styles/_modal.scss

@@ -7,17 +7,17 @@ $prefix: 'converse-';
     .modal-header {
         &.alert-danger {
             background-color: var(--error-color);
-            color: var(--background);
+            color: var(--background-color);
             border-bottom: none;
 
             .close {
-                color: var(--background);
+                color: var(--background-color);
             }
         }
     }
 
     .modal-content {
-        background-color: var(--modal-background-color);
+        background-color: var(--background-color);
     }
 
     .modal-body {
@@ -39,15 +39,15 @@ $prefix: 'converse-';
                 margin: 0.25em;
                 .nav-link {
                     &.active {
-                        color: var(--background);
+                        color: var(--background-color);
                     }
                 }
                 &:hover {
                     .nav-link {
                         color: var(--focus-color);
-                        background-color: var(--background);
+                        background-color: var(--background-color);
                         &.active {
-                            color: var(--background);
+                            color: var(--background-color);
                             background-color: var(--primary-color);
                         }
                     }

src/plugins/muc-views/modals/templates/occupant.js

@@ -59,7 +59,7 @@ export default (el) => {
                                 <a href="#"
                                 data-form="affiliation-form"
                                 class="toggle-form right"
-                                color="var(--subdued-color)"
+                                color="var(--secondary-color)"
                                 @click=${(ev) => el.toggleForm(ev)}><converse-icon class="fa fa-wrench" size="1em"></converse-icon>
                                 </a>
                                 ${ el.show_affiliation_form ? html`<converse-muc-affiliation-form jid=${jid} .muc=${muc} affiliation=${affiliation}></converse-muc-affiliation-form>` : '' }` : ''
@@ -73,7 +73,7 @@ export default (el) => {
                                 <a href="#"
                                    data-form="row-form"
                                    class="toggle-form right"
-                                   color="var(--subdued-color)"
+                                   color="var(--secondary-color)"
                                    @click=${(ev) => el.toggleForm(ev)}><converse-icon class="fa fa-wrench" size="1em"></converse-icon>
                                 </a>
                                 ${ el.show_role_form ? html`<converse-muc-role-form jid=${jid} .muc=${muc} role=${role}></converse-muc-role-form>` : '' }` : ''

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

@@ -15,9 +15,9 @@
         }
 
         .open-rooms-toggle, .open-rooms-toggle converse-icon {
-            color: var(--groupchats-header-color) !important;
+            color: var(--muc-color) !important;
             &:hover {
-                color: var(--chatroom-head-bg-color-dark) !important;
+                color: var(--muc-color-hover) !important;
             }
         }
 

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

@@ -16,7 +16,7 @@ converse-muc-destroyed {
 .conversejs.converse-embedded,
 .conversejs {
     .badge--muc {
-        background-color: var(--groupchats-header-color);
+        background-color: var(--muc-color);
     }
 
     .add-chatroom {

src/plugins/muc-views/styles/muc-bottom-panel.scss

@@ -7,7 +7,7 @@
             padding: 0.5em;
             text-align: center;
             font-size: var(--font-size-small);
-            background-color: var(--chatroom-head-bg-color);
+            background-color: var(--background-color);
             color: white;
 
             &.muc-bottom-panel--muted {
@@ -34,11 +34,14 @@
 
         converse-muc-bottom-panel {
             .chat-message-form {
+                border-top: 0.25em solid var(--muc-color) !important;
+                border-right: 0 !important;
+
                 .suggestion-box__results--above {
                     bottom: 4.5em;
                 }
                 .chat-textarea, input {
-                    outline: 1px solid var(--chatroom-head-bg-color) !important;
+                    outline: 1px solid var(--background-color) !important;
                     &:active, &:focus{
                         outline-width: 2px !important;
                     }

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

@@ -2,7 +2,7 @@
     .chatroom {
         .box-flyout {
             .muc-form-container {
-                background-color: var(--background);
+                background-color: var(--background-color);
                 border: 0;
                 color: var(--text-color);
                 font-size: var(--font-size);
@@ -19,7 +19,7 @@
                     margin: 0 0.5em;
                 }
                 .button-primary {
-                    background-color: var(--chatroom-head-fg-color);
+                    background-color: var(--muc-color);
                 }
             }
 

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

@@ -1,24 +1,23 @@
 .conversejs {
     converse-muc.chatroom {
         .chat-head-chatroom {
+            color: var(--muc-header-fg-color);
+            background-color: var(--muc-header-bg-color);
+            border-bottom: 0.15em solid var(--muc-color);
 
             converse-controlbox-navback {
                 .fa-arrow-left {
                     svg {
-                        fill: var(--chatroom-head-color);
+                        fill: var(--muc-header-fg-color);
                     }
                 }
             }
 
-            color: var(--chatroom-head-color);
-            background-color: var(--chatroom-head-bg-color);
-            border-bottom: var(--chatroom-head-border-bottom);
-
             .chat-head__desc {
-                color: var(--chatroom-head-color);
-                display: var(--chatroom-head-description-display);
+                color: var(--muc-header-fg-color);
+                display: block;
                 a {
-                    color: var(--chatroom-head-description-link-color);
+                    color: var(--link-color);
                 }
                 &:hover {
                     button {
@@ -30,7 +29,7 @@
             .chatbox-title {
                 .btn--transparent {
                     i {
-                        color: var(--chatroom-head-color);
+                        color: var(--muc-header-fg-color);
                     }
                 }
                 .chatbox-title__text--bookmarked {
@@ -41,9 +40,9 @@
             a, a:visited, a:hover, a:not([href]):not([tabindex]) {
                 &.chatbox-btn {
                     &.fa {
-                        color: var(--chatroom-head-color);
+                        color: var(--muc-header-fg-color);
                         &.button-on:before {
-                            color: var(--chatroom-head-fg-color);
+                            color: var(--muc-header-fg-color);
                         }
                     }
                 }
@@ -53,7 +52,7 @@
                 .dropdown-menu {
                     converse-icon {
                         svg {
-                            fill: var(--chatroom-color);
+                            fill: var(--muc-header-fg-color);
                         }
                     }
                 }
@@ -62,16 +61,16 @@
             .chatbox-btn {
                 converse-icon {
                     svg {
-                        fill: var(--chatroom-head-fg-color);
+                        fill: var(--muc-header-fg-color);
                     }
                 }
             }
             .chatbox-title__text {
-                color: var(--chatroom-head-color);
-                display: var(--heading-display);
-                font-weight: var(--chatroom-head-title-font-weight);
+                color: var(--muc-header-fg-color);
+                display: block;
+                font-weight: normal;
                 margin: auto 0;
-                padding-right: var(--chatroom-head-title-padding-right);
+                padding-right: 0;
                 white-space: nowrap;
                 .chatroom-jid {
                     font-size: var(--font-size-small);

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

@@ -3,13 +3,13 @@
 
         converse-icon {
             svg {
-                fill: var(--chatroom-head-fg-color);
+                fill: var(--muc-color);
             }
         }
 
         .chat-status--avatar {
-            background: var(--occupants-background-color);
-            border: 2px solid var(--occupants-background-color);
+            background: var(--background-color);
+            border: 2px solid var(--background-color);
             font-size: 0.6rem;
             margin-top: 0;
             margin-left: -0.3em;
@@ -22,20 +22,11 @@
         }
 
         .badge-groupchat {
-            background-color: var(--groupchats-header-color);
+            background-color: var(--muc-color);
         }
 
         .box-flyout {
 
-            converse-muc-sidebar {
-                display: flex;
-                height: 100%;
-                flex-direction: row;
-                overflow: visible;
-                background-color: var(--occupants-background-color);
-                border-left: var(--occupants-border-left);
-            }
-
             .occupants {
                 display: flex;
                 height: 100%;
@@ -74,7 +65,7 @@
                         }
                     }
                 }
-                ul {
+                .items-list {
                     padding: 0;
                     margin-bottom: 0.5em;
                     overflow-x: hidden;
@@ -87,11 +78,10 @@
                         flex-basis: 0;
                         flex-grow: 1;
                     }
-                    li {
+                    .list-item {
+                        height: auto;
                         cursor: default;
-                        display: block;
                         font-size: var(--font-size-small);
-                        overflow: hidden;
                         padding: 0.25em 0.25em 0.25em 0;
                         text-overflow: ellipsis;
                         .fa {
@@ -102,11 +92,6 @@
                         }
                         &.occupant {
                             cursor: pointer;
-                            color: var(--link-color);
-                            &:hover {
-                                color: var(--link-hover-color);
-                            }
-
                             .msgs-indicator {
                                 margin-left: -3em;
                                 margin-right: 0.5em;

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

@@ -1,9 +1,16 @@
 .conversejs {
     converse-muc-sidebar {
+        display: flex;
+        height: 100%;
+        flex-direction: row;
+        overflow: visible;
+        background-color: var(--background-color);
+        border-left: 0.25em solid var(--muc-color);
+
         .sidebar-heading {
             width: 100%;
             font-family: var(--heading-font);
-            color: var(--groupchats-header-color-dark);
+            color: var(--muc-color);
             padding-left: 0;
         }
     }

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

@@ -15,7 +15,7 @@
         }
 
         .box-flyout {
-            background-color: var(--chatroom-head-bg-color);
+            background-color: var(--background-color);
             overflow-y: hidden;
             width: var(--chatroom-width);
 
@@ -43,7 +43,7 @@
             .chatroom-body {
                 flex-direction: row;
                 flex-flow: nowrap;
-                background-color: var(--background);
+                background-color: var(--background-color);
                 border-top: 0;
                 height: 100%;
                 width: 100%;
@@ -61,16 +61,16 @@
                 }
                 .chat-topic {
                     font-weight: bold;
-                    color: var(--chatroom-head-bg-color);
+                    color: var(--background-color);
                 }
                 .chat-info {
-                    color: var(--chat-info-color);
+                    color: var(--info-color);
                     line-height: normal;
                     &.badge {
-                        color: var(--chat-head-text-color);
+                        color: var(--muc-color);
                     }
                     &.chat-msg--retracted {
-                        color: var(--subdued-color);
+                        color: var(--secondary-color);
                     }
                 }
                 .chat-area {
@@ -80,18 +80,18 @@
                     justify-content: flex-end;
                     word-wrap: break-word;
                     .new-msgs-indicator {
-                        background-color: var(--chatroom-color);
+                        background-color: var(--muc-color);
                     }
                     .chat-content {
                         height: 100%;
                     }
                     .chat-content__help {
                         converse-chat-help {
-                            border-top: 1px solid var(--chatroom-color);
+                            border-top: 1px solid var(--muc-color);
                         }
                         .close-chat-help {
                             svg {
-                                fill: var(--chatroom-color);
+                                fill: var(--muc-color);
                             }
                         }
                     }

src/plugins/muc-views/templates/moderator-tools.js

@@ -39,7 +39,7 @@ const affiliation_option = (o) => html`
 
 
 const tplRoleFormToggle = (o) => html`
-    <a href="#" data-form="converse-muc-role-form" class="toggle-form right" color="var(--subdued-color)" @click=${o.toggleForm}>
+    <a href="#" data-form="converse-muc-role-form" class="toggle-form right" color="var(--secondary-color)" @click=${o.toggleForm}>
         <converse-icon class="fa fa-wrench" size="1em"></converse-icon>
     </a>`;
 
@@ -65,7 +65,7 @@ const tplRoleListItem = (el, o) => html`
 
 
 const affiliation_form_toggle = (o) => html`
-    <a href="#" data-form="converse-muc-affiliation-form" class="toggle-form right" color="var(--subdued-color)" @click=${o.toggleForm}>
+    <a href="#" data-form="converse-muc-affiliation-form" class="toggle-form right" color="var(--secondary-color)" @click=${o.toggleForm}>
         <converse-icon class="fa fa-wrench" size="1em"></converse-icon>
     </a>`;
 

src/plugins/muc-views/templates/muc-head.js

@@ -41,7 +41,7 @@ export default (el) => {
                         html`<converse-icon
                                 class="fa fa-bookmark chatbox-title__text--bookmarked"
                                 size="1em"
-                                color="var(--chatroom-head-color)"
+                                color="var(--muc-color)"
                                 title="${i18n_bookmarked}">
                             </converse-icon>` : '' }
                 </div>

src/plugins/muc-views/templates/muc-occupants.js

@@ -28,14 +28,6 @@ function isOccupantFiltered (el, occ) {
     }
 }
 
-/**
- * @param {import('../occupants').default} el
- * @param {MUCOccupant} occ
- */
-function shouldShowOccupant (el, occ) {
-    return isOccupantFiltered(el, occ) ? '' : tplOccupant(el, occ);
-}
-
 /**
  * @param {import('../occupants').default} el
  */
@@ -104,7 +96,7 @@ export default (el) => {
                                 .items=${btns}></converse-dropdown>`}
                 </div>
             </div>
-            <ul class="occupant-list">
+            <ul class="items-list occupant-list">
                 ${is_filter_visible
                     ? html` <converse-list-filter
                         @update=${() => el.requestUpdate()}
@@ -117,7 +109,7 @@ export default (el) => {
                 ${repeat(
                     el.model.occupants.models,
                     (occ) => occ.get('jid'),
-                    (occ) => shouldShowOccupant(el, occ)
+                    (occ) => isOccupantFiltered(el, occ) ? '' : tplOccupant(el, occ)
                 )}
             </ul>
         </div>

src/plugins/muc-views/templates/occupant.js

@@ -124,7 +124,7 @@ async function tplActionButtons (o) {
         <button class="dropdown-item ${b.button_class}" @click=${b.handler} type="button">
             <converse-icon
                 class="${b.icon_class}"
-                color="var(--inverse-link-color)"
+                color="var(--foreground-color)"
                 size="1em"
                 aria-hidden="true"
             ></converse-icon>&nbsp;${b.i18n_text}
@@ -155,13 +155,12 @@ export default (el, o) => {
     } else if (show === 'away') {
         [classes, color] =  ['fa fa-circle', 'chat-status-away'];
     } else {
-        [classes, color] = ['fa fa-circle', 'subdued-color'];
+        [classes, color] = ['fa fa-circle', 'chat-status-offline'];
     }
 
-   const num_unread = getUnreadMsgsDisplay(o);
-
+    const num_unread = getUnreadMsgsDisplay(o);
     return html`
-        <li class="occupant" id="${o.id}">
+        <li class="list-item occupant" id="${o.id}">
             <div class="row g-0">
                 <div class="col-auto">
                     <a @click=${(ev) => el.model.save({'sidebar_view': `occupant:${o.id}`})}>

src/plugins/omemo/utils.js

@@ -795,12 +795,12 @@ export function getOMEMOToolbarButton (toolbar_el, buttons) {
     let color;
     if (model.get('omemo_supported')) {
         if (model.get('omemo_active')) {
-            color = is_muc ? `var(--muc-color)` : `var(--chat-toolbar-btn-color)`;
+            color = is_muc ? `var(--muc-color)` : `var(--chat-color)`;
         } else {
             color = `var(--error-color)`;
         }
     } else {
-        color = `var(--muc-toolbar-btn-disabled-color)`;
+        color = `var(--disabled-color)`;
     }
     buttons.push(html`
         <button type="button"

src/plugins/profile/modals/styles/chat-status-modal.scss

@@ -11,7 +11,7 @@
         }
         .far.fa-circle,
         .fa-times-circle {
-            color: var(--subdued-color);
+            color: var(--secondary-color);
         }
         .chat-status {
             padding-right: 0.5em;

src/plugins/profile/styles/profile.scss

@@ -30,7 +30,7 @@ converse-user-profile {
         }
         .far.fa-circle,
         .fa-times-circle {
-            color: var(--subdued-color);
+            color: var(--secondary-color);
         }
     }
 }

src/plugins/profile/templates/profile.js

@@ -19,7 +19,7 @@ export default (el) => {
     } else if (chat_status === 'away') {
         [classes, color] =  ['fa fa-circle chat-status', 'chat-status-away'];
     } else {
-        [classes, color] = ['fa fa-circle chat-status', 'subdued-color'];
+        [classes, color] = ['fa fa-circle chat-status', 'comment'];
     }
     return html`
         <div class="userinfo">

src/plugins/register/styles/register.scss

@@ -13,7 +13,7 @@ converse-register-panel {
         @include fade-in;
 
         padding-top: 0;
-        background-color: var(--controlbox-pane-background-color);
+        background-color: var(--background-color);
 
         .title {
             font-weight: bold;
@@ -25,7 +25,7 @@ converse-register-panel {
             }
             .input-group-text {
                 color: var(--text-color);
-                background-color: var(--controlbox-pane-background-color);
+                background-color: var(--background-color);
             }
         }
 
@@ -43,7 +43,7 @@ converse-register-panel {
             color: gray;
             font-size: 85%;
             &:hover {
-                color: var(--controlbox-text-color);
+                color: var(--foreground-color);
             }
         }
     }

src/plugins/roomslist/styles/roomsgroups.scss

@@ -6,9 +6,9 @@
         }
 
         .muc-domain-group-toggle, .muc-domain-group-toggle .fa {
-            color: var(--groupchats-header-color);
+            color: var(--muc-color);
             &:hover {
-                color: var(--chatroom-head-bg-color-dark);
+                color: var(--muc-color-hover);
             }
         }
 
@@ -17,7 +17,7 @@
             margin-bottom: 0.5em;
 
             svg {
-                fill: var(--chatroom-head-fg-color);
+                fill: var(--muc-color);
             }
 
             .list-item {

src/plugins/roomslist/templates/roomslist.js

@@ -34,7 +34,7 @@ function tplBookmark (room) {
 
             <converse-icon class="fa ${bm ? 'fa-bookmark' : 'fa-bookmark-empty'}"
                            size="1.2em"
-                           color="${ isCurrentlyOpen(room) ? 'var(--inverse-link-color)' : '' }"></converse-icon>
+                           color="${ isCurrentlyOpen(room) ? 'var(--foreground-color)' : '' }"></converse-icon>
         </a>`;
 }
 
@@ -86,7 +86,7 @@ function tplRoomItem (el, room) {
                 <converse-icon
                     class="fa fa-sign-out-alt"
                     size="1.2em"
-                    color="${ isCurrentlyOpen(room) ? 'var(--inverse-link-color)' : '' }"></converse-icon>
+                    color="${ isCurrentlyOpen(room) ? 'var(--foreground-color)' : '' }"></converse-icon>
             </a>
         </li>`;
 }
@@ -110,7 +110,7 @@ function tplRoomDomainGroup (el, domain, rooms) {
             <converse-icon
                 class="fa ${ is_collapsed ? 'fa-caret-right' : 'fa-caret-down' }"
                 size="1em"
-                color="var(--groupchats-header-color)"></converse-icon>
+                color="var(--muc-color)"></converse-icon>
             ${domain}
         </a>
         <ul class="items-list muc-domain-group-rooms ${ is_collapsed ? 'collapsed' : '' }" data-domain="${domain}">

src/plugins/rootview/styles/background.scss

@@ -27,7 +27,7 @@ converse-bg {
         animation-timing-function: ease;
     }
     .converse-brand__text {
-        color: var(--foreground);
+        color: var(--foreground-color);
         font-family: var(--branding-font);
         font-weight: normal;
         text-align: center;

src/plugins/rosterview/styles/roster.scss

@@ -70,9 +70,9 @@
             }
 
             .group-toggle, .group-toggle .fa {
-                color: var(--chat-head-color-dark) !important;
+                color: var(--chat-color) !important;
                 &:hover {
-                    color: var(--chat-head-color-darker) !important;
+                    color: var(--chat-color-hover) !important;
                 }
             }
 
@@ -90,19 +90,11 @@
                     }
                 }
 
-                &:hover {
-                    .open-chat {
-                        converse-icon.chat-status {
-                            border: 2px solid var(--controlbox-pane-bg-hover-color);
-                        }
-                    }
-                }
-
                 .open-chat {
                     margin: 0;
                     padding: 0;
                     converse-icon.chat-status {
-                        border: 2px solid var(--controlbox-pane-background-color);
+                        border: 2px solid var(--background-color);
                         svg {
                             display: flex;
                         }
@@ -110,7 +102,7 @@
 
                     &.unread-msgs {
                         font-weight: bold;
-                        color: var(--unread-msgs-color);
+                        color: var(--info-color);
                         .contact-name {
                             width: 70%;
                         }
@@ -145,7 +137,7 @@
                     margin-left: 5px;
                 }
                 &:hover {
-                    background-color: var(--controlbox-pane-bg-hover-color);
+                    background-color: var(--highlight-color-hover);
                 }
             }
         }

src/plugins/rosterview/templates/group.js

@@ -53,7 +53,7 @@ export default  (o) => {
     return html`
         <div class="roster-group" data-group="${o.name}">
             <a href="#" class="list-toggle group-toggle controlbox-padded" title="${i18n_title}" @click=${ev => toggleGroup(ev, o.name)}>
-                <converse-icon color="var(--chat-head-color-dark)" size="1em" class="fa ${ (collapsed.includes(o.name)) ? 'fa-caret-right' : 'fa-caret-down' }"></converse-icon> ${o.name}
+                <converse-icon color="var(--background-color)" size="1em" class="fa ${ (collapsed.includes(o.name)) ? 'fa-caret-right' : 'fa-caret-down' }"></converse-icon> ${o.name}
             </a>
             <ul class="items-list roster-group-contacts ${ (collapsed.includes(o.name)) ? 'collapsed' : '' }" data-group="${o.name}">
                 ${ repeat(o.contacts, (c) => c.get('jid'), renderContact) }

src/plugins/rosterview/templates/roster_item.js

@@ -33,7 +33,7 @@ export default  (el) => {
     } else if (show === 'away') {
         [classes, color] =  ['fa fa-circle', 'chat-status-away'];
     } else {
-        [classes, color] = ['fa fa-circle', 'subdued-color'];
+        [classes, color] = ['fa fa-circle', 'comment'];
     }
    const desc_status = STATUSES[show];
    const num_unread = getUnreadMsgsDisplay(el.model);

src/plugins/rosterview/tests/roster.js

@@ -868,7 +868,7 @@ describe("The Contacts Roster", function () {
             await mock.waitForRoster(_converse, 'current', 1);
             await mock.openControlBox(_converse);
             const icon_el = document.querySelector('converse-roster-contact converse-icon');
-            expect(icon_el.getAttribute('color')).toBe('var(--subdued-color)');
+            expect(icon_el.getAttribute('color')).toBe('var(--secondary-color)');
 
             let pres = $pres({from: 'mercutio@montague.lit/resource'});
             _converse.api.connection.get()._dataRecv(mock.createRequest(pres));
@@ -880,7 +880,7 @@ describe("The Contacts Roster", function () {
 
             pres = $pres({from: 'mercutio@montague.lit/resource'}).c('show', 'xa');
             _converse.api.connection.get()._dataRecv(mock.createRequest(pres));
-            await u.waitUntil(() => icon_el.getAttribute('color') === 'var(--subdued-color)');
+            await u.waitUntil(() => icon_el.getAttribute('color') === 'var(--secondary-color)');
 
             pres = $pres({from: 'mercutio@montague.lit/resource'}).c('show', 'dnd');
             _converse.api.connection.get()._dataRecv(mock.createRequest(pres));
@@ -888,7 +888,7 @@ describe("The Contacts Roster", function () {
 
             pres = $pres({from: 'mercutio@montague.lit/resource', type: 'unavailable'});
             _converse.api.connection.get()._dataRecv(mock.createRequest(pres));
-            await u.waitUntil(() => icon_el.getAttribute('color') === 'var(--subdued-color)');
+            await u.waitUntil(() => icon_el.getAttribute('color') === 'var(--secondary-color)');
         }));
 
         it("can be added to the roster and they will be sorted alphabetically",

src/shared/autocomplete/styles/_autocomplete.scss

@@ -31,7 +31,7 @@
                 left: 1em;
                 width: 0; height: 0;
                 padding: .4em;
-                background: var(--background);
+                background: var(--background-color);
                 border: inherit;
                 border-right: 0;
                 border-bottom: 0;
@@ -40,7 +40,7 @@
                 z-index: -1;
             }
             border-radius: .3em;
-            border: 1px solid var(--focus-color);
+            border: 0.15em solid var(--muc-color);
             box-shadow: .05em .2em .6em rgba(0,0,0,.1);
             box-sizing: border-box;
             left: 0;
@@ -54,7 +54,7 @@
             z-index: 2;
 
             > li {
-                background: var(--background);
+                background: var(--background-color);
                 color: var(--text-color);
                 cursor: pointer;
                 display: flex;
@@ -81,7 +81,7 @@
                 width: 0;
                 height: 0;
                 padding: 0.4em;
-                background: var(--background);
+                background: var(--background-color);
                 border: inherit;
                 border-left: 0;
                 border-top: 0;
@@ -112,17 +112,17 @@
     }
 
     .suggestion-box > ul > li[aria-selected="true"] {
-        background: var(--completion-dark-color);
-        color: var(--inverse-link-color);
+        background: var(--primary-color);
+        color: var(--foreground-color);
     }
 
     .suggestion-box li:hover mark {
-        background: var(--completion-light-color);
-        color: var(--inverse-link-color);
+        background: var(--secondary-color);
+        color: var(--link-color);
     }
 
     .suggestion-box li[aria-selected="true"] mark {
-        background: var(--completion-normal-color);
+        background: var(--muc-color);
         color: inherit;
     }
 }

src/shared/chat/emoji-dropdown.js

@@ -46,7 +46,7 @@ export default class EmojiDropdown extends DropdownBase {
 
     render() {
         const is_groupchat = this.chatview.model.get('type') === CHATROOMS_TYPE;
-        const color = is_groupchat ? '--muc-toolbar-btn-color' : '--chat-toolbar-btn-color';
+        const color = is_groupchat ? '--muc-color' : '--chat-color';
 
         return html`
             <button class="btn dropdown-toggle dropdown-toggle--no-caret toggle-emojis"

src/shared/chat/message-actions.js

@@ -86,7 +86,7 @@ class MessageActions extends CustomElement {
             <button type="button" class="dropdown-item chat-msg__action ${o.button_class}" @click=${o.handler}>
                 <converse-icon
                     class="${o.icon_class}"
-                    color="var(--inverse-link-color)"
+                    color="var(--foreground-color)"
                     size="1em"
                 ></converse-icon>&nbsp;${o.i18n_text}
             </button>

src/shared/chat/styles/emoji.scss

@@ -32,13 +32,13 @@
             width: 100%;
             padding-top: 0;
             padding-bottom: 0;
-            background-color: var(--chat-head-color);
+            background-color: var(--background-color);
             overflow-y: hidden;
 
             converse-emoji-picker-content {
                 width: 100%;
                 .emoji-picker__lists {
-                    background-color: var(--background);
+                    background-color: var(--background-color);
                     display: flex;
                     flex-direction: column;
                     height: 8em;
@@ -46,7 +46,7 @@
                     width: 100%;
                     .emoji-category__heading {
                         clear: both;
-                        color: var(--subdued-color);
+                        color: var(--secondary-color);
                         cursor: auto;
                         display: block;
                         font-size: var(--font-size);
@@ -55,7 +55,7 @@
                     }
 
                     .emoji-lists__container {
-                        background-color: var(--background);
+                        background-color: var(--background-color);
                         overflow-x: hidden;
                     }
 
@@ -69,8 +69,8 @@
             .emoji-skintone-picker {
                 display: flex;
                 padding: 0.5em 0 0.5em 0.5em;
-                color: var(--subdued-color);
-                background-color: var(--chat-head-color);
+                color: var(--secondary-color);
+                background-color: var(--background-color);
                 width: 100%;
                 font-size: var(--font-size);
                 ul {
@@ -84,7 +84,7 @@
                 }
             }
             .emoji-picker {
-                background-color: var(--background);
+                background-color: var(--background-color);
                 padding: 0.5em 0 0 0.5em;
                 &:last-child {
                     padding-bottom: 0.5em;
@@ -100,7 +100,7 @@
                     &.insert-emoji {
                         text-align: center;
                         &.selected a {
-                            background-color: var(--highlight-color-darker);
+                            background-color: var(--secondary-color);
                         }
                         img {
                             margin: 0 auto;
@@ -117,7 +117,7 @@
                             width: calc(var(--font-size-huge) * 1.5);
                             overflow: hidden;
                             &:hover {
-                                background-color: var(--highlight-color-darker);
+                                background-color: var(--secondary-color);
                             }
                         }
                     }
@@ -129,7 +129,7 @@
                 display: flex;
                 flex-direction: column;
                 padding: 0.1em 0;
-                background-color: var(--chat-head-color);
+                background-color: var(--background-color);
                 .emoji-search {
                     width: auto;
                     margin: 1em 0.25em 0.5em;
@@ -148,7 +148,7 @@
                             background-color: var(--heading-color);
                         }
                         &.selected a, &:hover a {
-                            background-color: var(--highlight-color-darker);
+                            background-color: var(--secondary-color);
                         }
                         a {
                             padding: 0.25em;
@@ -166,12 +166,12 @@
 
     .chatroom {
         converse-emoji-picker {
-            background-color: var(--chatroom-head-bg-color);
+            background-color: var(--background-color);
             .emoji-skintone-picker {
-                background-color: var(--chatroom-head-bg-color);
+                background-color: var(--background-color);
             }
             .emoji-picker__header {
-                background-color: var(--chatroom-head-bg-color);
+                background-color: var(--background-color);
             }
         }
     }

src/shared/chat/styles/message-actions.scss

@@ -6,13 +6,13 @@ converse-message-actions {
             min-width: 5rem;
         }
         i {
-            color: var(--inverse-link-color);
+            color: var(--foreground-color);
             font-size: 70%;
         }
         button {
             border: none;
             background: transparent;
-            color: var(--inverse-link-color);
+            color: var(--foreground-color);
             padding: 0 0.25em;
         }
         .btn--standalone {
@@ -34,7 +34,7 @@ converse-message-actions {
 
             &:hover {
                 color: var(--text-color);
-                background-color: var(--list-item-hover-color);
+                background-color: var(--secondary-color);
             }
         }
     }

src/shared/chat/styles/retraction.scss

@@ -2,7 +2,7 @@ converse-chat-message {
     .message {
         &.chat-msg--retracted {
             .chat-msg__message {
-                color: var(--subdued-color);
+                color: var(--secondary-color);
             }
         }
 

src/shared/chat/styles/toolbar.scss

@@ -1,7 +1,7 @@
 .conversejs {
 
     converse-chat-toolbar.btn-toolbar {
-        background-color: var(--chat-background-color);
+        background-color: var(--background-color);
         box-sizing: border-box;
         width: 100%;
         justify-content: space-between;
@@ -19,17 +19,17 @@
         }
 
         .send-button {
-            color: var(--background);
+            color: var(--background-color);
             border-radius: 0;
         }
 
         .fa, .fa:hover,
         .far, .far:hover,
         .fas, .fas:hover {
-            color: var(--chat-head-color);
+            color: var(--background-color);
             font-size: var(--font-size-large);
             svg {
-                fill: var(--chat-head-color);
+                fill: var(--background-color);
             }
         }
         .unencrypted a,
@@ -40,41 +40,40 @@
 
     .chatbox {
         .send-button {
-            background-color: var(--chat-toolbar-btn-color);
+            background-color: var(--chat-color);
         }
     }
 
     .chatroom {
         .send-button {
-            background-color: var(--muc-toolbar-btn-color);
+            background-color: var(--muc-color);
         }
     }
 
 
     .chatbox {
         converse-chat-toolbar {
-            border-top: var(--chatbox-message-input-border-top);
-            color: var(--chat-toolbar-btn-color);
-            background-color: var(--chat-background-color);
+            color: var(--chat-color);
+            background-color: var(--background-color);
             .fas, .fas:hover,
             .far, .far:hover,
             .fa, .fa:hover {
-                color: var(--chat-toolbar-btn-color);
+                color: var(--chat-color);
                 svg, svg:hover {
-                    fill: var(--chat-toolbar-btn-color);
+                    fill: var(--chat-color);
                 }
             }
             button {
                 &:focus {
-                    outline-color: var(--chat-toolbar-btn-color) !important;
+                    outline-color: var(--chat-color) !important;
                 }
                 &:disabled .fa {
-                    color: var(--chat-toolbar-btn-disabled-color);
+                    color: var(--disabled-color);
                     &:hover {
-                        color: var(--chat-toolbar-btn-disabled-color);
+                        color: var(--disabled-color);
                     }
                     svg, svg:hover {
-                        fill: var(--chat-toolbar-btn-disabled-color);
+                        fill: var(--disabled-color);
                     }
                 }
             }
@@ -83,28 +82,27 @@
 
     .chatroom {
         converse-chat-toolbar {
-            border-top: var(--chatroom-message-input-border-top);
-            color: var(--muc-toolbar-btn-color);
+            color: var(--muc-color);
             .fas, .fas:hover,
             .far, .far:hover,
             .fa, .fa:hover {
-                color: var(--muc-toolbar-btn-color);
+                color: var(--muc-color);
                 font-size: var(--font-size-large);
                 svg {
-                    fill: var(--muc-toolbar-btn-color);
+                    fill: var(--muc-color);
                 }
             }
             button {
                 &:focus {
-                    outline-color: var(--muc-toolbar-btn-color) !important;
+                    outline-color: var(--muc-color) !important;
                 }
                 &:disabled .fa {
-                    color: var(--muc-toolbar-btn-disabled-color);
+                    color: var(--disabled-color);
                     &:hover {
-                        color: var(--muc-toolbar-btn-disabled-color);
+                        color: var(--disabled-color);
                     }
                     svg, svg:hover {
-                        fill: var(--muc-toolbar-btn-disabled-color);
+                        fill: var(--disabled-color);
                     }
                 }
             }

src/shared/chat/styles/unfurl.scss

@@ -5,7 +5,7 @@
 .conversejs {
     converse-message-unfurl {
         .card {
-            background-color: var(--background);
+            background-color: var(--background-color);
             &.card--unfurl {
                 .card-body {
                     .card-title {

src/shared/chat/templates/message-text.js

@@ -21,7 +21,7 @@ export default (el) => {
         <div class="chat-msg__spoiler-hint">
             <span class="spoiler-hint">${el.model.get('spoiler_hint')}</span>
             <a class="badge badge-info spoiler-toggle" href="#" @click=${el.toggleSpoilerMessage}>
-                <converse-icon size="1em" color="var(--background)" class="fa ${el.model.get('is_spoiler_visible') ? 'fa-eye-slash' : 'fa-eye'}"></converse-icon>
+                <converse-icon size="1em" color="var(--background-color)" class="fa ${el.model.get('is_spoiler_visible') ? 'fa-eye-slash' : 'fa-eye'}"></converse-icon>
                 ${ el.model.get('is_spoiler_visible') ? i18n_show_less : i18n_show }
             </a>
         </div>

src/shared/chat/templates/toolbar.js

@@ -5,7 +5,7 @@ import { until } from 'lit/directives/until.js';
 function tplSendButton() {
     const i18n_send_message = __('Send the message');
     return html`<button type="submit" class="btn send-button" data-action="sendMessage" title="${i18n_send_message}">
-        <converse-icon color="var(--toolbar-btn-text-color)" class="fa fa-paper-plane" size="1em"></converse-icon>
+        <converse-icon color="var(--background-color)" class="fa fa-paper-plane" size="1em"></converse-icon>
     </button>`;
 }
 

src/shared/chat/toolbar.js

@@ -66,7 +66,7 @@ export class ChatToolbar extends CustomElement {
         }
 
         if (this.show_call_button) {
-            const color = this.is_groupchat ? '--muc-toolbar-btn-color' : '--chat-toolbar-btn-color';
+            const color = this.is_groupchat ? '--muc-color' : '--chat-color';
             const i18n_start_call = __('Start a call');
             buttons.push(html`
                 <button type="button"
@@ -145,7 +145,7 @@ 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 color = this.is_groupchat ? '--muc-color' : '--chat-color';
         const markup = html`
             <button type="button"
                     class="btn toggle-compose-spoiler"

src/shared/components/styles/dropdown.scss

@@ -24,7 +24,7 @@
         }
 
         .dropdown-menu {
-            background: var(--background);
+            background: var(--background-color);
             margin-top: -0.2em !important;
             box-shadow: var(--raised-el-shadow);
         }
@@ -39,15 +39,10 @@
                 margin-right: 0.25rem;
             }
             &:active, &.selected {
-                color: white !important;
-                background-color: var(--list-item-open-color);
-                .fa {
-                    color: white !important;
-                }
+                background-color: var(--highlight-color);
             }
             &:hover {
-                color: var(--text-color) !important;
-                background-color: var(--list-item-hover-color);
+                background-color: var(--highlight-color-hover);
             }
         }
     }

src/shared/components/styles/icon.scss

@@ -3,12 +3,12 @@ converse-icon {
     padding: 0;
     margin: 0;
     svg {
-	fill: var(--subdued-color);
+	fill: var(--secondary-color);
     }
     &.clickable {
 	&:hover {
 	    svg {
-		fill: var(--icon-hover-color);
+		fill: var(--link-color);
 	    }
 	}
     }
@@ -18,7 +18,7 @@ a, .clickable {
     converse-icon {
 	&:hover {
 	    svg {
-		fill: var(--icon-hover-color);
+		fill: var(--link-color);
 	    }
 	}
     }

src/shared/modals/templates/user-details.js

@@ -10,7 +10,7 @@ const remove_button = (el) => {
         <button type="button" @click="${ev => el.removeContact(ev)}" class="btn btn-danger remove-contact">
             <converse-icon
                 class="fas fa-trash-alt"
-                color="var(--inverse-link-color)"
+                color="var(--foreground-color)"
                 size="1em"
             ></converse-icon>&nbsp;${i18n_remove_contact}
         </button>
@@ -27,7 +27,7 @@ export const tplFooter = (el) => {
             <button type="button" class="btn btn-info refresh-contact" @click=${ev => el.refreshContact(ev)}>
                 <converse-icon
                     class="fa fa-refresh"
-                    color="var(--inverse-link-color)"
+                    color="var(--foreground-color)"
                     size="1em"
                 ></converse-icon>&nbsp;${i18n_refresh}</button>
             ${ (allow_contact_removal && is_roster_contact) ? remove_button(el) : '' }

src/shared/styles/_core.scss

@@ -9,12 +9,12 @@
     }
 
     .img-thumbnail {
-        background-color: var(--img-thumbnail-background-color);
-        border: 1px solid var(--img-thumbnail-border-color);
+        background-color: var(--highlight-color);
+        border: 1px solid black;
     }
 
     textarea:disabled {
-        background-color: var(--chat-textarea-disabled-bg-color) !important;
+        background-color: var(--disabled) !important;
     }
 
     .subdued {
@@ -22,11 +22,11 @@
     }
 
     .close {
-        color: var(--close-color);
+        color: var(--foreground-color);
         text-shadow: none;
 
         &:hover {
-            color: var(--close-color-hover);
+            color: var(--primary-color);
         }
     }
 
@@ -115,10 +115,10 @@
     }
 
     ::placeholder {
-        color: var(--subdued-color);
+        color: var(--secondary-color);
     }
     ::selection {
-        background-color: var(--highlight-color);
+        background-color: var(--selection-color);
     }
 
     @media screen and (max-width: $mobile-portrait-length) {
@@ -140,7 +140,7 @@
     h4,
     h5,
     h6 {
-        color: var(--header-color);
+        color: var(--heading-color);
     }
 
     ul li {
@@ -190,7 +190,7 @@
         text-shadow: none;
         cursor: pointer;
         &:hover {
-            color: var(--link-hover-color);
+            color: var(--link-color-hover);
             text-decoration: none;
             text-shadow: none;
         }
@@ -198,7 +198,7 @@
         &.fa,
         &.far,
         &.fas {
-            color: var(--subdued-color);
+            color: var(--secondary-color);
             &:hover {
                 color: var(--icon-hover-color);
             }
@@ -218,7 +218,7 @@
     .fa,
     .far,
     .fas {
-        color: var(--subdued-color);
+        color: var(--secondary-color);
     }
 
     q {
@@ -236,7 +236,7 @@
 
     .helptext {
         font-size: var(--font-size-tiny);
-        color: var(--comment);
+        color: var(--secondary-color);
     }
 
     .selected {
@@ -446,7 +446,7 @@
     }
 
     .form-help {
-        color: var(--subdued-color);
+        color: var(--secondary-color);
         font-size: 90%;
     }
 

src/shared/styles/_variables.scss

@@ -9,6 +9,18 @@ $mobile_portrait_length: 480px !default;
     --controlbox-width: 250px;
     --chatroom-width: 500px;
 
+    --chat-textarea-height: 60px;
+    --chat-separator-border-bottom: 2px solid var(--chat-color);
+    --chatbox-button-size: 14px;
+
+    --raised-el-shadow: 1px 1px 10px black;
+
+    --fullpage-chat-height: calc(var(--vh, 1vh) * 100);
+    --fullpage-chat-width: 100%;
+    --fullpage-chatbox-button-size: 16px;
+    --fullpage-emoji-picker-height: 300px;
+    --fullpage-max-chat-textarea-height: 15em;
+
     --send-button-height: 27px;
     --send-button-margin: 3px;
 
@@ -48,6 +60,10 @@ $mobile_portrait_length: 480px !default;
     --overlayed-max-chat-textarea-height: 200px;
 
     --list-toggle-font-weight: normal;
+
+    --separator-text-color: var(--message-text-color);
+
+    --text-color: var(--foreground-color);
 }
 
 .conversejs {

src/shared/styles/alerts.scss

@@ -2,7 +2,7 @@
 
     .alert-info, .alert-danger {
         h3 {
-            color: var(--background);
+            color: var(--background-color);
             font-size: large;
         }
 
@@ -11,22 +11,22 @@
         }
 
         .close {
-            color: var(--background);
+            color: var(--background-color);
         }
     }
 
     .alert-info {
-        color: var(--background);
+        color: var(--background-color);
         background-color: var(--info-color);
         border-color: var(--info-dark);
     }
 
     .alert-danger {
         .disconnect-msg {
-            color: var(--background) !important;
+            color: var(--background-color) !important;
         }
 
-        color: var(--background);
+        color: var(--background-color);
         border-color: var(--danger-color-dark);
         background-color: var(--danger-color);
     }

src/shared/styles/badges.scss

@@ -2,7 +2,7 @@
     @import "bootstrap/scss/badge";
 
     .badge {
-        color: var(--badge-color);
+        color: var(--background-color);
         font-size: 90%;
         font-weight: normal;
         line-height: 1;
@@ -17,26 +17,24 @@
         background-color: var(--primary-color);
         border-color: transparent;
         &:focus, &:hover, &:active {
-            background-color: var(--primary-color-dark) !important;
+            background-color: var(--primary-color-hover) !important;
             border-color: transparent !important;
         }
     }
 
     .badge-info {
-        background-color: var(--primary);
-        border-color: var(--primary);
+        background-color: var(--primary-color);
         &:hover {
-            background-color: var(--primary-color-dark);
-            border-color: var(--primary-color-dark);
+            background-color: var(--primary-color-hover);
         }
     }
 
     .badge-secondary {
-        background-color: var(--secondary-color);
-        border-color: var(--secondary-color);
+        background-color: var(--secondary-color-color);
+        border-color: var(--secondary-color-color);
         &:hover {
-            background-color: var(--secondary-color-dark);
-            border-color: var(--secondary-color-dark);
+            background-color: var(--secondary-color-color-dark);
+            border-color: var(--secondary-color-color-dark);
         }
     }
 }

src/shared/styles/buttons.scss

@@ -1,4 +1,6 @@
 .conversejs {
+    --button-text-color: var(--background-color);
+
     .btn {
         &.fa {
             color: var(--button-text-color) !important;
@@ -22,88 +24,88 @@
     }
 
     .btn-primary,
-	.btn-outline-primary {
-		--converse-btn-color: var(--button-text-color);
-		--converse-btn-bg: var(--primary);
-		--converse-btn-disabled-bg: var(--disabled-color);
-		--converse-btn-border-color: var(--primary);
-		--converse-btn-hover-bg: var(--primary);
-		--converse-btn-hover-border-color: var(--primary-color-dark);
-		--converse-btn-active-bg: var(--primary);
-		--converse-btn-active-border-color: var(--primary);
-		--converse-btn-disabled-color: var(--primary);
-		--converse-btn-disabled-border-color: var(--primary);
-	}
+    .btn-outline-primary {
+        --converse-btn-color: var(--button-text-color);
+        --converse-btn-bg: var(--primary-color);
+        --converse-btn-disabled-bg: var(--disabled-color);
+        --converse-btn-border-color: var(--primary-color);
+        --converse-btn-hover-bg: var(--primary-color);
+        --converse-btn-hover-border-color: var(--primary-color-hover);
+        --converse-btn-active-bg: var(--primary-color);
+        --converse-btn-active-border-color: var(--primary-color);
+        --converse-btn-disabled-color: var(--primary-color);
+        --converse-btn-disabled-border-color: var(--primary-color);
+    }
 
     .btn-secondary,
-	.btn-outline-secondary {
-		--converse-btn-color: var(--button-text-color);
-		--converse-btn-bg: var(--secondary);
-		--converse-btn-disabled-bg: var(--disabled-color);
-		--converse-btn-border-color: var(--secondary);
-		--converse-btn-hover-bg: var(--secondary);
-		--converse-btn-hover-border-color: var(--secondary-color-dark);
-		--converse-btn-active-bg: var(--secondary);
-		--converse-btn-active-border-color: var(--secondary);
-		--converse-btn-disabled-color: var(--secondary);
-		--converse-btn-disabled-border-color: var(--secondary);
-	}
+    .btn-outline-secondary {
+        --converse-btn-color: var(--button-text-color);
+        --converse-btn-bg: var(--secondary-color);
+        --converse-btn-disabled-bg: var(--disabled-color);
+        --converse-btn-border-color: var(--secondary-color);
+        --converse-btn-hover-bg: var(--secondary-color);
+        --converse-btn-hover-border-color: var(--secondary-color-hover);
+        --converse-btn-active-bg: var(--secondary-color);
+        --converse-btn-active-border-color: var(--secondary-color);
+        --converse-btn-disabled-color: var(--secondary-color);
+        --converse-btn-disabled-border-color: var(--secondary-color);
+    }
 
     .btn-success,
-	.btn-outline-success {
-		--converse-btn-color: var(--button-text-color);
-		--converse-btn-bg: var(--success);
-		--converse-btn-disabled-bg: var(--disabled-color);
-		--converse-btn-border-color: var(--success);
-		--converse-btn-hover-bg: var(--success-color-dark);
-		--converse-btn-hover-border-color: var(--success-color-dark);
-		--converse-btn-active-bg: var(--success);
-		--converse-btn-active-border-color: var(--success);
-		--converse-btn-disabled-color: var(--success);
-		--converse-btn-disabled-border-color: var(--success);
-	}
+    .btn-outline-success {
+        --converse-btn-color: var(--button-text-color);
+        --converse-btn-bg: var(--success-color);
+        --converse-btn-disabled-bg: var(--disabled-color);
+        --converse-btn-border-color: var(--success-color);
+        --converse-btn-hover-bg: var(--success-color-hover);
+        --converse-btn-hover-border-color: var(--success-color-hover);
+        --converse-btn-active-bg: var(--success-color);
+        --converse-btn-active-border-color: var(--success-color);
+        --converse-btn-disabled-color: var(--success-color);
+        --converse-btn-disabled-border-color: var(--success-color);
+    }
 
     .btn-warning,
-	.btn-outline-warning {
-		--converse-btn-color: var(--button-text-color);
-		--converse-btn-bg: var(--warning);
-		--converse-btn-disabled-bg: var(--disabled-color);
-		--converse-btn-border-color: var(--warning);
-		--converse-btn-hover-bg: var(--warning-color-dark);
-		--converse-btn-hover-border-color: var(--warning-color-dark);
-		--converse-btn-active-bg: var(--warning);
-		--converse-btn-active-border-color: var(--warning);
-		--converse-btn-disabled-color: var(--warning);
-		--converse-btn-disabled-border-color: var(--warning);
-	}
+    .btn-outline-warning {
+        --converse-btn-color: var(--button-text-color);
+        --converse-btn-bg: var(--warning-color);
+        --converse-btn-disabled-bg: var(--disabled-color);
+        --converse-btn-border-color: var(--warning-color);
+        --converse-btn-hover-bg: var(--warning-color-hover);
+        --converse-btn-hover-border-color: var(--warning-color-hover);
+        --converse-btn-active-bg: var(--warning-color);
+        --converse-btn-active-border-color: var(--warning-color);
+        --converse-btn-disabled-color: var(--warning-color);
+        --converse-btn-disabled-border-color: var(--warning-color);
+    }
 
     .btn-danger,
-	.btn-outline-danger {
-		--converse-btn-color: var(--button-text-color);
-		--converse-btn-bg: var(--danger);
-		--converse-btn-disabled-bg: var(--disabled-color);
-		--converse-btn-border-color: var(--danger);
-		--converse-btn-hover-bg: var(--danger-color-dark);
-		--converse-btn-hover-border-color: var(--danger-color-dark);
-		--converse-btn-active-bg: var(--danger);
-		--converse-btn-active-border-color: var(--danger);
-		--converse-btn-disabled-color: var(--danger);
-		--converse-btn-disabled-border-color: var(--danger);
-	}
+    .btn-outline-danger {
+        --converse-btn-color: var(--button-text-color);
+        --converse-btn-bg: var(--danger-color);
+        --converse-btn-disabled-bg: var(--disabled-color);
+        --converse-btn-border-color: var(--danger-color);
+        --converse-btn-hover-bg: var(--danger-color-hover);
+        --converse-btn-hover-border-color: var(--danger-color-hover);
+        --converse-btn-active-bg: var(--danger-color);
+        --converse-btn-active-border-color: var(--danger-color);
+        --converse-btn-disabled-color: var(--danger-color);
+        --converse-btn-disabled-border-color: var(--danger-color);
+    }
 
     .btn-info,
-	.btn-outline-info {
-		--converse-btn-color: var(--button-text-color);
-		--converse-btn-bg: var(--info);
-		--converse-btn-disabled-bg: var(--disabled-color);
-		--converse-btn-border-color: var(--info);
-		--converse-btn-hover-bg: var(--info-color-dark);
-		--converse-btn-hover-border-color: var(--info-color-dark);
-		--converse-btn-active-bg: var(--info);
-		--converse-btn-active-border-color: var(--info);
-		--converse-btn-disabled-color: var(--info);
-		--converse-btn-disabled-border-color: var(--info);
-	}
+    .btn-outline-info {
+        --converse-btn-color: var(--button-text-color);
+        --converse-btn-bg: var(--info-color);
+        --converse-btn-disabled-bg: var(--disabled-color);
+        --converse-btn-border-color: var(--info-color);
+        --converse-btn-hover-bg: var(--info-color-dark);
+        --converse-btn-hover-border-color: var(--info-color-dark);
+        --converse-btn-active-bg: var(--info-color);
+        --converse-btn-active-border-color: var(--info-color);
+        --converse-btn-disabled-color: var(--info-color);
+        --converse-btn-disabled-border-color: var(--info-color);
+    }
 
     .btn--transparent {
         background: transparent;

src/shared/styles/card.scss

@@ -0,0 +1,5 @@
+.conversejs {
+    .card {
+        --converse-card-border-color: var(--secondary-color);
+    }
+}

src/shared/styles/forms.scss

@@ -26,26 +26,26 @@
 
         .form-control {
             color: var(--text-color);
-            background-color: var(--background);
+            background-color: var(--background-color);
             &:focus {
                 color: var(--text-color);
                 background-color: var(--focus-color);
             }
 
             &::-webkit-input-placeholder { /* Chrome/Opera/Safari */
-                color: var(--subdued-color);
+                color: var(--secondary-color);
             }
             &::-moz-placeholder { /* Firefox 19+ */
-                color: var(--subdued-color);
+                color: var(--secondary-color);
             }
             &:-ms-input-placeholder { /* IE 10+ */
-                color: var(--subdued-color);
+                color: var(--secondary-color);
             }
             &:-moz-placeholder { /* Firefox 18- */
-                color: var(--subdued-color);
+                color: var(--secondary-color);
             }
             &::placeholder {
-                color: var(--subdued-color);
+                color: var(--secondary-color);
             }
         }
 
@@ -66,7 +66,7 @@
 
         &#converse-register,
         &#converse-login {
-            background: var(--controlbox-pane-background-color);
+            background: var(--background-color);
             legend {
                 width: 100%;
                 text-align: center;
@@ -80,7 +80,7 @@
                 white-space: normal;
             }
             .save-submit {
-                color: var(--save-button-color);
+                color: var(--success-color);
             }
             .form-url {
                 display: block;
@@ -114,7 +114,7 @@
                 color: var(--text-color);
             }
             .text-muted {
-                color: var(--subdued-color) !important;
+                color: var(--secondary-color) !important;
                 font-size: 85%;
                 padding-top: 0.5em;
                 a {

src/shared/styles/index.scss

@@ -67,6 +67,7 @@ $prefix: 'converse-';
 @import "alerts";
 @import "buttons";
 @import "badges";
+@import "card";
 @import "forms";
 @import "lists";
 @import "messages";

src/shared/styles/lists.scss

@@ -4,9 +4,9 @@
     .list-group-item {
         &.active {
             background-color: var(--primary-color);
-            border-color: var(--primary-color-dark);
+            border-color: var(--primary-color-hover);
         }
-        background-color: var(--list-group-item-bg-color);
+        background-color: var(--secondary-color);
     }
 
     .list-container {
@@ -17,11 +17,8 @@
             font-family: var(--heading-font);
             font-weight: var(--list-toggle-font-weight);
             display: block;
-            color: var(--list-toggle-color);
+            color: var(--secondary-color);
             padding: 0 0 0.5rem 0;
-            &:hover {
-                color: var(--list-toggle-hover-color);
-            }
         }
     }
 
@@ -35,7 +32,6 @@
             color: var(--text-color);
             overflow: hidden;
             padding: 0.5em 0;
-            text-shadow: 0 1px 0 var(--text-shadow-color);
             word-wrap: break-word;
             height: 2.5em;
 
@@ -45,15 +41,15 @@
 
             &:hover {
                 .list-item-link {
-                    color: var(--list-item-link-hover-color);
+                    color: var(--foreground-color) !important;
                 }
             }
 
             .list-item-link {
-                color: var(--list-item-link-color);
                 &:hover {
-                    color: var(--list-item-link-hover-color);
+                    color: var(--foreground-color) !important;
                 }
+                color: var(--foreground-color);
                 margin: auto;
                 font-size: var(--font-size);
                 overflow: hidden;
@@ -65,7 +61,7 @@
             .list-item-badge {
                 opacity: 1;
                 border-radius: 25%;
-                color: var(--badge-color);
+                color: var(--background-color);
                 font-size: var(--font-size-small);
                 line-height: var(--font-size-small);
             }
@@ -81,14 +77,14 @@
                     font-size: var(--font-size);
                 }
                 &.button-on {
-                    color: var(--list-item-link-color);
+                    color: var(--foreground-color);
                     &:hover {
-                        color: var(--list-item-link-hover-color);
+                        color: var(--link-color-hover);
                     }
                 }
-                color: var(--subdued-color);
+                color: var(--secondary-color);
                 &:hover {
-                    color: var(--list-toggle-hover-color);
+                    color: var(--secondary-color);
                     opacity: 1;
                 }
                 &:focus {
@@ -101,32 +97,26 @@
             }
 
             &.open {
+                background-color: var(--highlight-color);
                 &:hover {
+                    background-color: var(--highlight-color-hover);
                     .list-item-link {
-                        color: var(--inverse-link-color);
-                        &:hover {
-                            color: var(--inverse-link-color);
-                        }
+                        color: var(--foreground-color);
                     }
                 }
-
-                background-color: var(--list-item-open-color);
-                &:hover {
-                    background-color: var(--list-item-open-hover-color);
-                }
                 a {
-                    color: var(--inverse-link-color);
+                    color: var(--foreground-color);
                 }
                 .list-item-action {
-                    color: var(--list-item-action-color);
+                    color: var(--secondary-color);
                     &:hover {
-                        color: var(--list-item-action-hover-color);
+                        color: var(--primary-color);
                     }
                 }
             }
 
             &:hover {
-                background-color: var(--controlbox-pane-bg-hover-color);
+                background-color: var(--highlight-color-hover);
                 .list-item-action {
                     opacity: 1;
                 }

src/shared/styles/messages.scss

@@ -1,10 +1,10 @@
 .conversejs {
     .styling-directive {
-        color: var(--subdued-color);
+        color: var(--secondary-color);
     }
 
     .msgs-indicator {
-        color: var(--text-color-invert);
+        color: var(--background-color);
         background-color: var(--chat-color);
     }
 
@@ -12,15 +12,15 @@
         .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(--message-author-color) !important;
+            color: var(--link-color) !important;
         }
 
         blockquote {
             margin-left: 0.5em;
             margin-bottom: 0.25em;
             padding-right: 1em;
-            color: var(--chat-msg-quote-color);
-            border-left: 0.3em solid var(--chat-msg-quote-color);
+            color: var(--info-color);
+            border-left: 0.3em solid var(--info-color);
             padding-left: 0.5em;
             display: inline-block;
         }
@@ -52,9 +52,9 @@
             }
 
             .separator-text {
-                background: var(--chat-background-color);
+                background: var(--background-color);
                 bottom: 1px; // Offset needed due to .separator border size
-                color: var(--separator-text-color);
+                color: var(--foreground-color);
                 display: inline-block;
                 line-height: 2em;
                 padding: 0 1em;
@@ -64,14 +64,14 @@
         }
 
         &.chat-info {
-            color: var(--chat-info-color);
+            color: var(--info-color);
             font-size: var(--message-font-size);
             line-height: var(--line-height-small);
             font-size: 90%;
             padding: 0.17rem 1rem;
 
             &.badge {
-                color: var(--chat-head-text-color);
+                color: var(--chat-color);
             }
             &.chat-state-notification {
                 font-style: italic;
@@ -115,15 +115,10 @@
                 -webkit-animation: colorchange-chatmessage 1s;
             }
             &:hover {
-                background-color: var(--chat-msg-hover-color);
+                background-color: var(--highlight-color-hover);
             }
             &.correcting {
-                &.groupchat  {
-                    background-color: var(--chatroom-correcting-color);
-                }
-                &:not(.groupchat) {
-                    background-color: var(--chat-correcting-color);
-                }
+                background-color: var(--highlight-color);
             }
 
             .spoiler {
@@ -133,9 +128,9 @@
                 margin-bottom: 0.5em;
             }
             .spoiler-toggle {
-                color: var(--background);
+                color: var(--background-color);
                 i {
-                    color: var(--background);
+                    color: var(--background-color);
                     padding-right: 0.5em;
                 }
                 &:before {
@@ -147,11 +142,11 @@
             .chat-msg__content--me {
                 .chat-msg__body--groupchat {
                     .chat-msg__text {
-                        color: var(--subdued-color);
+                        color: var(--secondary-color);
                     }
                     &.chat-msg__body--delayed .chat-msg__text,
                     &.chat-msg__body--received .chat-msg__text {
-                        color: var(--message-text-color);
+                        color: var(--foreground-color);
                     }
                 }
             }
@@ -183,7 +178,7 @@
             }
 
             .chat-msg__text {
-                color: var(--message-text-color);
+                color: var(--foreground-color);
                 padding: 0;
                 white-space: pre-wrap;
                 word-wrap: break-word;
@@ -252,7 +247,7 @@
                 .chat-msg__time {
                     padding-left: 0.25em;
                     padding-right: 0.25em;
-                    color: var(--comment);
+                    color: var(--secondary-color);
                 }
                 .fa-lock {
                     svg {
@@ -303,7 +298,7 @@
             .chat-msg__receipt {
                 margin-left: 0.5em;
                 margin-right: 0.5em;
-                color: var(--message-receipt-color);
+                color: var(--success-color);
             }
         }
 
@@ -334,7 +329,7 @@
         }
         .separator {
             border-top: 0px;
-            border-bottom: var(--chatroom-separator-border-bottom);
+            border-bottom: 0.15em solid var(--muc-color);
         }
     }
 

src/shared/styles/themes/classic.scss

@@ -1,151 +1,74 @@
 &[data-converse-theme="classic"],
 &[data-bs-theme="classic"] {
-	$theme: 'classic' !default;
+    $theme: 'classic' !default;
 
-	// Theme-defined variables:
-	// Hex color values
-	--background: white;
-	--blue: #387592;
-	--comment: #a8aba1;
-	--dark-blue: #397491;
-	--dark-green: #1e9652;
-	--dark-red: #d24e2b;
-	--foreground: #666;
-	--gray: #818479;
-	--green: #3aa569;
-	--header-color: var(--foreground);
-	--light-blue: #578ea9;
-	--lighter-blue: #eff4f7;
-	--orange: #e7a151;
-	--redder-orange: #e77051;
-	--subdued-color: var(--comment);
+    // Hex color values
+    // ----------------
+    --blue: #387592;
+    --dark-blue: #397491;
+    --dark-green: #1e9652;
+    --dark-red: #d24e2b;
+    --gray: #818479;
+    --green: #3aa569;
+    --light-blue: #578ea9;
+    --lighter-blue: #eff4f7;
+    --orange: #e7a151;
+    --redder-orange: #e77051;
 
-	// Common variables
-	--badge-color: var(--background);
-	--brand-heading-color: var(--blue);
-	--button-hover-text-color: var(--background);
-	--button-text-color: var(--background);
-	--chat-background-color: var(--background);
-	--chat-color: var(--green);
-	--chat-content-background-color: var(--background);
-	--chat-correcting-color: var(--comment);
-	--chat-head-border-bottom: 0;
-	--chat-head-color-dark: var(--dark-green);
-	--chat-head-color-darker: #0e763b;
-	--chat-head-color: var(--green);
-	--chat-head-fg-color: var(--background);
-	--chat-head-text-color: var(--background);
-	--chat-info-color: var(--chatroom-head-bg-color);
-	--chat-msg-hover-color: var(--list-item-hover-color);
-	--chat-msg-quote-color: var(--subdued-color);
-	--chat-separator-border-bottom: 2px solid var(--chat-color);
-	--chat-status-away: var(--orange);
-	--chat-status-busy: var(--redder-orange);
-	--chat-status-online: var(--green);
-	--chat-textarea-background-color: var(--background);
-	--chat-textarea-color: var(--foreground);
-	--chat-textarea-disabled-bg-color: #eee;
-	--chat-textarea-height: 60px;
-	--chat-toolbar-btn-color: var(--green);
-	--chat-toolbar-btn-disabled-color: gray;
-	--chatbox-button-size: 14px;
-	--chatbox-message-input-border-top: 4px solid var(--chat-head-color);
-	--chatroom-badge-color: var(--chatroom-head-bg-color);
-	--chatroom-badge-hover-color: var(--chatroom-head-bg-color-dark);
-	--chatroom-color: var(--redder-orange);
-	--chatroom-correcting-color: #fadfd7; // lighten($red, 30%)
-	--chatroom-head-bg-color-dark: #d24e2b; // $red
-	--chatroom-head-bg-color: var(--redder-orange);
-	--chatroom-head-border-bottom: 0px;
-	--chatroom-head-button-color: var(--chatroom-head-bg-color);
-	--chatroom-head-color: var(--background);
-	--chatroom-head-description-display: block;
-	--chatroom-head-description-link-color: var(--background);
-	--chatroom-head-fg-color: var(--background);
-	--chatroom-head-title-font-weight: normal;
-	--chatroom-head-title-padding-right: 0px;
-	--chatroom-message-input-border-top: 4px solid var(--chatroom-head-bg-color);
-	--chatroom-separator-border-bottom: 2px solid var(--chatroom-head-bg-color);
-	--close-color: #585b51;
-	--close-color: var(--text-color);
-	--completion-dark-color: #d24e2b; // $dark-red
-	--completion-light-color: #ffb9a7; // $lightest-red
-	--completion-normal-color: var(--redder-orange);
-	--controlbox-head-color: var(--light-blue);
-	--controlbox-heading-color: inherit;
-	--controlbox-heading-font-weight: bold;
-	--controlbox-heading-top-margin: 0.75em;
-	--controlbox-pane-background-color: var(--background);
-	--controlbox-pane-bg-hover-color: #eff4f7;
-	--controlbox-text-color: var(--foreground);
-	--danger-color-dark: #a93415; // darker red
-	--danger-color: var(--redder-orange); // dark-red
-	--dark-link-color: #206485; // $dark-blue
-	--disabled-color-bg: lightgray;
-	--disabled-color: gray;
-	--error-color: var(--dark-red);
-	--focus-color: var(--dark-link-color);
-	--fullpage-chat-height: calc(var(--vh, 1vh) * 100);
-	--fullpage-chat-width: 100%;
-	--fullpage-chatbox-button-size: 16px;
-	--fullpage-emoji-picker-height: 300px;
-	--fullpage-max-chat-textarea-height: 15em;
-	--global-background-color: var(--dark-blue);
-	--groupchats-header-color-dark: var(--chatroom-head-bg-color-dark);
-	--groupchats-header-color: var(--chatroom-head-bg-color);
-	--heading-color: var(--background);
-	--heading-display: block;
-	--headline-message-color: #d2842b;
-	--headline-separator-border-bottom: 2px solid var(--headlines-color);
-	--headlines-color: var(--orange);
-	--headlines-head-bg-color: var(--headlines-color);
-	--headlines-head-fg-color: var(--background);
-	--headlines-head-text-color: var(--background);
-	--highlight-color-darker: #b0e8e2;
-	--highlight-color: #dcf9f6;
-	--icon-hover-color: var(--text-color);
-	--img-thumbnail-background-color: var(--background);
-	--img-thumbnail-border-color: #dee2e6;
-	--info-color: var(--dark-green);
-	--inverse-link-color: var(--background);
-	--light-background-color: #fcfdfd;
-	--link-color: var(--light-blue);
-	--link-hover-color: #345566;
-	--list-dot-circle-color: #f6dec1; // lighten($orange, 25%)
-	--list-group-item-bg-color: var(--background);
-	--list-item-action-color: #e3eef3; // lighten($lightest-blue, 25%)
-	--list-item-action-hover-color: var(--inverse-link-color);
-	--list-item-hover-color: rgba(0, 0, 0, 0.035);
-	--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-toggle-color: var(--gray);
-	--list-toggle-hover-color: #585b51;
-	--message-author-color: var(--text-color);
-	--message-receipt-color: var(--green);
-	--message-text-color: #555;
-	--modal-background-color: var(--background);
-	--muc-color: var(--redder-orange);
-	--muc-toolbar-btn-color: var(--redder-orange);
-	--muc-toolbar-btn-disabled-color: gray;
-	--occupants-background-color: var(--background);
-	--occupants-border-bottom: 1px solid lightgrey;
-	--occupants-border-left: 0.2rem solid var(--panel-divider-color);
-	--overlayed-badge-color: var(--gray);
-	--panel-divider-color: #e7e7e7;
-	--primary-color-dark: var(--dark-blue);
-	--primary-color-light: var(--lighter-blue);
-	--primary-color: var(--light-blue);
-	--save-button-color: var(--green);
-	--secondary-color-dark: #585b51;
-	--secondary-color: var(--gray);
-	--separator-text-color: var(--message-text-color);
-	--text-color-invert: var(--background);
-	--text-color: var(--foreground);
-	--text-shadow-color: #fafafa;
-	--toolbar-btn-text-color: var(--background);
-	--unread-msgs-color: var(--orange);
-	--warning-color-dark: #d2842b;
-	--warning-color: var(--orange);
+    // Base variables
+    // --------------
+    --foreground-color: #666;
+    --background-color: #efefef;
+
+    // Common bootstrap variables
+    --primary-color: var(--blue) !important;
+    --secondary-color: var(--light-blue) !important;
+    --success-color: var(--green);
+    --danger-color: var(--dark-red);
+    --warning-color: var(--orange);
+    --info-color: var(--light-blue);
+
+    // Online status indicators
+    --chat-status-away: var(--orange);
+    --chat-status-busy: var(--red);
+    --chat-status-offline: gray;
+    --chat-status-online: var(--green);
+
+    --controlbox-color: var(--light-blue);
+    --disabled-color: gray;
+    --error-color: var(--dark-red);
+    --focus-color: #aaa;
+    --heading-color: var(--background-color);
+    --headlines-color: var(--orange);
+    --link-color: var(--dark-blue);
+
+    // The background when selecting text with your mouse
+    --selection-color: black;
+
+    // Used to indicate selected or open items in lists.
+    --highlight-color: var(--lighter-blue);
+    --highlight-color-hover: var(--lighter-blue);
+
+    // 1:1 Chat-related colors
+    --chat-color: var(--dark-green);
+    --chat-header-fg-color: var(--background-color);
+    --chat-header-bg-color: var(--chat-color);
+
+    // MUC-related colors
+    --muc-color: var(--redder-orange);
+    --muc-header-fg-color: var(--background-color);
+    --muc-header-bg-color: var(--muc-color);
+
+    // Derived colors
+    // --------------
+    --brand-heading-color: var(--blue);
+    --chat-color-hover: var(--chat-color);
+    --danger-color-hover: var(--danger-color);
+    --global-background-color: var(--dark-blue);
+    --link-color-hover: var(--link-color);
+    --muc-color-hover: var(--muc-color);
+    --primary-color-hover: var(--dark-blue);
+    --secondary-color-hover: #ddd;
+    --success-color-hover: var(--success);
+    --warning-color-hover: #d2842b;
 }

src/shared/styles/themes/cyberpunk.scss

@@ -2,305 +2,223 @@
 
 &[data-converse-theme="cyberpunk"],
 &[data-bs-theme="cyberpunk"] {
-	$theme: 'vapor' !default;
-
-	// Hex color values
-	--black: #000;
-	--blue: #1ba2f6;
-	--cyan: #32fbe2;
-	--green: #3cf281;
-	--indigo: #6610f2;
-	--orange: #f1b633;
-	--pink: #ea39b8;
-	--purple: #6f42c1;
-	--red: #e44c55;
-	--teal: #3f81a2;
-	--white: #fff;
-	--yellow: #ffc107;
-
-	// Base variables
-	--background: var(--body-bg);
-	--body-bg-alt: rgb(48, 17, 94);
-	--body-bg: #1a0933;
-	--body-color: var(--cyan);
-	--danger: var(--red);
-	--dark: var(--gray-900);
-	--foreground: var(--white);
-	--info: var(--blue);
-	--light: #44d9e8;
-	--primary: var(--purple);
-	--secondary: var(--pink);
-	--success: var(--green);
-	--warning: var(--yellow);
-
-	// Common variables
-	--badge-color: var(--background);
-	--brand-heading-color: var(--cyan);
-	--button-hover-text-color: var(--background);
-	--button-text-color: var(--background);
-	--chat-background-color: var(--background);
-	--chat-color: var(--green);
-	--chat-content-background-color: var(--background);
-	--chat-correcting-color: var(--comment);
-	--chat-head-border-bottom: 0.15em solid var(--chat-color);
-	--chat-head-color-dark: var(--chat-color);
-	--chat-head-color-darker: var(--chat-color);
-	--chat-head-color: var(--background);
-	--chat-head-fg-color: var(--chat-color);
-	--chat-head-text-color: var(--chat-color);
-	--chat-info-color: var(--orange);
-	--chat-msg-hover-color: var(--body-bg-alt);
-	--chat-msg-quote-color: var(--pink);
-	--chat-separator-border-bottom: 2px solid var(--chat-color);
-	--chat-status-away: var(--orange);
-	--chat-status-busy: var(--red);
-	--chat-status-online: var(--green);
-	--chat-textarea-background-color: var(--background);
-	--chat-textarea-color: var(--foreground);
-	--chat-textarea-disabled-bg-color: var(--disabled-color);
-	--chat-toolbar-btn-color: var(--chat-color);
-	--chatbox-message-input-border-top: 0.15em solid var(--chat-color);
-	--chatroom-correcting-color: var(--comment);
-	--chatroom-head-bg-color-dark: var(--muc-color);
-	--chatroom-head-bg-color: var(--background);
-	--chatroom-head-border-bottom: 0.15em solid var(--muc-color);
-	--chatroom-head-color: var(--muc-color);
-	--chatroom-head-description-link-color: var(--link-color);
-	--chatroom-head-fg-color: var(--muc-color);
-	--chatroom-message-input-border-top: 0.15em solid var(--muc-color);
-	--chatroom-separator-border-bottom: 0.15em solid var(--muc-color);
-	--close-color-hover: var(--purple);
-	--close-color: var(--foreground);
-	--comment: var(--secondary);
-	--completion-dark-color: var(--current-line);
-	--completion-light-color: var(--pink);
-	--completion-normal-color: var(--red);
-	--controlbox-head-color: var(--purple);
-	--close-color: var(--text-color);
-	--completion-normal-color: var(--redder-orange);
-	--controlbox-head-color: var(--light-blue);
-	--controlbox-heading-color: inherit;
-	--controlbox-heading-font-weight: bold;
-	--controlbox-heading-top-margin: 0.75em;
-	--controlbox-pane-background-color: var(--background);
-	--controlbox-pane-bg-hover-color: var(--list-item-hover-color);
-	--controlbox-text-color: var(--foreground);
-	--current-line: var(--primary);
-	--danger-color-dark: var(--pink);
-	--dark-link-color: var(--cyan);
-	--disabled-color-bg: lightgray;
-	--disabled-color: var(--comment);
-	--error-color: var(--danger);
-	--error-color: var(--red);
-	--focus-color: var(--comment);
-	--global-background-color: var(--background);
-	--gray-color: var(--current-line);
-	--groupchats-header-color-dark: var(--muc-color);
-	--groupchats-header-color: var(--muc-color);
-	--header-color: var(--pink);
-	--heading-color: var(--purple);
-	--headline-message-color: var(--headlines-color);
-	--headline-separator-border-bottom: 2px solid var(--headlines-color);
-	--headlines-color: var(--pink);
-	--headlines-head-bg-color: var(--background);
-	--headlines-head-border-bottom: 0.15em solid var(--headlines-color);
-	--headlines-head-fg-color: var(--headlines-color);
-	--headlines-head-text-color: var(--headlines-color);
-	--highlight-color-darker: var(--comment);
-	--highlight-color: var(--background);
-	--icon-hover-color: var(--cyan);
-	--img-thumbnail-background-color: var(--comment);
-	--img-thumbnail-border-color: black;
-	--info-color: var(--yellow);
-	--inverse-link-color: var(--foreground);
-	--light-background-color: var(--background);
-	--link-color: var(--body-color);
-	--link-hover-color: var(--green);
-	--list-dot-circle-color: var(--orange);
-	--list-group-item-bg-color: var(--comment);
-	--list-item-action-color: var(--comment);
-	--list-item-action-hover-color: var(--cyan);
-	--list-item-hover-color: var(--current-line);
-	--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(--current-line);
-	--list-toggle-color: var(--comment);
-	--list-toggle-hover-color: var(--comment);
-	--message-author-color: var(--cyan);
-	--message-receipt-color: var(--green);
-	--message-text-color: var(--foreground);
-	--modal-background-color: var(--background);
-	--muc-color: var(--orange);
-	--muc-toolbar-btn-color: var(--muc-color);
-	--muc-toolbar-btn-disabled-color: var(--disabled-color);
-	--occupants-background-color: var(--background);
-	--occupants-border-bottom: 0.15em solid var(--muc-color);
-	--occupants-border-left: 0.15em solid var(--muc-color);
-	--panel-divider-color: var(--comment);
-	--primary-color-dark: var(--purple);
-	--primary-color: var(--primary);
-	--raised-el-shadow: 1px 1px 10px black;
-	--redder-orange: var(--muc-color);
-	--secondary-color-dark: var(--secondary);
-	--secondary-color: var(--secondary);
-	--separator-text-color: var(--message-text-color);
-	--subdued-color: var(--comment);
-	--text-color-invert: var(--background);
-	--text-color: var(--foreground);
-	--toolbar-btn-text-color: var(--background);
-	--unread-msgs-color: var(--yellow);
-	--warning-color-dark: var(--orange);
-	--warning-color: var(--orange);
-
-	.card {
-		--converse-card-border-color: var(--comment);
-	}
-
-	#controlbox {
-		.flyout {
-			box-shadow:
-				0 0 1rem 0rem rgba(234, 57, 184, 0.5) inset,
-				0 0 2rem 0rem rgba(234, 57, 184, 0.2) inset,
-				0 0 4rem 2rem rgba(234, 57, 184, 0.1) inset !important;
-		}
-	}
-
-	.modal-header {
-		.btn-close {
-			background-color: var(--header-color);
-		}
-	}
-
-	.message .separator-text {
-		border-radius: 50px;
-		box-shadow:
-			0 0 0.25rem rgba(60, 242, 129, 0.8),
-			0 0 1rem rgba(60, 242, 129, 0.2),
-			0 0 4rem rgba(60, 242, 129, 0.1) !important;
-	}
-
-	.card {
-		box-shadow:
-			inset 0 0 0.5rem rgba(234, 57, 184, 0.8),
-			inset 0 0 1rem rgba(234, 57, 184, 0.4),
-			inset 0 0 2rem rgba(234, 57, 184, 0.3),
-			inset 0 0 4rem rgba(234, 57, 184, 0.1) !important;
-	}
-
-	.chat-toolbar {
-		box-shadow:
-			0 0 0.5rem rgba(60, 242, 129, 0.4),
-			0 0 2rem rgba(60, 242, 129, 0.2),
-			0 0 4rem rgba(60, 242, 129, 0.1) !important;
-	}
-
-	.chat-head-chatbox {
-		box-shadow:
-			0 0 1rem 0rem rgba(60, 242, 129, 0.5) inset,
-			0 0 2rem 0rem rgba(60, 242, 129, 0.4) inset,
-			0 0 4rem 2rem rgba(60, 242, 129, 0.2) inset,
-			0 0 1rem 0rem rgba(60, 242, 129, 0.4),
-			0 0 2rem 0rem rgba(60, 242, 129, 0.2),
-			0 0 4rem 0rem rgba(60, 242, 129, 0.1) !important;
-	}
-
-	.chatroom {
-		.message .separator-text {
-			border-radius: 50px;
-			box-shadow:
-				0 0 0.25rem rgba(255, 193, 7, 0.8),
-				0 0 1rem rgba(255, 193, 7, 0.2),
-				0 0 4rem rgba(255, 193, 7, 0.1) !important;
-		}
-
-		.chat-head-chatroom {
-			box-shadow:
-				0 0 1rem 0rem rgba(255, 193, 7, 0.5) inset,
-				0 0 2rem 0rem rgba(255, 193, 7, 0.4) inset,
-				0 0 4rem 2rem rgba(255, 193, 7, 0.2) inset,
-				0 0 1rem 0rem rgba(255, 193, 7, 0.4),
-				0 0 2rem 0rem rgba(255, 193, 7, 0.2),
-				0 0 4rem 0rem rgba(255, 193, 7, 0.1) !important;
-		}
-
-		converse-muc-sidebar {
-			box-shadow: 0 0 1rem 1rem rgba(255, 193, 7, 0.1) inset !important;
-		}
-
-		.chat-toolbar {
-			box-shadow:
-				0 0 0.5rem rgba(255, 193, 7, 0.4),
-				0 0 2rem rgba(255, 193, 7, 0.2),
-				0 0 4rem rgba(255, 193, 7, 0.1) !important;
-		}
-	}
-
-	.moving-grid {
-		position: absolute;
-		top: 42%;
-		left: 0;
-		width: 100%;
-		height: 70%;
-		perspective: 1000px;
-		&:before {
-			content: '';
-			position: absolute;
-			top: 4rem;
-			width: 100%;
-			height: 0;
-			box-shadow:
-				0 0 1rem 0.5rem rgba(255, 255, 255, 0.5),
-				0 0 2rem 0rem rgba(234, 57, 184, 0.3),
-				0 0 4rem 2rem rgba(234, 57, 184, 0.1) !important;
-		}
-		.container {
-			position: relative;
-			width: 100%;
-			height: 300%;
-			border: 2px solid pink;
-			box-sizing: border-box;
-			transform-origin: top;
-			transform: rotateX(57deg) translateY(10%);
-			overflow: hidden;
-			.static-lines {
-				display: inline-block;
-				width: 100%;
-				height: 100%;
-				.vert {
-					display: inline-block;
-					height: 100%;
-					width: 2px;
-					background-color: pink;
-					margin-left: 4.5%;
-					box-shadow: 0 2px 21px pink;
-				}
-			}
-			.moving-lines {
-				position: absolute;
-				top: 0;
-				left: 0;
-				width: 100%;
-				height: 300%;
-				.horz {
-					display: inline-block;
-					width: 100%;
-					height: 3px;
-					margin-top: 4.8%;
-					background-color: pink;
-					box-shadow: 2px 0 21px pink;
-					animation: lines 15000ms linear infinite;
-				}
-			}
-		}
-	}
-
-	@keyframes lines {
-		from {
-			transform: translateY(-65px);
-		}
-		to {
-			transform: translateY(65px);
-		}
-	}
+    $theme: 'vapor' !default;
+
+    // Hex color values
+    // ----------------
+    --blue: #1ba2f6;
+    --cyan: #32fbe2;
+    --green: #3cf281;
+    --indigo: #6610f2;
+    --orange: #f1b633;
+    --pink: #ea39b8;
+    --purple: #6f42c1;
+    --red: #e44c55;
+    --teal: #3f81a2;
+    --white: #efefef;
+    --yellow: #ffc107;
+
+    // Base variables
+    // --------------
+    --background-color: #1a0933;
+    --foreground-color: var(--white);
+
+    // Common bootstrap variables
+    --primary-color: var(--purple) !important;
+    --secondary-color: var(--indigo) !important;
+    --success-color: var(--green);
+    --danger-color: var(--red);
+    --warning-color: var(--orange);
+    --info-color: var(--yellow);
+
+    // Online status indicators
+    --chat-status-away: var(--orange);
+    --chat-status-busy: var(--red);
+    --chat-status-offline: gray;
+    --chat-status-online: var(--green);
+
+    --controlbox-color: var(--purple);
+    --disabled-color: var(--secondary-color);
+    --error-color: var(--red);
+    --focus-color: var(--secondary-color);
+    --heading-color: var(--purple);
+    --headlines-color: var(--pink);
+    --link-color: var(--cyan);
+
+    // The background when selecting text with your mouse
+    --selection-color: black;
+
+    // Used to indicate selected or open items in lists.
+    --highlight-color: var(--purple);
+    --highlight-color-hover: var(--indigo);
+
+    // 1:1 Chat-related colors
+    --chat-color: var(--green);
+    --chat-header-fg-color: var(--chat-color);
+    --chat-header-bg-color: var(--background-color);
+
+    // MUC-related colors
+    --muc-color: var(--orange);
+    --muc-header-fg-color: var(--muc-color);
+    --muc-header-bg-color: var(--background-color);
+
+    // Derived colors
+    // --------------
+    --brand-heading-color: var(--cyan);
+    --chat-color-hover: var(--chat-color);
+    --danger-color-hover: var(--danger-color);
+    --global-background-color: var(--background-color);
+    --link-color-hover: var(--link-color);
+    --muc-color-hover: var(--muc-color);
+    --primary-color-hover: var(--purple);
+    --secondary-color-hover: var(--secondary-color);
+    --success-color-hover: var(--success);
+    --warning-color-hover: var(--orange);
+
+    #controlbox {
+        .flyout {
+            box-shadow:
+                0 0 1rem 0rem rgba(234, 57, 184, 0.5) inset,
+                0 0 2rem 0rem rgba(234, 57, 184, 0.2) inset,
+                0 0 4rem 2rem rgba(234, 57, 184, 0.1) inset !important;
+        }
+    }
+
+    .modal-header {
+        .btn-close {
+            background-color: var(--header-color);
+        }
+    }
+
+    .message .separator-text {
+        border-radius: 50px;
+        box-shadow:
+            0 0 0.25rem rgba(60, 242, 129, 0.8),
+            0 0 1rem rgba(60, 242, 129, 0.2),
+            0 0 4rem rgba(60, 242, 129, 0.1) !important;
+    }
+
+    .card {
+        box-shadow:
+            inset 0 0 0.5rem rgba(234, 57, 184, 0.8),
+            inset 0 0 1rem rgba(234, 57, 184, 0.4),
+            inset 0 0 2rem rgba(234, 57, 184, 0.3),
+            inset 0 0 4rem rgba(234, 57, 184, 0.1) !important;
+    }
+
+    .chat-toolbar {
+        box-shadow:
+            0 0 0.5rem rgba(60, 242, 129, 0.4),
+            0 0 2rem rgba(60, 242, 129, 0.2),
+            0 0 4rem rgba(60, 242, 129, 0.1) !important;
+    }
+
+    .chat-head-chatbox {
+        box-shadow:
+            0 0 1rem 0rem rgba(60, 242, 129, 0.5) inset,
+            0 0 2rem 0rem rgba(60, 242, 129, 0.4) inset,
+            0 0 4rem 2rem rgba(60, 242, 129, 0.2) inset,
+            0 0 1rem 0rem rgba(60, 242, 129, 0.4),
+            0 0 2rem 0rem rgba(60, 242, 129, 0.2),
+            0 0 4rem 0rem rgba(60, 242, 129, 0.1) !important;
+    }
+
+    .chatroom {
+        .message .separator-text {
+            border-radius: 50px;
+            box-shadow:
+                0 0 0.25rem rgba(255, 193, 7, 0.8),
+                0 0 1rem rgba(255, 193, 7, 0.2),
+                0 0 4rem rgba(255, 193, 7, 0.1) !important;
+        }
+
+        .chat-head-chatroom {
+            box-shadow:
+                0 0 1rem 0rem rgba(255, 193, 7, 0.5) inset,
+                0 0 2rem 0rem rgba(255, 193, 7, 0.4) inset,
+                0 0 4rem 2rem rgba(255, 193, 7, 0.2) inset,
+                0 0 1rem 0rem rgba(255, 193, 7, 0.4),
+                0 0 2rem 0rem rgba(255, 193, 7, 0.2),
+                0 0 4rem 0rem rgba(255, 193, 7, 0.1) !important;
+        }
+
+        converse-muc-sidebar {
+            box-shadow: 0 0 1rem 1rem rgba(255, 193, 7, 0.1) inset !important;
+        }
+
+        .chat-toolbar {
+            box-shadow:
+                0 0 0.5rem rgba(255, 193, 7, 0.4),
+                0 0 2rem rgba(255, 193, 7, 0.2),
+                0 0 4rem rgba(255, 193, 7, 0.1) !important;
+        }
+    }
+
+    .moving-grid {
+        position: absolute;
+        top: 42%;
+        left: 0;
+        width: 100%;
+        height: 70%;
+        perspective: 1000px;
+        &:before {
+            content: '';
+            position: absolute;
+            top: 4rem;
+            width: 100%;
+            height: 0;
+            box-shadow:
+                0 0 1rem 0.5rem rgba(255, 255, 255, 0.5),
+                0 0 2rem 0rem rgba(234, 57, 184, 0.3),
+                0 0 4rem 2rem rgba(234, 57, 184, 0.1) !important;
+        }
+        .container {
+            position: relative;
+            width: 100%;
+            height: 300%;
+            border: 2px solid pink;
+            box-sizing: border-box;
+            transform-origin: top;
+            transform: rotateX(57deg) translateY(10%);
+            overflow: hidden;
+            .static-lines {
+                display: inline-block;
+                width: 100%;
+                height: 100%;
+                .vert {
+                    display: inline-block;
+                    height: 100%;
+                    width: 2px;
+                    background-color: pink;
+                    margin-left: 4.5%;
+                    box-shadow: 0 2px 21px pink;
+                }
+            }
+            .moving-lines {
+                position: absolute;
+                top: 0;
+                left: 0;
+                width: 100%;
+                height: 300%;
+                .horz {
+                    display: inline-block;
+                    width: 100%;
+                    height: 3px;
+                    margin-top: 4.8%;
+                    background-color: pink;
+                    box-shadow: 2px 0 21px pink;
+                    animation: lines 15000ms linear infinite;
+                }
+            }
+        }
+    }
+
+    @keyframes lines {
+        from {
+            transform: translateY(-65px);
+        }
+        to {
+            transform: translateY(65px);
+        }
+    }
 }

src/shared/styles/themes/dracula.scss

@@ -3,150 +3,71 @@
     $theme: 'dracula' !default;
 
     // Hex color values
-    --background: #282a36;
-    --comment: #6272a4;
-    --current-line: #44475a;
+    // ----------------
     --cyan: #8be9fd;
-    --foreground: #f8f8f2;
     --green: #50fa7b;
     --orange: #ffb86c;
     --pink: #ff79c6;
     --purple: #bd93f9;
     --red: #ff5555;
     --yellow: #f1fa8c;
+    --gray: #6272a4;
+    --darkgray: #212529;
 
-    // RGB color values, needed for bootstrap
-    --background-rgb: 40, 42, 54;
-    --comment-rgb: 98, 114, 164;
-    --current-line-rgb: 68, 71, 90;
-    --cyan-rgb: 139, 233, 253;
-    --foreground-rgb: 248, 248, 242;
-    --green-rgb: 80, 250, 123;
-    --orange-rgb: 255, 184, 108;
-    --pink-rgb: 255, 121, 198;
-    --purple-rgb: 189, 147, 249;
-    --red-rgb: 255, 85, 85;
-    --yellow-rgb: 241, 250, 140;
+    // Base variables
+    // --------------
+    --background-color: #282a36;
+    --foreground-color: #f8f8f2;
 
-    // Bootstrap variables
-    --converse-primary-rgb: var(--purple-rgb);
-    --converse-secondary-rgb: var(--cyan-rgb);
+    // Common bootstrap variables
+    --primary-color: var(--purple) !important;
+    --secondary-color: var(--pink) !important;
+    --success-color: var(--green);
+    --danger-color: var(--pink);
+    --warning-color: var(--orange);
+    --info-color: var(--yellow);
 
-    // Common variables
-    --badge-color: var(--background);
-    --brand-heading-color: var(--cyan);
-    --button-hover-text-color: var(--background);
-    --button-text-color: var(--background);
-    --chat-background-color: var(--background);
-    --chat-color: var(--green);
-    --chat-content-background-color: var(--background);
-    --chat-correcting-color: var(--comment);
-    --chat-head-border-bottom: 0.15em solid var(--chat-color);
-    --chat-head-color-dark: var(--chat-color);
-    --chat-head-color-darker: var(--chat-color);
-    --chat-head-color: var(--background);
-    --chat-head-fg-color: var(--chat-color);
-    --chat-head-text-color: var(--chat-color);
-    --chat-info-color: var(--orange);
-    --chat-msg-hover-color: var(--current-line);
-    --chat-msg-quote-color: var(--heading-color);
-    --chat-separator-border-bottom: 2px solid var(--chat-color);
+    // Online status indicators
     --chat-status-away: var(--orange);
     --chat-status-busy: var(--red);
+    --chat-status-offline: gray;
     --chat-status-online: var(--green);
-    --chat-textarea-background-color: var(--background);
-    --chat-textarea-color: var(--foreground);
-    --chat-textarea-disabled-bg-color: var(--disabled-color);
-    --chat-toolbar-btn-color: var(--chat-color);
-    --chat-toolbar-btn-color: var(--green);
-    --chatbox-message-input-border-top: 0.15em solid var(--chat-color);
-    --chatroom-correcting-color: var(--comment);
-    --chatroom-head-bg-color-dark: var(--muc-color);
-    --chatroom-head-bg-color: var(--background);
-    --chatroom-head-border-bottom: 0.15em solid var(--muc-color);
-    --chatroom-head-color: var(--muc-color);
-    --chatroom-head-description-link-color: var(--link-color);
-    --chatroom-head-fg-color: var(--muc-color);
-    --chatroom-message-input-border-top: 0.15em solid var(--muc-color);
-    --chatroom-separator-border-bottom: 0.15em solid var(--muc-color);
-    --close-color-hover: var(--purple);
-    --close-color: var(--foreground);
-    --completion-dark-color: var(--current-line);
-    --completion-light-color: var(--pink);
-    --completion-normal-color: var(--red);
-    --controlbox-head-color: var(--purple);
-    --controlbox-pane-background-color: var(--background);
-    --controlbox-pane-bg-hover-color: var(--list-item-hover-color);
-    --controlbox-text-color: var(--foreground);
-    --danger-color-dark: var(--pink);
-    --danger-color: var(--pink);
-    --dark-link-color: var(--cyan);
-    --disabled-color-bg: lightgray;
-    --disabled-color: var(--comment);
-    --error-color: var(--red);
+
+    --controlbox-color: var(--purple);
+    --disabled-color: var(--secondary-color);
     --error-color: var(--red);
     --focus-color: var(--pink);
-    --global-background-color: var(--background);
-    --gray-color: var(--current-line);
-    --groupchats-header-color-dark: var(--muc-color);
-    --groupchats-header-color: var(--muc-color);
-    --header-color: var(--pink);
     --heading-color: var(--purple);
-    --headline-message-color: var(--headlines-color);
-    --headline-separator-border-bottom: 2px solid var(--headlines-color);
     --headlines-color: var(--pink);
-    --headlines-head-bg-color: var(--background);
-    --headlines-head-border-bottom: 0.15em solid var(--headlines-color);
-    --headlines-head-fg-color: var(--headlines-color);
-    --headlines-head-text-color: var(--headlines-color);
-    --highlight-color-darker: var(--comment);
-    --highlight-color: var(--background);
-    --icon-hover-color: var(--cyan);
-    --img-thumbnail-background-color: var(--comment);
-    --img-thumbnail-border-color: black;
-    --info-color: var(--yellow);
-    --inverse-link-color: var(--foreground);
-    --light-background-color: var(--background);
     --link-color: var(--cyan);
-    --link-hover-color: var(--green);
-    --list-dot-circle-color: var(--orange);
-    --list-group-item-bg-color: var(--comment);
-    --list-item-action-color: var(--comment);
-    --list-item-action-hover-color: var(--cyan);
-    --list-item-hover-color: var(--current-line);
-    --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(--current-line);
-    --list-toggle-color: var(--comment);
-    --list-toggle-hover-color: var(--comment);
-    --message-author-color: var(--purple);
-    --message-receipt-color: var(--green);
-    --message-text-color: var(--foreground);
-    --modal-background-color: var(--background);
+
+    // The background when selecting text with your mouse
+    --selection-color: black;
+
+    // Used to indicate selected or open items in lists.
+    --highlight-color: var(--gray);
+    --highlight-color-hover: var(--darkgray);
+
+    // 1:1 Chat-related colors
+    --chat-color: var(--green);
+    --chat-header-fg-color: var(--chat-color);
+    --chat-header-bg-color: var(--background-color);
+
+    // MUC-related colors
     --muc-color: var(--orange);
-    --muc-toolbar-btn-disabled-color: var(--disabled-color);
-    --occupants-background-color: var(--background);
-    --occupants-border-bottom: 0.15em solid var(--muc-color);
-    --occupants-border-left: 0.15em solid var(--muc-color);
-    --panel-divider-color: var(--comment);
-    --primary-color-dark: var(--purple);
-    --primary-color-light: var(--pink);
-    --primary-color: var(--purple);
-    --raised-el-shadow: 1px 1px 10px black;
-    --redder-orange: var(--muc-color);
-    --secondary-color-dark: var(--cyan);
-    --secondary-color: var(--cyan);
-    --separator-text-color: var(--message-text-color);
-    --subdued-color: var(--comment);
-    --text-color-invert: var(--background);
-    --text-color: var(--foreground);
-    --toolbar-btn-text-color: var(--background);
-    --unread-msgs-color: var(--yellow);
-    --warning-color-dark: var(--orange);
-    --warning-color: var(--orange);
+    --muc-header-fg-color: var(--muc-color);
+    --muc-header-bg-color: var(--background-color);
 
-    .card {
-        --converse-card-border-color: var(--comment);
-    }
+    // Derived colors
+    // --------------
+    --brand-heading-color: var(--cyan);
+    --chat-color-hover: var(--chat-color);
+    --danger-color-hover: var(--danger-color);
+    --global-background-color: var(--background-color);
+    --link-color-hover: var(--link-color);
+    --muc-color-hover: var(--muc-color);
+    --primary-color-hover: var(--purple);
+    --secondary-color-hover: var(--secondary-color);
+    --success-color-hover: var(--success);
+    --warning-color-hover: var(--orange);
 }