Added theme for browser action popup

First draft for #232.

_locales/de/messages.json

@@ -773,6 +773,27 @@
 		"description": ""
 	},
 	
+	"theme_title": {
+		"message": "Theme",
+		"description": ""
+	},
+	"theme_description": {
+		"message": "",
+		"description": ""
+	},
+	"theme_options.default": {
+		"message": "Standard",
+		"description": ""
+	},
+	"theme_options.light": {
+		"message": "hell",
+		"description": ""
+	},
+	"theme_options.dark": {
+		"message": "dunkel",
+		"description": ""
+	},
+	
 	"blockDataURLs_title": {
 		"message": "Data-URL Seiten blockieren",
 		"description": ""

_locales/en/messages.json

@@ -773,6 +773,27 @@
 		"description": ""
 	},
 	
+	"theme_title": {
+		"message": "Theme",
+		"description": ""
+	},
+	"theme_description": {
+		"message": "",
+		"description": ""
+	},
+	"theme_options.default": {
+		"message": "default",
+		"description": ""
+	},
+	"theme_options.light": {
+		"message": "light",
+		"description": ""
+	},
+	"theme_options.dark": {
+		"message": "dark",
+		"description": ""
+	},
+	
 	"blockDataURLs_title": {
 		"message": "Block data URL pages",
 		"description": ""

browserAction/browserAction-dark.css

@@ -0,0 +1,12 @@
+body {
+	background-color: rgb(74, 74, 79);
+	color: rgb(249, 249, 250);
+}
+
+.action {
+	border-color: rgb(92, 92, 97);
+}
+
+.action:active, .action:hover, .action:focus {
+	background-color: rgb(92, 92, 97);
+}

browserAction/browserAction-default.css

@@ -0,0 +1,12 @@
+body {
+	color: rgb(60, 62, 60);
+	background-color: rgb(249, 250, 249);
+}
+
+.action {
+	border-color: rgb(190, 190, 190);
+}
+
+.action:active, .action:hover, .action:focus {
+	background-color: rgb(185, 185, 185);
+}

browserAction/browserAction-light.css

@@ -0,0 +1,12 @@
+body {
+	color: rgb(12, 12, 13);
+	background-color: rgb(255, 255, 255);
+}
+
+.action {
+	border-color: rgb(222, 222, 222);
+}
+
+.action:active, .action:hover, .action:focus {
+	background-color: rgb(240, 240, 240);
+}

browserAction/browserAction.css

@@ -1,5 +1,6 @@
 body {
-	padding: 1em;
+	padding: 0.5em;
+	margin: 0;
 }
 
 div {
@@ -9,8 +10,8 @@ div {
 .action {
 	display: block;
 	padding: 0.5em;
-	background-color: white;
-	border: 1px solid #e0e0e0;
+	background-color: transparent;
+	border: 1px solid currentColor;
 	cursor: pointer;
 	width: 100%;
 	text-align: left;
@@ -18,7 +19,7 @@ div {
 	z-index: 1;
 	position: relative;
 	white-space: nowrap;
-	color: #505050;
+	color: currentColor;
 }
 
 .action + .action {
@@ -35,11 +36,14 @@ div {
 
 .action:active, .action:hover, .action:focus {
 	z-index: 10;
-	background-color: #eaeaea;
 }
 
-.action img {
+.action .icon {
 	vertical-align: text-bottom;
-	max-height: 19px;
+	height: 19px;
+	width: 19px;
 	margin-right: 0.25em;
+	background-color: currentColor;
+	mask-size: 100%;
+	display: inline-block;
 }

browserAction/browserAction.js

@@ -9,6 +9,16 @@
 	logging.message("Opened browser action");
 	
 	settings.onloaded(function(){
+		// load theme
+		var themeLink = document.createElement("link");
+		themeLink.href = `browserAction-${settings.theme}.css`;
+		themeLink.rel = "stylesheet";
+		themeLink.type = "text/css";
+		document.head.appendChild(themeLink);
+		settings.on("theme", function(){
+			themeLink.href = `browserAction-${settings.theme}.css`;
+		});
+		
 		var actions = document.getElementById("actions");
 		
 		[
@@ -55,8 +65,9 @@
 			var actionButton = document.createElement("button");
 			actionButton.className = "action";
 			
-			var icon = document.createElement("img");
-			icon.src = action.icon;
+			var icon = document.createElement("span");
+			icon.className = "icon";
+			icon.style.maskImage = "url(" + action.icon + ")";
 			
 			actionButton.appendChild(icon);
 			

releaseNotes.txt

@@ -8,6 +8,7 @@ Version 0.5.3:
 		- added option "Don't show again on update." for options page
 		- added option to highlight page action icon
 		- added option to control browser action icon on notifications
+		- added theme for browser action popup
 	
 	fixes:
 		- CSP did not work properly for worker-src