diff --git a/_locales/de/messages.json b/_locales/de/messages.json
index ec3b7a5..1b8565a 100644
--- a/_locales/de/messages.json
+++ b/_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": ""
diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index 4ec10e9..8b0ce3f 100644
--- a/_locales/en/messages.json
+++ b/_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",
diff --git a/lib/settingDefinitions.js b/lib/settingDefinitions.js
index 6d7cdcb..40a7587 100644
--- a/lib/settingDefinitions.js
+++ b/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",
diff --git a/lib/theme.js b/lib/theme.js
index 656a501..1f65bf5 100644
--- a/lib/theme.js
+++ b/lib/theme.js
@@ -16,22 +16,52 @@
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(){
- 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 = "stylesheet";
- link.type = "text/css";
- document.head.appendChild(link);
- return link;
- });
+ setTheme(settings.theme);
settings.on("theme", function(){
- links.forEach(function(link){
- link.href = `${basePath}/${settings.theme}/${link.cbFile}.css`;
- });
+ setTheme(settings.theme);
});
});
};
diff --git a/options/navigator.css b/options/navigator.css
index dadc166..6c27968 100644
--- a/options/navigator.css
+++ b/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;
diff --git a/options/options.css b/options/options.css
index 40d4324..14afad7 100644
--- a/options/options.css
+++ b/options/options.css
@@ -155,6 +155,7 @@ textarea {
padding: 0;
border: none;
background-color: transparent;
+ background-image: none;
}
.urlValues table .url {
min-width: 4em;
diff --git a/options/options.js b/options/options.js
index 9a72e5b..1bfb461 100644
--- a/options/options.js
+++ b/options/options.js
@@ -155,7 +155,7 @@
dontShowAgain.appendChild(dontShowAgainInput);
dontShowAgain.appendChild(
document.createTextNode(
- extension.getTranslation("dontShowOptionsOnUpdate")
+ " " + extension.getTranslation("dontShowOptionsOnUpdate")
)
);
bookmarkingNotice.appendChild(dontShowAgain);
diff --git a/pageAction/pageAction.css b/pageAction/pageAction.css
index 324f727..2b24c3e 100644
--- a/pageAction/pageAction.css
+++ b/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;
diff --git a/releaseNotes.txt b/releaseNotes.txt
index 349b705..7dba037 100644
--- a/releaseNotes.txt
+++ b/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
diff --git a/themes/base/layout.css b/themes/base/layout.css
new file mode 100644
index 0000000..a4a9ef5
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/themes/dark/selectArrow.svg b/themes/base/selectArrow.svg
similarity index 90%
rename from themes/dark/selectArrow.svg
rename to themes/base/selectArrow.svg
index dc8d039..2dc4ac6 100644
--- a/themes/dark/selectArrow.svg
+++ b/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">
diff --git a/themes/colorful/browserAction.css b/themes/colorful/browserAction.css
new file mode 100644
index 0000000..9c77803
--- /dev/null
+++ b/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);
+}
\ No newline at end of file
diff --git a/themes/colorful/layout.css b/themes/colorful/layout.css
new file mode 100644
index 0000000..a8ac47e
--- /dev/null
+++ b/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%);
+}
\ No newline at end of file
diff --git a/themes/light/selectArrow.svg b/themes/colorful/notVisible.svg
similarity index 61%
rename from themes/light/selectArrow.svg
rename to themes/colorful/notVisible.svg
index dc8d039..46cc069 100644
--- a/themes/light/selectArrow.svg
+++ b/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">
+
+
diff --git a/themes/colorful/options.css b/themes/colorful/options.css
new file mode 100644
index 0000000..a54a901
--- /dev/null
+++ b/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);
+}
\ No newline at end of file
diff --git a/themes/colorful/pageAction.css b/themes/colorful/pageAction.css
new file mode 100644
index 0000000..29785da
--- /dev/null
+++ b/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);
+}
\ No newline at end of file
diff --git a/themes/colorful/sanitize.css b/themes/colorful/sanitize.css
new file mode 100644
index 0000000..d9e0848
--- /dev/null
+++ b/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);
+}
\ No newline at end of file
diff --git a/themes/default/selectArrow.svg b/themes/colorful/visible.svg
similarity index 66%
rename from themes/default/selectArrow.svg
rename to themes/colorful/visible.svg
index dc8d039..15e6eac 100644
--- a/themes/default/selectArrow.svg
+++ b/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">
+ 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" />
+
diff --git a/themes/dark/layout.css b/themes/dark/layout.css
index 7663ac9..ac151c4 100644
--- a/themes/dark/layout.css
+++ b/themes/dark/layout.css
@@ -1,57 +1,7 @@
body {
- background-color: rgb(74, 74, 79);
- color: rgb(249, 249, 250);
- font-family: sans-serif;
- font-size: 10pt;
-}
-
-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;
+ --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%);
}
\ No newline at end of file
diff --git a/themes/default/layout.css b/themes/default/layout.css
index cf462d1..53aefa2 100644
--- a/themes/default/layout.css
+++ b/themes/default/layout.css
@@ -1,57 +1,7 @@
body {
- color: rgb(60, 62, 60);
- background-color: rgb(249, 250, 249);
- font-family: sans-serif;
- font-size: 10pt;
-}
-
-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;
+ --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%);
}
\ No newline at end of file
diff --git a/themes/light/layout.css b/themes/light/layout.css
index b8970cf..01fa1ca 100644
--- a/themes/light/layout.css
+++ b/themes/light/layout.css
@@ -1,57 +1,7 @@
body {
- background-color: rgb(255, 255, 255);
- color: rgb(12, 12, 13);
- font-family: sans-serif;
- font-size: 10pt;
-}
-
-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;
+ --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%);
}
\ No newline at end of file