From 0237dee980157554ab2c9a79b6e9d10cec9e2f3a Mon Sep 17 00:00:00 2001
From: Andrew Dolgov <noreply@fakecake.org>
Date: Thu, 12 Dec 2019 20:09:43 +0300
Subject: 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 | 49 +++++++++++++++++++++++++------------------------
 1 file changed, 25 insertions(+), 24 deletions(-)

(limited to 'js/AppBase.js')

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);
 		},
-- 
cgit v1.2.3