From 352c0797ad4310dfc4df33eddb6e75998f75ef44 Mon Sep 17 00:00:00 2001
From: JC Brand <jc@opkode.com>
Date: Wed, 14 Nov 2018 15:56:28 +0100
Subject: [PATCH] Rename theme to `concord` and add config option for setting
 the theme

---
 CHANGES.md                    |  1 +
 css/converse.css              |  2 +-
 dist/converse.js              | 15 +++++++++++++--
 docs/source/configuration.rst | 10 ++++++++++
 sass/_variables.scss          |  2 +-
 src/converse-chatboxviews.js  | 12 +++++++++++-
 6 files changed, 37 insertions(+), 5 deletions(-)

diff --git a/CHANGES.md b/CHANGES.md
index 08e2b3b77..0ae78aa69 100644
--- a/CHANGES.md
+++ b/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
diff --git a/css/converse.css b/css/converse.css
index e64242f70..c05f0def6 100644
--- a/css/converse.css
+++ b/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;
diff --git a/dist/converse.js b/dist/converse.js
index b7625e32b..84b818817 100644
--- a/dist/converse.js
+++ b/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');
 
diff --git a/docs/source/configuration.rst b/docs/source/configuration.rst
index daf0f4c31..d206e09e2 100644
--- a/docs/source/configuration.rst
+++ b/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
 -------
 
diff --git a/sass/_variables.scss b/sass/_variables.scss
index 293c0f40a..58c9c1d9f 100644
--- a/sass/_variables.scss
+++ b/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;
diff --git a/src/converse-chatboxviews.js b/src/converse-chatboxviews.js
index 267069be2..c5dbdf548 100644
--- a/src/converse-chatboxviews.js
+++ b/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);