implement automatic night mode detection using MQL

add separate light.css to force light theme
remove manual night mode toggle and related code

js/AppBase.js

@@ -9,6 +9,7 @@ define(["dojo/_base/declare"], function (declare) {
 		hotkey_prefix_timeout: 0,
 		constructor: function() {
 			window.onerror = this.Error.onWindowError;
+			this.setupNightModeDetection();
 		},
 		getInitParam: function(k) {
 			return this._initParams[k];
@@ -16,6 +17,30 @@ define(["dojo/_base/declare"], function (declare) {
 		setInitParam: function(k, v) {
 			this._initParams[k] = v;
 		},
+		nightModeChanged: function(is_night) {
+			console.log("night mode changed to", is_night);
+
+			const link = $("theme_css");
+
+			if (link) {
+
+				if (link.getAttribute("data-orig-href").indexOf("css/default.css") !== -1) {
+					const css_override = is_night ? "themes/night.css" : "css/default.css";
+					link.setAttribute("href", css_override + "?" + Date.now());
+				}
+			}
+		},
+		setupNightModeDetection: function() {
+			if (window.matchMedia) {
+				const mql = window.matchMedia('(prefers-color-scheme: dark)');
+
+				mql.addEventListener("change", () => {
+					this.nightModeChanged(mql.matches);
+				});
+
+				this.nightModeChanged(mql.matches);
+			}
+		},
 		enableCsrfSupport: function() {
 			Ajax.Base.prototype.initialize = Ajax.Base.prototype.initialize.wrap(
 				function (callOriginal, options) {
@@ -358,30 +383,6 @@ define(["dojo/_base/declare"], function (declare) {
 
 			this.initSecondStage();
 		},
-		toggleNightMode: function() {
-			const link = $("theme_css");
-
-			if (link) {
-
-				let user_theme = "";
-				let user_css = "";
-
-				if (link.getAttribute("href").indexOf("themes/night.css") == -1) {
-					user_css = "themes/night.css?" + Date.now();
-					user_theme = "night.css";
-				} else {
-					user_theme = "default.php";
-					user_css = "css/default.css?" + Date.now();
-				}
-
-				$("main").fade({duration: 0.5, afterFinish: () => {
-					link.setAttribute("href", user_css);
-					$("main").appear({duration: 0.5});
-					xhrPost("backend.php", {op: "rpc", method: "setpref", key: "USER_CSS_THEME", value: user_theme});
-				}});
-
-			}
-		},
 		explainError: function(code) {
 			return this.displayDlg(__("Error explained"), "explainError", code);
 		},

js/prefs.js

@@ -142,8 +142,6 @@ require(["dojo/_base/kernel",
 							case "help_dialog":
 								App.helpDialog("main");
 								return false;
-							case "toggle_night_mode":
-								App.toggleNightMode();
 							default:
 								console.log("unhandled action: " + action_name + "; keycode: " + event.which);
 						}

js/tt-rss.js

@@ -513,9 +513,6 @@ require(["dojo/_base/kernel",
 							Headlines.renderAgain();
 						});
 					};
-					this.hotkey_actions["toggle_night_mode"] = function () {
-						App.toggleNightMode();
-					};
 				},
 				onActionSelected: function(opid) {
 					switch (opid) {
@@ -581,9 +578,6 @@ require(["dojo/_base/kernel",
 								alert(__("Widescreen is not available in combined mode."));
 							}
 							break;
-						case "qmcToggleNightMode":
-							App.toggleNightMode();
-							break;
 						case "qmcHKhelp":
 							App.helpDialog("main");
 							break;