Rework handling of icons and tinting of external icons

script.js

@@ -87,6 +87,34 @@ jQuery(function(){
         this.blur();
     });
 
+    // make edit toolbar icons themeable by converting img icons to CSS masks
+    (function enhanceEditToolbarIcons() {
+        function toMaskIcons() {
+            jQuery('.dokuwiki #tool__bar button.toolbutton img').each(function () {
+                var $img = jQuery(this);
+                var src = $img.attr('src');
+
+                if (!src) {
+                    return;
+                }
+
+                var $icon = jQuery('<span/>', {
+                    'class': 'toolicon',
+                    'aria-hidden': 'true'
+                });
+                $icon[0].style.setProperty('--icon-url', 'url("' + src.replace(/"/g, '\\"') + '")');
+                $img.replaceWith($icon);
+            });
+        }
+
+        toMaskIcons();
+
+        var toolbar = document.getElementById('tool__bar');
+        if (toolbar && window.MutationObserver) {
+            new MutationObserver(toMaskIcons).observe(toolbar, {childList: true, subtree: true});
+        }
+    }());
+
     // enhance header search with suggestions and keyboard navigation
     (function enhanceSearch(){
         var $input = jQuery('#qsearch__in');