Replaced theme switch symbol with an img

content.js

@@ -11,6 +11,15 @@ document.addEventListener("scroll", function() {
 });
 
 /* #### Dark/Night theme on desktop #### */
+const low_brightness = function() {
+    if (typeof(browser) == "undefined") { return chrome.runtime.getURL("icons/low-brightness-symbol.png"); }
+    else { return chrome.runtime.getURL("icons/low-brightness-symbol.png"); }
+}();
+const high_brightness = function(){
+    if (typeof(browser) == "undefined") { return chrome.runtime.getURL("icons/high-brightness-symbol.png"); }
+    else { return chrome.runtime.getURL("icons/high-brightness-symbol.png"); }
+}();
+
 document.addEventListener("DOMContentLoaded", function() {
     // Code to inject into the site; triggers the body observer
     const switch_function_trigger = 'function switch_theme_trigger() { let trigger = document.createElement("div"); trigger.id = "switch_theme_trigger"; let stylesheet = document.getElementById("dark-theme"); if (stylesheet) { trigger.setAttribute("data-switch-to", "reset"); } else { trigger.setAttribute("data-switch-to", "to_dark"); } document.body.append(trigger); }';
@@ -21,22 +30,24 @@ document.addEventListener("DOMContentLoaded", function() {
     document.body.appendChild(switch_function_tag);
 
     // Create the switch button
-    var theme_switch = document.createElement("a");
-    theme_switch.id = "theme-switch";
-    theme_switch.style = "display:block; height:30px; width:30px; float:left; font-size:16pt;";
-    theme_switch.setAttribute("onclick", "switch_theme_trigger()");
-    theme_switch.href= "javascript:void(0)";
-    theme_switch.innerText = "🔅";
+    var theme_switch_img = document.createElement("img");
+    theme_switch_img.style = "height:30px; width:30px;";
+    theme_switch_img.src = low_brightness;
+    var theme_switch_a = document.createElement("a");
+    theme_switch_a.id = "theme-switch";
+    theme_switch_a.style = "display:block; height:30px; width:30px; float:left;";
+    theme_switch_a.setAttribute("onclick", "switch_theme_trigger()");
+    theme_switch_a.href= "javascript:void(0)";
+    theme_switch_a.append(theme_switch_img);
     var theme_switch_wrap = document.createElement("div");
     theme_switch_wrap.classList.add("general-function");
     theme_switch_wrap.style = "text-align:center; line-height:30px; margin-right:10px;";
-    theme_switch_wrap.appendChild(theme_switch);
+    theme_switch_wrap.appendChild(theme_switch_a);
     // ... and add it to the site (in the header, next to the search)
     var wrapper = document.getElementsByClassName("function-wrap")[0];
     wrapper.insertBefore(theme_switch_wrap, wrapper.childNodes[0]);
 });
 
-const low_brightness = "🔅"; const high_brightness = "🔆";
 // Actual function to switch the theme; is run by the body observer
 function switch_theme(target) {
     var theme_switch = document.getElementById("theme-switch");
@@ -46,7 +57,7 @@ function switch_theme(target) {
         // remove the dark stylesheet (if present) and change the switch icon
         if (stylesheet) {
             stylesheet.parentNode.removeChild(stylesheet);
-            theme_switch.innerText = low_brightness;
+            theme_switch.firstChild.src = low_brightness;
         }
         // finally save the state in extension storage
         if (typeof(browser) == "undefined") { chrome.storage.local.set({gag_is_dark: false}); }
@@ -64,7 +75,7 @@ function switch_theme(target) {
             stylesheet.setAttribute("rel", "stylesheet");
             stylesheet.setAttribute("type", "text/css");
             document.getElementsByTagName("head")[0].appendChild(stylesheet);
-            theme_switch.innerText = high_brightness;
+            theme_switch.firstChild.src = high_brightness;
         }
         // finally save the state in extension storage
         if (typeof(browser) == "undefined") { chrome.storage.local.set({gag_is_dark: true}); }

manifest.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 2,
   "name": "Better 9gag",
-  "version": "1.5",
+  "version": "1.5.1",
   "author": "Fabian Große",
   "homepage_url": "https://github.com/Saphareas/Better-9gag",
 
@@ -23,7 +23,10 @@
     }
   ],
 
-  "web_accessible_resources": ["darken_9gag.css"],
+  "web_accessible_resources": [
+    "darken_9gag.css",
+    "icons/low-brightness-symbol.png",
+    "icons/high-brightness-symbol.png"],
 
   "permissions": ["storage"]
 }