Invert dark favicons (Croydon#114)

mmktomato · Dec 16, 2018 · 2fc0bd2 · 2fc0bd2
1 parent fcc44d4
commit 2fc0bd2
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 1 deletion.
diff --git a/data/theme/base.css b/data/theme/base.css
@@ -182,3 +182,7 @@ body
     image-rendering: -moz-crisp-edges;
   }
 }
+
+.invert {
+    filter: invert(1);
+}
diff --git a/lib/fast-average-color-4.2.0.min.js b/lib/fast-average-color-4.2.0.min.js
diff --git a/sidebar.js b/sidebar.js
@@ -367,7 +367,21 @@ let VerticalTabsReloaded = class VerticalTabsReloaded
 
                 if(tabElement.getAttribute("status") != "loading")
                 {
-                    document.getElementById("tab-icon-" + tabID).setAttribute("src", value);
+                    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) => {
+                            if(color.isDark)
+                            {
+                                imgEl.classList.add("invert");
+                            }
+                            fac.destroy();
+                        });
+                    }
                 }
 
                 log.debug("status: " + tabElement.getAttribute("status"));

diff --git a/vtr.html b/vtr.html
@@ -45,6 +45,7 @@
 
     <script src="lib/browser-polyfill.js"></script>
     <script src="lib/arrive.js"></script>
+    <script src="lib/fast-average-color-4.2.0.min.js"></script>
     <script src="utils/namespace-sidebar.js"></script>
     <script src="utils/log.js"></script>
     <script src="utils/options.js"></script>