Improved theme system and appearance

Fixes #181 and #341

_locales/de/messages.json

@@ -1035,6 +1035,10 @@
 		"message": "",
 		"description": ""
 	},
+	"theme_options.auto": {
+		"message": "automatisch",
+		"description": ""
+	},
 	"theme_options.default": {
 		"message": "Standard",
 		"description": ""
@@ -1047,6 +1051,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

@@ -1082,6 +1082,10 @@
 		"message": "",
 		"description": ""
 	},
+	"theme_options.auto": {
+		"message": "automatic",
+		"description": ""
+	},
 	"theme_options.default": {
 		"message": "default",
 		"description": ""
@@ -1094,6 +1098,14 @@
 		"message": "dark",
 		"description": ""
 	},
+	"theme_options.colorful": {
+		"message": "colorful",
+		"description": ""
+	},
+	"theme_options.none": {
+		"message": "none",
+		"description": ""
+	},
 	
 	"blockDataURLs_title": {
 		"message": "Block data URL pages",

lib/settingDefinitions.js

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

lib/theme.js

@@ -16,22 +16,52 @@
 	
 	scope.init = function(page){
 		const basePath = browser.extension.getURL("themes");
-		settings.onloaded(function(){
+		
+		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.href = `${basePath}/${settings.theme}/${file}.css`;
+			link.rel = "alternative";
-				link.rel = "stylesheet";
 			link.type = "text/css";
 			document.head.appendChild(link);
 			return link;
 		});
-			settings.on("theme", function(){
+		
+		function setTheme(theme){
+			switch (theme){
+				case "none":
+					baseLink.rel = "alternative";
 					links.forEach(function(link){
-					link.href = `${basePath}/${settings.theme}/${link.cbFile}.css`;
+						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);
 			});
 		});
 	};

options/navigator.css

@@ -10,13 +10,7 @@
 
 .button {
 	display: inline-block;
-	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/options.css

@@ -155,6 +155,7 @@ textarea {
 	padding: 0;
 	border: none;
 	background-color: transparent;
+	background-image: none;
 }
 .urlValues table .url {
 	min-width: 4em;

options/options.js

@@ -155,7 +155,7 @@
 					dontShowAgain.appendChild(dontShowAgainInput);
 					dontShowAgain.appendChild(
 						document.createTextNode(
-							extension.getTranslation("dontShowOptionsOnUpdate")
+							" " + extension.getTranslation("dontShowOptionsOnUpdate")
 						)
 					);
 					bookmarkingNotice.appendChild(dontShowAgain);

pageAction/pageAction.css

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

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
 	
 	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

@@ -15,7 +15,7 @@
    version="1.1"
    id="svg8"
    inkscape:version="0.92.4 5da689c313, 2019-01-14"
-   sodipodi:docname="selectArrow-dark.svg">
+   sodipodi:docname="selectArrow.svg">
   <defs
      id="defs2" />
   <sodipodi:namedview
@@ -26,7 +26,7 @@
      inkscape:pageopacity="0"
      inkscape:pageshadow="2"
      inkscape:zoom="3.959798"
-     inkscape:cx="-71.024296"
+     inkscape:cx="-70.51922"
      inkscape:cy="54.832316"
      inkscape:document-units="mm"
      inkscape:current-layer="layer1"
@@ -56,7 +56,7 @@
      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.8884137,293.36755 -0.9594253,0.87344 -1.0588099,-0.86505 -0.712205,0.64837 1.8566551,1.51689 1.6716308,-1.52181 z"
+       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>

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

@@ -15,7 +15,7 @@
    version="1.1"
    id="svg8"
    inkscape:version="0.92.4 5da689c313, 2019-01-14"
-   sodipodi:docname="selectArrow-dark.svg">
+   sodipodi:docname="notVisible.svg">
   <defs
      id="defs2" />
   <sodipodi:namedview
@@ -26,7 +26,7 @@
      inkscape:pageopacity="0"
      inkscape:pageshadow="2"
      inkscape:zoom="3.959798"
-     inkscape:cx="-71.024296"
+     inkscape:cx="-131.24635"
      inkscape:cy="54.832316"
      inkscape:document-units="mm"
      inkscape:current-layer="layer1"
@@ -55,9 +55,22 @@
      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"
+       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 6.8884137,293.36755 -0.9594253,0.87344 -1.0588099,-0.86505 -0.712205,0.64837 1.8566551,1.51689 1.6716308,-1.52181 z"
+       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="rect817"
+       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

@@ -15,7 +15,7 @@
    version="1.1"
    id="svg8"
    inkscape:version="0.92.4 5da689c313, 2019-01-14"
-   sodipodi:docname="selectArrow-dark.svg">
+   sodipodi:docname="visible.svg">
   <defs
      id="defs2" />
   <sodipodi:namedview
@@ -26,7 +26,7 @@
      inkscape:pageopacity="0"
      inkscape:pageshadow="2"
      inkscape:zoom="3.959798"
-     inkscape:cx="-71.024296"
+     inkscape:cx="-131.24635"
      inkscape:cy="54.832316"
      inkscape:document-units="mm"
      inkscape:current-layer="layer1"
@@ -55,9 +55,17 @@
      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"
+       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 6.8884137,293.36755 -0.9594253,0.87344 -1.0588099,-0.86505 -0.712205,0.64837 1.8566551,1.51689 1.6716308,-1.52181 z"
+       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="rect817"
+       id="path4520"
-       inkscape:connector-curvature="0" />
+       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/layout.css

@@ -1,57 +1,7 @@
 body {
-	background-color: rgb(74, 74, 79);
+	--background-color: rgb(74, 74, 79);
-	color: rgb(249, 249, 250);
+	--input-background-color: rgb(53, 56, 54);
-	font-family: sans-serif;
+	--text-color: rgb(249, 249, 250);
-	font-size: 10pt;
+	--link-color: lightblue;
-}
+	--button-background-image: linear-gradient(transparent 0%, rgba(255, 255, 255, 0.1) 100%);
-
-a:link, a:visited, a:active {
-	color: lightblue;
-}
-
-input, textarea, select, button {
-	background-color: rgb(53, 56, 54);
-	color: rgb(249, 249, 250);
-	border-color: rgb(53, 56, 54);
-	border-radius: 3px;
-	padding: 1px;
-}
-
-button {
-	margin: 1px;
-	padding: 0px 10px;
-	background-image: linear-gradient(transparent 0%, rgba(255, 255, 255, 0.1) 100%);
-	border-radius: 0px;
-}
-
-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/default/layout.css

@@ -1,57 +1,7 @@
 body {
-	color: rgb(60, 62, 60);
+	--text-color: rgb(60, 62, 60);
-	background-color: rgb(249, 250, 249);
+	--background-color: rgb(249, 250, 249);
-	font-family: sans-serif;
+	--link-color: blue;
-	font-size: 10pt;
+	--input-background-color: rgb(255, 255, 255);
-}
+	--button-background-image: linear-gradient(transparent 0%, rgba(0, 0, 0, 0.1) 100%);
-
-a:link, a:visited, a:active {
-	color: blue;
-}
-
-input, textarea, select, button {
-	background-color: rgb(249, 250, 249);
-	color: rgb(60, 62, 60);;
-	border-color: rgb(249, 250, 249);
-	border-radius: 3px;
-	padding: 1px;
-}
-
-button {
-	margin: 1px;
-	padding: 0px 10px;
-	background-image: linear-gradient(transparent 0%, rgba(0, 0, 0, 0.1) 100%);
-	border-radius: 0px;
-}
-
-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/light/layout.css

@@ -1,57 +1,7 @@
 body {
-	background-color: rgb(255, 255, 255);
+	--background-color: rgb(255, 255, 255);
-	color: rgb(12, 12, 13);
+	--input-background-color: rgb(249, 250, 249);
-	font-family: sans-serif;
+	--text-color: rgb(12, 12, 13);
-	font-size: 10pt;
+	--link-color: blue;
-}
+	--button-background-image: linear-gradient(transparent 0%, rgba(0, 0, 0, 0.1) 100%);
-
-a:link, a:visited, a:active {
-	color: blue;
-}
-
-input, textarea, select, button {
-	background-color: rgb(255, 255, 255);
-	color: rgb(12, 12, 13);
-	border-color: rgb(255, 255, 255);
-	border-radius: 3px;
-	padding: 1px;
-}
-
-button {
-	margin: 1px;
-	padding: 0px 10px;
-	background-image: linear-gradient(transparent 0%, rgba(0, 0, 0, 0.1) 100%);
-	border-radius: 0px;
-}
-
-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;
 }