From 546b062d824a5c5e52a75543bb771a6fdc3810a4 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Wed, 15 Nov 2017 01:45:51 +0000
Subject: [PATCH] automatically and correctly retint when changing theme

---
 src/Tinter.js                           | 31 +++++++++++++++++++++----
 src/components/structures/MatrixChat.js | 10 --------
 2 files changed, 26 insertions(+), 15 deletions(-)

diff --git a/src/Tinter.js b/src/Tinter.js
index 11dea0170f..f2a02b6e6d 100644
--- a/src/Tinter.js
+++ b/src/Tinter.js
@@ -74,7 +74,7 @@ class Tinter {
             "#FFFFFF", // white highlights of the SVGs (for switching to dark theme)
         ];
 
-        // cache of our replacement colours
+        // track the replacement colours actually being used
         // defaults to our keys.
         this.colors = [
             this.keyHex[0],
@@ -83,6 +83,15 @@ class Tinter {
             this.keyHex[3],
         ];
 
+        // track the most current tint request inputs (which may differ from the
+        // end result stored in this.colors
+        this.currentTint = [
+            undefined,
+            undefined,
+            undefined,
+            undefined,
+        ];
+
         this.cssFixups = [
             // { theme: {
             //      style: a style object that should be fixed up taken from a stylesheet
@@ -136,11 +145,11 @@ class Tinter {
         return this.keyRgb;
     }
 
-    getCurrentColors() {
-        return this.colors;
-    }
-
     tint(primaryColor, secondaryColor, tertiaryColor) {
+        this.currentTint[0] = primaryColor;
+        this.currentTint[1] = secondaryColor;
+        this.currentTint[2] = tertiaryColor;
+
         this.calcCssFixups();
 
         if (DEBUG) console.log("Tinter.tint(" + primaryColor + ", " +
@@ -200,6 +209,8 @@ class Tinter {
     }
 
     tintSvgWhite(whiteColor) {
+        this.currentTint[3] = whiteColor;
+
         if (!whiteColor) {
             whiteColor = this.colors[3];
         }
@@ -234,6 +245,16 @@ class Tinter {
 
         this.calcCssFixups();
         this.forceTint = true;
+
+        this.tint(this.currentTint[0], this.currentTint[1], this.currentTint[2]);
+
+        if (theme === 'dark') {
+            // abuse the tinter to change all the SVG's #fff to #2d2d2d
+            // XXX: obviously this shouldn't be hardcoded here.
+            this.tintSvgWhite('#2d2d2d');
+        } else {
+            this.tintSvgWhite('#ffffff');
+        }
     }
 
     calcCssFixups() {
diff --git a/src/components/structures/MatrixChat.js b/src/components/structures/MatrixChat.js
index f287ff27af..7847e8e8dc 100644
--- a/src/components/structures/MatrixChat.js
+++ b/src/components/structures/MatrixChat.js
@@ -922,13 +922,11 @@ module.exports = React.createClass({
         styleElements[theme].disabled = false;
 
         const switchTheme = function() {
-            const colors = Tinter.getCurrentColors();
             Object.values(styleElements).forEach((a) => {
                 if (a == styleElements[theme]) return;
                 a.disabled = true;
             });
             Tinter.setTheme(theme);
-            Tinter.tint(colors[0], colors[1]);
         };
 
         // turns out that Firefox preloads the CSS for link elements with
@@ -952,14 +950,6 @@ module.exports = React.createClass({
             styleElements[theme].onload = undefined;
             switchTheme();
         }
-
-        if (theme === 'dark') {
-            // abuse the tinter to change all the SVG's #fff to #2d2d2d
-            // XXX: obviously this shouldn't be hardcoded here.
-            Tinter.tintSvgWhite('#2d2d2d');
-        } else {
-            Tinter.tintSvgWhite('#ffffff');
-        }
     },
 
     /**