implement automatic night mode detection using MQL

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

9 files changed, 30 insertions, 36 deletions

diff --git a/include/controls.php b/include/controls.php
index 012bcf76c..8646ec15d 100755
--- a/include/controls.php
+++ b/include/controls.php
@@ -238,7 +238,7 @@ function stylesheet_tag($filename, $id = false) {
 
 	$id_part = $id ? "id=\"$id\"" : "";
 
-	return "<link rel=\"stylesheet\" $id_part type=\"text/css\" href=\"$filename?$timestamp\"/>\n";
+	return "<link rel=\"stylesheet\" $id_part type=\"text/css\" data-orig-href=\"$filename\" href=\"$filename?$timestamp\"/>\n";
 }
 
 function javascript_tag($filename) {
diff --git a/include/functions.php b/include/functions.php
index a7c55f486..9cd352833 100644
--- a/include/functions.php
+++ b/include/functions.php
@@ -1101,7 +1101,6 @@
 				"create_label" => __("Create label"),
 				"create_filter" => __("Create filter"),
 				"collapse_sidebar" => __("Un/collapse sidebar"),
-				"toggle_night_mode" => __("Toggle night mode"),
 				"help_dialog" => __("Show help dialog"))
 		);
 
@@ -1172,7 +1171,6 @@
 			"c l" => "create_label",
 			"c f" => "create_filter",
 			"c s" => "collapse_sidebar",
-			"a N" => "toggle_night_mode",
 			"?" => "help_dialog",
 		);
 
diff --git a/index.php b/index.php
index cf57def79..8fb76bc2a 100644
--- a/index.php
+++ b/index.php
@@ -234,7 +234,6 @@
                         <div dojoType="dijit.MenuItem" onclick="App.onActionSelected('qmcShowOnlyUnread')"><?php echo __('(Un)hide read feeds') ?></div>
                         <div dojoType="dijit.MenuItem" disabled="1"><?php echo __('Other actions:') ?></div>
                         <div dojoType="dijit.MenuItem" onclick="App.onActionSelected('qmcToggleWidescreen')"><?php echo __('Toggle widescreen mode') ?></div>
-                        <div dojoType="dijit.MenuItem" onclick="App.onActionSelected('qmcToggleNightMode')"><?php echo __('Toggle night mode') ?></div>
                         <div dojoType="dijit.MenuItem" onclick="App.onActionSelected('qmcHKhelp')"><?php echo __('Keyboard shortcuts help') ?></div>
 
                         <?php
diff --git a/js/AppBase.js b/js/AppBase.js
index a5e20b8f9..db524296c 100644
--- a/js/AppBase.js
+++ b/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);
 		},
diff --git a/js/prefs.js b/js/prefs.js
index 844ce8c8a..1b32c65cb 100755
--- a/js/prefs.js
+++ b/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);
 						}
diff --git a/js/tt-rss.js b/js/tt-rss.js
index b127376c7..5e044625d 100644
--- a/js/tt-rss.js
+++ b/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;
diff --git a/themes/light.css b/themes/light.css
new file mode 100644
index 000000000..621afcac5
--- /dev/null
+++ b/themes/light.css
@@ -0,0 +1,2 @@
+@import "../css/default.css";
+/*# sourceMappingURL=light.css.map */
\ No newline at end of file
diff --git a/themes/light.css.map b/themes/light.css.map
new file mode 100644
index 000000000..5fe503f13
--- /dev/null
+++ b/themes/light.css.map
@@ -0,0 +1 @@
+{"version":3,"sources":["light.less"],"names":[],"mappings":"QAAQ","file":"light.css"}
\ No newline at end of file
diff --git a/themes/light.less b/themes/light.less
new file mode 100644
index 000000000..d35996c5a
--- /dev/null
+++ b/themes/light.less
@@ -0,0 +1 @@
+@import "../css/default.css";