Merge branch 'master' into WhitelistAPISpecific

.vscode/settings.json

@@ -22,8 +22,10 @@
 		"Waterfox",
 		"benachrichtigungsicon",
 		"collapser",
+		"dont",
 		"fakeable",
 		"fragmenter",
+		"graytext",
 		"ignorelist",
 		"micrococo",
 		"monero",

_locales/de/messages.json

@@ -1044,7 +1044,11 @@
 		"description": ""
 	},
 	"theme_description": {
-		"message": "",
+		"message": "Das automatische Theme schaltet auf dunkel, wenn das System auch ein dunkles Theme verwendet (benötigt Firefox >= 67).",
+		"description": ""
+	},
+	"theme_options.auto": {
+		"message": "automatisch",
 		"description": ""
 	},
 	"theme_options.default": {
@@ -1059,6 +1063,14 @@
 		"message": "dunkel",
 		"description": ""
 	},
+	"theme_options.colorful": {
+		"message": "farbenfroh",
+		"description": ""
+	},
+	"theme_options.none": {
+		"message": "keines",
+		"description": ""
+	},
 	"blockDataURLs_title": {
 		"message": "Data-URL Seiten blockieren",
 		"description": ""

_locales/en/messages.json

@@ -1091,7 +1091,11 @@
 		"description": ""
 	},
 	"theme_description": {
-		"message": "",
+		"message": "The automatic theme switches to dark if the system uses a dark theme (requires Firefox >= 67)",
+		"description": ""
+	},
+	"theme_options.auto": {
+		"message": "automatic",
 		"description": ""
 	},
 	"theme_options.default": {
@@ -1106,6 +1110,14 @@
 		"message": "dark",
 		"description": ""
 	},
+	"theme_options.colorful": {
+		"message": "colorful",
+		"description": ""
+	},
+	"theme_options.none": {
+		"message": "none",
+		"description": ""
+	},
 	
 	"blockDataURLs_title": {
 		"message": "Block data URL pages",

browserAction/browserAction.css

@@ -10,7 +10,9 @@ div {
 .action {
 	display: block;
 	padding: 0.5em;
+	margin: 0;
 	background-color: transparent;
+	background-image: none;
 	border: 1px solid currentColor;
 	cursor: pointer;
 	width: 100%;

browserAction/browserAction.html

@@ -13,6 +13,7 @@
         <script src="../lib/settingDefinitions.js"></script>
         <script src="../lib/settingContainers.js"></script>
         <script src="../lib/settings.js"></script>
+        <script src="../lib/theme.js"></script>
 		<script src="browserAction.js"></script>
 	</body>
 </html>

browserAction/browserAction.js

@@ -7,19 +7,10 @@
 	const extension = require("../lib/extension");
 	const logging = require("../lib/logging");
 	const settings = require("../lib/settings");
+	require("../lib/theme").init("browserAction");
 	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");
 		
 		[

lib/settingDefinitions.js

@@ -326,8 +326,8 @@
 		},
 		{
 			name: "theme",
-			defaultValue: "default",
-			options: ["default", "light", "dark"]
+			defaultValue: "auto",
+			options: ["auto", "default", "light", "dark", "colorful"/*, "none"*/]
 		},
 		{
 			name: "dontShowOptionsOnUpdate",

lib/theme.js

@@ -0,0 +1,68 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+(function(){
+	"use strict";
+	
+	let scope;
+	if ((typeof exports) !== "undefined"){
+		scope = exports;
+	}
+	else {
+		scope = require.register("./theme", {});
+	}
+	
+	const settings = require("./settings");
+	
+	scope.init = function(page){
+		const basePath = browser.extension.getURL("themes");
+		
+		var baseLink = document.createElement("link");
+		baseLink.href = `${basePath}/base/layout.css`;
+		baseLink.rel = "alternative";
+		baseLink.type = "text/css";
+		document.head.appendChild(baseLink);
+		const links = ["layout", page].filter(function(file){
+			return file;
+		}).map(function(file){
+			var link = document.createElement("link");
+			link.cbFile = file;
+			link.rel = "alternative";
+			link.type = "text/css";
+			document.head.appendChild(link);
+			return link;
+		});
+		
+		function setTheme(theme){
+			switch (theme){
+				case "none":
+					baseLink.rel = "alternative";
+					links.forEach(function(link){
+						link.rel = "alternative";
+					});
+					break;
+				case "auto":
+					if (window.matchMedia("(prefers-color-scheme: dark)").matches){
+						theme = "dark";
+					}
+					else {
+						theme = "default";
+					}
+					// fall through
+				default:
+					baseLink.rel = "stylesheet";
+					links.forEach(function(link){
+						link.rel = "stylesheet";
+						link.href = `${basePath}/${theme}/${link.cbFile}.css`;
+					});
+			}
+		}
+		
+		settings.onloaded(function(){
+			setTheme(settings.theme);
+			settings.on("theme", function(){
+				setTheme(settings.theme);
+			});
+		});
+	};
+}());

manifest.json

@@ -63,7 +63,7 @@
 		]
 	}],
 	"options_ui": {
-		"browser_style": true,
+		"browser_style": false,
 		"page": "options/options.html"
 	},
 	"browser_action": {

options/export.html

@@ -14,6 +14,7 @@
 		<script src="../lib/settingContainers.js"></script>
 		<script src="../lib/settingsMigration.js"></script>
 		<script src="../lib/settings.js"></script>
+		<script src="../lib/theme.js"></script>
 		<script src="export.js"></script>
 	</body>
 </html>

options/export.js

@@ -7,6 +7,7 @@
 	const settings = require("../lib/settings");
 	const logging = require("../lib/logging");
 	const settingsMigration = require("../lib/settingsMigration");
+	require("../lib/theme").init();
 	const input = document.getElementById("settings");
 	settings.onloaded(function(){
 		var data = {};

options/navigator.css

@@ -10,15 +10,7 @@
 
 .button {
 	display: inline-block;
-	border: none;
-	background-color: white;
-	border: 1px solid lightgray;
-	margin: 2px;
-	width: 7em;
-	box-sizing: border-box;
-	padding: 0.5em;
 	outline: none;
-	cursor: pointer;
 }
 .active .button {
 	border-color: red;

options/navigator.html

@@ -13,6 +13,7 @@
 		<script src="../lib/settingContainers.js"></script>
 		<script src="../lib/settings.js"></script>
 		<script src="../lib/navigator.js"></script>
+		<script src="../lib/theme.js"></script>
 		<script src="navigator.js"></script>
 	</body>
 </html>

options/navigator.js

@@ -7,6 +7,7 @@
 	const extension = require("../lib/extension");
 	const settings = require("../lib/settings");
 	const navigator = require("../lib/navigator");
+	require("../lib/theme").init();
 	
 	const title = document.createElement("h1");
 	title.className = "title";

options/options.css

@@ -9,8 +9,6 @@ header {
 header .bookmarkNotice {
 	margin: 0.5em;
 	padding: 0.5em;
-	border: 1px dotted #880000;
-	color: #880000;
 }
 
 header .bookmarkNotice .dontShowOptionsOnUpdate {
@@ -157,6 +155,7 @@ textarea {
 	padding: 0;
 	border: none;
 	background-color: transparent;
+	background-image: none;
 }
 .urlValues table .url {
 	min-width: 4em;
@@ -176,9 +175,13 @@ textarea {
 	padding: 0;
 	border: none;
 	background-color: transparent;
+	background-image: none;
 }
 .urlValues.collapsed .collapser::after {
 	content: "\25B6";
+	display: inline-block;
+	height: 100%;
+	line-height: 0;
 }
 .urlValues.expanded .collapser::after {
 	content: "\25BC";

options/options.html

@@ -15,6 +15,7 @@
 		<script src="../lib/settingsMigration.js"></script>
 		<script src="../lib/settings.js"></script>
 		<script src="../lib/search.js"></script>
+		<script src="../lib/theme.js"></script>
 		<script src="optionsGui.js"></script>
 		<script src="settingsDisplay.js"></script>
 		<script src="options.js"></script>

options/options.js

@@ -15,6 +15,7 @@
 	const settingStrings = require("../lib/settingStrings");
 	const searchParameters = new URLSearchParams(window.location.search);
 	const settingsMigration = require("../lib/settingsMigration");
+	require("./theme").init("options");
 	
 	var callbacks = {
 		openNavigatorSettings: function(){
@@ -154,7 +155,7 @@
 					dontShowAgain.appendChild(dontShowAgainInput);
 					dontShowAgain.appendChild(
 						document.createTextNode(
-							extension.getTranslation("dontShowOptionsOnUpdate")
+							" " + extension.getTranslation("dontShowOptionsOnUpdate")
 						)
 					);
 					bookmarkingNotice.appendChild(dontShowAgain);

options/optionsGui.js

@@ -108,7 +108,7 @@
 				const input = document.createElement("input");
 				input.type = "checkbox";
 				input.checked = value;
-				input.style.display = "inline";
+				input.style.display = "inline-block";
 				return input;
 			},
 			updateCallback: function(input, value){

options/sanitize.html

@@ -12,6 +12,7 @@
 		<script src="../lib/settingDefinitions.js"></script>
 		<script src="../lib/settingContainers.js"></script>
 		<script src="../lib/settings.js"></script>
+		<script src="../lib/theme.js"></script>
 		<script src="sanitationRules.js"></script>
 		<script src="sanitize.js"></script>
 	</body>

options/sanitize.js

@@ -6,6 +6,7 @@
 	
 	const extension = require("../lib/extension");
 	const settings = require("../lib/settings");
+	require("../lib/theme").init("sanitize");
 	const sanitationRules = require("./sanitationRules");
 	
 	var title = document.createElement("h1");

pageAction/pageAction.css

@@ -24,6 +24,8 @@ button.action.isIcon {
 	margin: 0;
 	line-height: 0;
 	background-color: transparent;
+	background-image: none;
+	min-width: 0;
 }
 * + button.action.isIcon {
 	margin-left: 1px;

pageAction/pageAction.html

@@ -18,6 +18,7 @@
 		<script src="../lib/settings.js"></script>
 		<script src="../lib/lists.js"></script>
 		<script src="../lib/callingStack.js"></script>
+		<script src="../lib/theme.js"></script>
 		<script src="gui.js"></script>
 		<script src="domainNotification.js"></script>
 		<script src="notification.js"></script>

pageAction/pageAction.js

@@ -14,21 +14,12 @@
 	const Notification = require("./Notification");
 	const {createActionButtons, modalPrompt, modalChoice} = require("./gui");
 	const lists = require("../lib/lists");
+	require("../lib/theme").init("pageAction");
 
 	Promise.all([
 		browser.tabs.query({active: true, currentWindow: true}),
 		settings.loaded
 	]).then(function(values){
-		// load theme
-		var themeLink = document.createElement("link");
-		themeLink.href = `pageAction-${settings.theme}.css`;
-		themeLink.rel = "stylesheet";
-		themeLink.type = "text/css";
-		document.head.appendChild(themeLink);
-		settings.on("theme", function(){
-			themeLink.href = `pageAction-${settings.theme}.css`;
-		});
-		
 		const tabs = values[0];
 		
 		notice("create global action buttons");

releaseNotes.txt

@@ -2,6 +2,7 @@ Version 0.5.9:
 	changes:
 		- code cleanup
 		- made history length threshold url specific
+		- uniform themes
 	
 	new features:
 		- added protection for navigator properties
@@ -9,6 +10,8 @@ Version 0.5.9:
 		- protection for data URLs can now be url specific
 		- changed input of lists to textarea
 		- added option to protect no part of the canvas API
+		- apply themes to all extension pages (options, page action, browser action, setting sanitation, setting inspection, navigator settings)
+		- theme for automatic detection of dark mode (only works with Firefox >= 67)
 	
 	fixes:
 		- search could show hidden settings

themes/base/layout.css

@@ -0,0 +1,65 @@
+body {
+	background-color: var(--background-color);
+	color: var(--text-color);
+	font-family: sans-serif;
+	font-size: 10pt;
+}
+
+a:link, a:visited, a:active {
+	color: var(--link-color);
+}
+
+input, textarea, select, button {
+	background-color: var(--input-background-color);
+	color: var(--text-color);
+	border-color: var(--input-background-color);
+	border-radius: 3px;
+	padding: 1px;
+}
+
+button {
+	background-image: var(--button-background-image);
+	border-radius: 0px;
+	border: 1px solid lightgray;
+	margin: 2px;
+	min-width: 7em;
+	box-sizing: border-box;
+	padding: 0.25em 0.5em;
+	cursor: pointer;
+}
+
+button:focus {
+	border-style: dotted;
+}
+
+select, input[type=checkbox]{
+	-moz-appearance: none;
+	appearance: none;
+}
+
+select {
+	background-image: url("selectArrow.svg");
+	background-position: 100% 50%;
+	background-repeat: no-repeat;
+}
+
+input[type=checkbox]{
+	margin: 1.5px;
+	width: 15px;
+	height: 15px;
+	line-height: 11px;
+	border-style: inset;
+	border-width: 2px;
+	vertical-align: middle;
+	overflow: hidden;
+}
+input[type=checkbox]:checked::before {
+	content: "\2713";
+	font-size: 100%;
+	line-height: 11px;
+	text-align: center;
+	display: inline-block;
+	height: 100%;
+	width: 100%;
+	vertical-align: top;
+}

themes/base/selectArrow.svg

@@ -0,0 +1,63 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="30"
+   height="20"
+   viewBox="0 0 7.9374998 5.2916668"
+   version="1.1"
+   id="svg8"
+   inkscape:version="0.92.4 5da689c313, 2019-01-14"
+   sodipodi:docname="selectArrow.svg">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#000000"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="3.959798"
+     inkscape:cx="-70.51922"
+     inkscape:cy="54.832316"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     inkscape:window-width="1600"
+     inkscape:window-height="841"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     units="px" />
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Ebene 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-291.70832)">
+    <path
+       style="opacity:0.5;fill:#a3a3a3;fill-opacity:1;stroke:none;stroke-width:0.5291667;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 6.359247,293.36755 -0.9594253,0.87344 -1.0588099,-0.86505 -0.712205,0.64837 1.8566551,1.51689 1.6716308,-1.52181 z"
+       id="rect817"
+       inkscape:connector-curvature="0" />
+  </g>
+</svg>

themes/colorful/browserAction.css

@@ -0,0 +1,7 @@
+.action {
+	border-color: rgb(255, 0, 255);
+}
+
+.action:active, .action:hover, .action:focus {
+	background-color: rgb(255, 196, 0);
+}

themes/colorful/layout.css

@@ -0,0 +1,7 @@
+body {
+	--background-color: rgb(218, 244, 250);
+	--input-background-color: rgb(228, 253, 169);
+	--text-color: rgb(102, 42, 34);
+	--link-color: rgb(5, 197, 188);
+	--button-background-image: linear-gradient(transparent 0%, rgba(255, 255, 255, 0.1) 100%);
+}

themes/colorful/notVisible.svg

@@ -0,0 +1,76 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="30"
+   height="20"
+   viewBox="0 0 7.9374998 5.2916668"
+   version="1.1"
+   id="svg8"
+   inkscape:version="0.92.4 5da689c313, 2019-01-14"
+   sodipodi:docname="notVisible.svg">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#000000"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="3.959798"
+     inkscape:cx="-131.24635"
+     inkscape:cy="54.832316"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     inkscape:window-width="1600"
+     inkscape:window-height="841"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     units="px" />
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Ebene 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-291.70832)">
+    <path
+       style="fill:none;stroke:#800080;stroke-width:0.07936867;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;opacity:1"
+       d="m 0.14548308,294.43593 c 2.59575882,2.03078 4.92396642,2.03973 7.67986362,-0.06 -3.6044602,-0.64366 -3.6257846,-2.34887 -7.67986362,0.06 z"
+       id="path4520"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="ccc" />
+    <ellipse
+       style="fill:#00ff00;fill-opacity:1;stroke:#00ff00;stroke-width:0.04199925;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;opacity:1"
+       id="path4522"
+       cx="4.0754137"
+       cy="294.64594"
+       rx="0.92998338"
+       ry="0.86998433" />
+    <path
+       style="opacity:1;fill:none;stroke:#ff00ff;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="m 1.2695302,296.79953 5.6794774,-4.27631"
+       id="path4543"
+       inkscape:connector-curvature="0" />
+  </g>
+</svg>

themes/colorful/options.css

@@ -0,0 +1,11 @@
+header .bookmarkNotice {
+	border: 1px dotted rgb(255, 0, 221);
+	color: rgb(208, 255, 0);
+}
+
+.content .hide ~ .display, .displayHidden ~ .display {
+	background-image: url(visible.svg);
+}
+.content .hide:checked ~ .display, .displayHidden:checked ~ .display {
+	background-image: url(notVisible.svg);
+}

themes/colorful/pageAction.css

@@ -0,0 +1,19 @@
+.collapsible .collapser {
+	color: rgb(244, 120, 255);
+}
+
+.hasHiddenActions {
+	color: rgb(240, 182, 245);
+}
+
+.hasHiddenActions:hover, .hasHiddenActions .actions {
+	background-color: rgb(208, 255, 0);
+}
+
+.modal button {
+	border-color: rgb(208, 255, 0);
+}
+
+.modal button:active, .modal button:hover, .modal button:focus {
+	background-color: rgb(208, 255, 0);
+}

themes/colorful/sanitize.css

@@ -0,0 +1,11 @@
+.complaint.high {
+	background-color: rgb(247, 28, 236);
+}
+
+.complaint.medium {
+	background-color: rgb(65, 255, 223);
+}
+
+.complaint.low {
+	background-color: rgb(255, 255, 2);
+}

themes/colorful/visible.svg

@@ -0,0 +1,71 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="30"
+   height="20"
+   viewBox="0 0 7.9374998 5.2916668"
+   version="1.1"
+   id="svg8"
+   inkscape:version="0.92.4 5da689c313, 2019-01-14"
+   sodipodi:docname="visible.svg">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#000000"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="3.959798"
+     inkscape:cx="-131.24635"
+     inkscape:cy="54.832316"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     inkscape:window-width="1600"
+     inkscape:window-height="841"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     units="px" />
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Ebene 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-291.70832)">
+    <path
+       style="fill:none;stroke:#800080;stroke-width:0.07936867;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 0.14548308,294.43593 c 2.59575882,2.03078 4.92396642,2.03973 7.67986362,-0.06 -3.6044602,-0.64366 -3.6257846,-2.34887 -7.67986362,0.06 z"
+       id="path4520"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="ccc" />
+    <ellipse
+       style="fill:#00ff00;fill-opacity:1;stroke:#00ff00;stroke-width:0.04199925;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="path4522"
+       cx="4.0754137"
+       cy="294.64594"
+       rx="0.92998338"
+       ry="0.86998433" />
+  </g>
+</svg>

themes/dark/browserAction.css

@@ -1,8 +1,3 @@
-body {
-	background-color: rgb(74, 74, 79);
-	color: rgb(249, 249, 250);
-}
-
 .action {
 	border-color: rgb(92, 92, 97);
 }

themes/dark/layout.css

@@ -0,0 +1,7 @@
+body {
+	--background-color: rgb(74, 74, 79);
+	--input-background-color: rgb(53, 56, 54);
+	--text-color: rgb(249, 249, 250);
+	--link-color: lightblue;
+	--button-background-image: linear-gradient(transparent 0%, rgba(255, 255, 255, 0.1) 100%);
+}

themes/dark/notVisible.svg

@@ -0,0 +1,76 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="30"
+   height="20"
+   viewBox="0 0 7.9374998 5.2916668"
+   version="1.1"
+   id="svg8"
+   inkscape:version="0.92.4 5da689c313, 2019-01-14"
+   sodipodi:docname="notVisible-dark.svg">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#000000"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="3.959798"
+     inkscape:cx="-31.241245"
+     inkscape:cy="54.832316"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     inkscape:window-width="1600"
+     inkscape:window-height="841"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     units="px" />
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Ebene 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-291.70832)">
+    <path
+       style="fill:none;stroke:#ffffff;stroke-width:0.07936867;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;opacity:1"
+       d="m 0.14548308,294.43593 c 2.59575882,2.03078 4.92396642,2.03973 7.67986362,-0.06 -3.6044602,-0.64366 -3.6257846,-2.34887 -7.67986362,0.06 z"
+       id="path4520"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="ccc" />
+    <ellipse
+       style="fill:#bbbbbb;fill-opacity:1;stroke:#bbbbbb;stroke-width:0.04199925;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;opacity:1"
+       id="path4522"
+       cx="4.0754137"
+       cy="294.64594"
+       rx="0.92998338"
+       ry="0.86998433" />
+    <path
+       style="opacity:1;fill:none;stroke:#919191;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="m 1.2695302,296.79953 5.6794774,-4.27631"
+       id="path4543"
+       inkscape:connector-curvature="0" />
+  </g>
+</svg>

themes/dark/options.css

@@ -0,0 +1,11 @@
+header .bookmarkNotice {
+	border: 1px dotted #E72020;
+	color: #FF8E8E;
+}
+
+.content .hide ~ .display, .displayHidden ~ .display {
+	background-image: url(visible.svg);
+}
+.content .hide:checked ~ .display, .displayHidden:checked ~ .display {
+	background-image: url(notVisible.svg);
+}

themes/dark/pageAction.css

@@ -1,8 +1,3 @@
-body {
-	background-color: rgb(74, 74, 79);
-	color: rgb(249, 249, 250);
-}
-
 .collapsible .collapser {
 	color: rgb(120, 145, 255);
 }

themes/dark/sanitize.css

@@ -0,0 +1,11 @@
+.complaint.high {
+	background-color: rgb(153, 19, 19);
+}
+
+.complaint.medium {
+	background-color: rgb(168, 112, 8);
+}
+
+.complaint.low {
+	background-color: rgb(175, 175, 13);
+}

themes/dark/visible.svg

@@ -0,0 +1,71 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="30"
+   height="20"
+   viewBox="0 0 7.9374998 5.2916668"
+   version="1.1"
+   id="svg8"
+   inkscape:version="0.92.4 5da689c313, 2019-01-14"
+   sodipodi:docname="visible-dark.svg">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#000000"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="3.959798"
+     inkscape:cx="-31.241245"
+     inkscape:cy="54.832316"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     inkscape:window-width="1600"
+     inkscape:window-height="841"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     units="px" />
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Ebene 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-291.70832)">
+    <path
+       style="fill:none;stroke:#ffffff;stroke-width:0.07936867;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 0.14548308,294.43593 c 2.59575882,2.03078 4.92396642,2.03973 7.67986362,-0.06 -3.6044602,-0.64366 -3.6257846,-2.34887 -7.67986362,0.06 z"
+       id="path4520"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="ccc" />
+    <ellipse
+       style="fill:#919191;fill-opacity:1;stroke:#919191;stroke-width:0.04199925;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="path4522"
+       cx="4.0754137"
+       cy="294.64594"
+       rx="0.92998338"
+       ry="0.86998433" />
+  </g>
+</svg>

themes/default/browserAction.css

@@ -1,8 +1,3 @@
-body {
-	color: rgb(60, 62, 60);
-	background-color: rgb(249, 250, 249);
-}
-
 .action {
 	border-color: rgb(185, 185, 185);
 }

themes/default/layout.css

@@ -0,0 +1,7 @@
+body {
+	--text-color: rgb(60, 62, 60);
+	--background-color: rgb(249, 250, 249);
+	--link-color: blue;
+	--input-background-color: rgb(255, 255, 255);
+	--button-background-image: linear-gradient(transparent 0%, rgba(0, 0, 0, 0.1) 100%);
+}

themes/default/options.css

@@ -0,0 +1,4 @@
+header .bookmarkNotice {
+	border: 1px dotted #880000;
+	color: #880000;
+}

themes/default/pageAction.css

@@ -1,8 +1,3 @@
-body {
-	color: rgb(60, 62, 60);
-	background-color: rgb(249, 250, 249);
-}
-
 .collapsible .collapser {
 	color: blue;
 }

themes/light/browserAction.css

@@ -1,8 +1,3 @@
-body {
-	color: rgb(12, 12, 13);
-	background-color: rgb(255, 255, 255);
-}
-
 .action {
 	border-color: rgb(222, 222, 222);
 }

themes/light/layout.css

@@ -0,0 +1,7 @@
+body {
+	--background-color: rgb(255, 255, 255);
+	--input-background-color: rgb(249, 250, 249);
+	--text-color: rgb(12, 12, 13);
+	--link-color: blue;
+	--button-background-image: linear-gradient(transparent 0%, rgba(0, 0, 0, 0.1) 100%);
+}

themes/light/options.css

@@ -0,0 +1,4 @@
+header .bookmarkNotice {
+	border: 1px dotted #880000;
+	color: #880000;
+}

themes/light/pageAction.css

@@ -1,8 +1,3 @@
-body {
-	color: rgb(12, 12, 13);
-	background-color: rgb(255, 255, 255);
-}
-
 .collapsible .collapser {
 	color: blue;
 }