Inverted favicons: Don't hardcode dark themes (#114)

Give the themes the opportunity to react on dark/light favicons as they want + remove tab-icon-image-dark class when it is not anylonger the case
Croydon · Dec 17, 2018 · dda4587 · dda4587
1 parent e901efc
commit dda4587
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 19 deletions.
diff --git a/data/theme/base.css b/data/theme/base.css
@@ -90,6 +90,8 @@ body
     max-height: 22px;
 }
 
+/* Placeholder: .tab-icon-image-light .tab-icon-image-dark */
+
 /* FIXME: This works natively in FF but not here?
 .tab-icon-image[src*="data/chrome/icon/"] {
     -moz-context-properties: fill !important;
@@ -145,7 +147,3 @@ body[data-tab-buttons-position="right"] .tabbrowser-tab .tab-buttons .tab-close-
     image-rendering: -moz-crisp-edges;
   }
 }
-
-.invert {
-    filter: invert(1);
-}
diff --git a/data/theme/dark/modifications.css b/data/theme/dark/modifications.css
@@ -1 +1,3 @@
-/* No modifications so far */
+.tab-icon-image-dark {
+    filter: invert(1);
+}
diff --git a/data/theme/darwin/modifications.css b/data/theme/darwin/modifications.css
@@ -1,5 +1,3 @@
-/* No modifications so far */
-
 
 /*
 .tab-icon-sound {
@@ -19,6 +17,9 @@
     /*opacity: 0.7;   turn black into #b9b9b9
 }*/
 
+.tab-icon-image-dark {
+    filter: invert(1);
+}
 
 .tab-close-button:active {
      opacity: 0.75;   /* turn black into #8a8a8a */

diff --git a/sidebar.js b/sidebar.js
@@ -1,6 +1,6 @@
 "use strict";
 
-/* global utils log */
+/* global utils log FastAverageColor */
 
 let options = utils.options; // FIXME: Why can't this be for private windows within namespace-sidebar.js?
 
@@ -362,18 +362,22 @@ let VerticalTabsReloaded = class VerticalTabsReloaded
                     const imgEl = document.getElementById("tab-icon-" + tabID);
                     imgEl.setAttribute("src", value);
 
-                    const theme = this.preferences("theme");
-                    if(theme === "dark" || theme === "darwin")
+                    const fac = new FastAverageColor();
+                    fac.getColorAsync(imgEl, (color) =>
                     {
-                        const fac = new FastAverageColor();
-                        fac.getColorAsync(imgEl, (color) => {
-                            if(color.isDark)
-                            {
-                                imgEl.classList.add("invert");
-                            }
-                            fac.destroy();
-                        });
-                    }
+                        if(color.isDark)
+                        {
+                            imgEl.classList.remove("tab-icon-image-light");
+                            imgEl.classList.add("tab-icon-image-dark");
+                        }
+                        else
+                        {
+                            imgEl.classList.remove("tab-icon-image-dark");
+                            imgEl.classList.add("tab-icon-image-light");
+                        }
+                        log.debug(color);
+                        fac.destroy();
+                    });
                 }
 
                 log.debug("status: " + tabElement.getAttribute("status"));