Make theme configurable (#139)

_locales/en/messages.json

@@ -665,6 +665,22 @@
     "description": "Preferences/General",
     "message": "Try to find links in the website text (slower)"
   },
+  "pref_theme": {
+    "description": "label text",
+    "message": "Theme:"
+  },
+  "pref_theme_dark": {
+    "description": "option text",
+    "message": "Dark"
+  },
+  "pref_theme_default": {
+    "description": "option text",
+    "message": "System/Browser default"
+  },
+  "pref_theme_light": {
+    "description": "option text",
+    "message": "Light"
+  },
   "pref_ui": {
     "description": "Preferences/General; group text",
     "message": "User Interface"

data/prefs.json

@@ -17,6 +17,7 @@
 	"remove-missing-on-init": false,
 	"retries": 5,
 	"retry-time": 10,
+	"theme": "default",
 	"limits": [
 		{
 			"domain": "*",

style/common.css

@@ -42,32 +42,30 @@
   --popup-color: #0c0c0d;
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --add-color: lightblue;
-    --general-bgcolor: #2A2A2E;
-    --general-border-color: rgb(85, 85, 85);
-    --general-button-bgcolor-hover: black;
-    --general-button-bgcolor: rgb(36, 36, 36);
-    --general-button-color: white;
-    --general-color: rgb(249, 249, 250);
-    --menu-bgcolor: black;
-    --menu-bgcolor-hover: #1a6bce;
-    --table-bgcolor: #1A1A1E;
-    --table-head-bgcolor: #3A3A3E;
-    --toolbar-bg-color: rgb(202, 108, 0);
-    --status-icon-color: #b9b9b9;
-    --status-icon-color-hover: #e2e2e2;
-    --tile-url: url(tile-dark.png?3);
-    --toolbar-border: 1px solid rgba(30, 30, 30, 0.5);
-    --file-icon-image-color: rgb(21, 130, 197);
-    --popup-bgcolor: #4a4a4f;
-    --popup-color: rgb(249, 249, 250);
-    --general-button-shadow: 0px 0px 7px 1px rgba(128,128,128,0.8);
-  }
-  a {
-    color: lightblue;
-  }
+ html.dark {
+  --add-color: lightblue;
+  --general-bgcolor: #2A2A2E;
+  --general-border-color: rgb(85, 85, 85);
+  --general-button-bgcolor-hover: black;
+  --general-button-bgcolor: rgb(36, 36, 36);
+  --general-button-color: white;
+  --general-color: rgb(249, 249, 250);
+  --menu-bgcolor: black;
+  --menu-bgcolor-hover: #1a6bce;
+  --table-bgcolor: #1A1A1E;
+  --table-head-bgcolor: #3A3A3E;
+  --toolbar-bg-color: rgb(202, 108, 0);
+  --status-icon-color: #b9b9b9;
+  --status-icon-color-hover: #e2e2e2;
+  --tile-url: url(tile-dark.png?3);
+  --toolbar-border: 1px solid rgba(30, 30, 30, 0.5);
+  --file-icon-image-color: rgb(21, 130, 197);
+  --popup-bgcolor: #4a4a4f;
+  --popup-color: rgb(249, 249, 250);
+  --general-button-shadow: 0px 0px 7px 1px rgba(128,128,128,0.8);
+}
+ html.dark a {
+  color: lightblue;
 }
 
 html[data-platform="mac"] {

windows/manager.ts

@@ -9,6 +9,7 @@ import { runtime } from "../lib/browser";
 import { Promised } from "../lib/util";
 import { PromiseSerializer } from "../lib/pserializer";
 import { Keys } from "./keys";
+import "./theme";
 
 const $ = document.querySelector.bind(document);
 

windows/popup.ts

@@ -2,6 +2,7 @@
 // License: MIT
 
 import { localize } from "../lib/i18n";
+import "./theme";
 
 declare let browser: any;
 declare let chrome: any;

windows/prefs.html

@@ -51,6 +51,13 @@
         <label><input type="radio" name="pref-button-type" value="manager"> <span data-i18n="pref-button-type-manager"></span></label>
       </div>
       <hr>
+      <div id="pref-theme">
+        <label data-i18n="pref-theme"></label>
+        <label><input type="radio" name="pref-theme" value="default"> <span data-i18n="pref-theme-default"></span></label>
+        <label><input type="radio" name="pref-theme" value="light"> <span data-i18n="pref-theme-light"></span></label>
+        <label><input type="radio" name="pref-theme" value="dark"> <span data-i18n="pref-theme-dark"></span></label>
+      </div>
+      <hr>
       <label><input type="checkbox" id="pref-manager-in-popup"> <span data-i18n="pref-manager-in-popup"></span></label>
       <label><input type="checkbox" id="pref-finish-notification"> <span data-i18n="pref-finish-notification"></span></label>
       <label><input type="checkbox" id="pref-sounds"> <span data-i18n="pref-sounds"></span></label>

windows/prefs.ts

@@ -20,6 +20,7 @@ import { VirtualTable } from "../uikit/lib/table";
 import { Icons } from "./icons";
 import { $ } from "./winutil";
 import { runtime, storage } from "../lib/browser";
+import "./theme";
 
 const ICON_BASE_SIZE = 16;
 
@@ -566,6 +567,7 @@ addEventListener("DOMContentLoaded", async () => {
   new BoolPref("pref-show-urls", "show-urls");
   new BoolPref("pref-remove-missing-on-init", "remove-missing-on-init");
   new OptionPref("pref-button-type", "button-type");
+  new OptionPref("pref-theme", "theme");
   new OptionPref("pref-conflict-action", "conflict-action");
 
   $("#reset-confirmations").addEventListener("click", async () => {

windows/select.ts

@@ -25,6 +25,7 @@ import { ItemDelta } from "../lib/select";
 // eslint-disable-next-line no-unused-vars
 import { TableConfig } from "../uikit/lib/config";
 import { validateSubFolder as validateSubfolder } from "../lib/util";
+import "./theme";
 
 const PORT: RawPort = runtime.connect(null, { name: "select" });
 

windows/single.ts

@@ -15,6 +15,7 @@ import { hookButton } from "../lib/manager/renamer";
 import { runtime } from "../lib/browser";
 import { $ } from "./winutil";
 import { validateSubFolder } from "../lib/util";
+import "./theme";
 
 const PORT = runtime.connect(null, { name: "single" });
 

windows/theme.ts

@@ -0,0 +1,47 @@
+"use strict";
+// License: MIT
+
+import { PrefWatcher } from "../lib/prefs";
+
+export const THEME = new class Theme extends PrefWatcher {
+  public systemDark: boolean;
+
+  public themeDark?: boolean;
+
+  constructor() {
+    super("theme", "default");
+    this.themeDark = undefined;
+    const query = window.matchMedia("(prefers-color-scheme: dark)");
+    this.systemDark = query.matches;
+    query.addListener(e => {
+      this.systemDark = e.matches;
+      this.recalculate();
+    });
+    this.recalculate();
+  }
+
+  get dark() {
+    console.warn("theme", this.value);
+    if (this.value === "dark") {
+      return true;
+    }
+    if (this.value === "light") {
+      return false;
+    }
+    if (typeof this.themeDark === "undefined") {
+      return this.systemDark;
+    }
+    return this.themeDark;
+  }
+
+  changed(prefs: any, key: string, value: any) {
+    const rv = super.changed(prefs, key, value);
+    this.recalculate();
+    return rv;
+  }
+
+  recalculate() {
+    console.warn("darkness", this.dark);
+    document.documentElement.classList[this.dark ? "add" : "remove"]("dark");
+  }
+}();