Rename theme to `concord` and add config option for setting the theme

CHANGES.md

@@ -6,6 +6,7 @@
 - Default paths in converse-notifications.js are now relative
 - Add a button to regenerate OMEMO keys
 - Add client info modal which shows Converse's version number
+- New config setting [theme](https://conversejs.org/docs/html/configuration.html#theme)
 - #141 XEP-0184: Message Delivery Receipts
 - #1033 Setting show_send_button to true didn't work
 - #1188 Feature request: drag and drop file to HTTP Upload

css/converse.css

@@ -9413,7 +9413,7 @@ readers do not read off random characters that represent icons */
   --list-minus-circle-color: #f0a794;
   --list-dot-circle-color: #f6dec1; }
 
-#conversejs.theme-dark {
+#conversejs.theme-concord {
   --avatar-border-radius: 100%;
   --avatar-border: 0px;
   --avatar-background-color: none;

dist/converse.js

@@ -58506,7 +58506,9 @@ __webpack_require__.r(__webpack_exports__);
 
 const _converse$env = _converse_headless_converse_core__WEBPACK_IMPORTED_MODULE_3__["default"].env,
       Backbone = _converse$env.Backbone,
-      _ = _converse$env._;
+      _ = _converse$env._,
+      utils = _converse$env.utils;
+const u = utils;
 const AvatarMixin = {
   renderAvatar(el) {
     el = el || this.el;
@@ -58566,7 +58568,15 @@ _converse_headless_converse_core__WEBPACK_IMPORTED_MODULE_3__["default"].plugins
     const _converse = this._converse,
           __ = _converse.__;
 
-    _converse.api.promises.add(['chatBoxViewsInitialized']);
+    _converse.api.promises.add(['chatBoxViewsInitialized']); // Configuration values for this plugin
+    // ====================================
+    // Refer to docs/source/configuration.rst for explanations of these
+    // configuration settings.
+
+
+    _converse.api.settings.update({
+      'theme': 'default'
+    });
 
     _converse.ViewWithAvatar = Backbone.NativeView.extend(AvatarMixin);
     _converse.VDOMViewWithAvatar = Backbone.VDOMView.extend(AvatarMixin);
@@ -58581,6 +58591,7 @@ _converse_headless_converse_core__WEBPACK_IMPORTED_MODULE_3__["default"].plugins
           if (_.isNull(el)) {
             el = document.createElement('div');
             el.setAttribute('id', 'conversejs');
+            u.addClass(`theme-${_converse.theme}`, el);
 
             const body = _converse.root.querySelector('body');
 

docs/source/configuration.rst

@@ -1379,6 +1379,16 @@ If set to ``false``, this feature is disabled.
 
 If set to ``a resource name``, Converse will synchronize only with a client that has that particular resource assigned to it.
 
+theme
+-----
+
+* Default: ``default``
+
+Valid options: ``default``, ``concord``
+
+Let's you set a color theme for Converse.
+
+
 trusted
 -------
 

sass/_variables.scss

@@ -173,7 +173,7 @@ $font-path: "webfonts/icomoon/fonts/" !default;
     --list-dot-circle-color: #f6dec1; // lighten($orange, 25%)
 }
 
-#conversejs.theme-dark {
+#conversejs.theme-concord {
     --avatar-border-radius: 100%;
     --avatar-border: 0px;
     --avatar-background-color: none;

src/converse-chatboxviews.js

@@ -10,7 +10,8 @@ import "backbone.overview";
 import converse from "@converse/headless/converse-core";
 import tpl_chatboxes from "templates/chatboxes.html";
 
-const { Backbone, _ } = converse.env;
+const { Backbone, _, utils } = converse.env;
+const u = utils;
 
 const AvatarMixin = {
 
@@ -74,6 +75,14 @@ converse.plugins.add('converse-chatboxviews', {
             'chatBoxViewsInitialized'
         ]);
 
+        // Configuration values for this plugin
+        // ====================================
+        // Refer to docs/source/configuration.rst for explanations of these
+        // configuration settings.
+        _converse.api.settings.update({
+            'theme': 'default',
+        });
+
         _converse.ViewWithAvatar = Backbone.NativeView.extend(AvatarMixin);
         _converse.VDOMViewWithAvatar = Backbone.VDOMView.extend(AvatarMixin);
 
@@ -89,6 +98,7 @@ converse.plugins.add('converse-chatboxviews', {
                     if (_.isNull(el)) {
                         el = document.createElement('div');
                         el.setAttribute('id', 'conversejs');
+                        u.addClass(`theme-${_converse.theme}`, el);
                         const body = _converse.root.querySelector('body');
                         if (body) {
                             body.appendChild(el);