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",
- options: ["default", "light", "dark"]
+ defaultValue: "auto",
+ 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");
+
+ 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);
  });
  });
  };

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,13 +2,16 @@ Version 0.5.9:
  changes:
  - code cleanup
  - made history length threshold url specific
+ - uniform themes
 
  new features:
  - added protection for navigator properties
  - added support to import older storage versions
  - 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/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/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);
+}