From 2740d1324ab989f675bd6b534d012c925225af91 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?H=C3=A5kon=20Solbj=C3=B8rg?= <hakon@solbj.org>
Date: Wed, 22 Mar 2023 23:21:21 +0100
Subject: feat(ui): Use Prefer Color Scheme to decide to use night mode

Uses the proposal here: https://drafts.csswg.org/mediaqueries-5/#descdef-media-prefers-color-scheme

Seems to be decently supported: https://caniuse.com/?search=prefers-color-scheme
---
 web/index.html          |  1 +
 web/js/nms-nightmode.js | 18 ++++++++++++++++++
 web/js/nms.js           |  1 +
 3 files changed, 20 insertions(+)
 create mode 100644 web/js/nms-nightmode.js

diff --git a/web/index.html b/web/index.html
index 5e04beb..ab1d0af 100644
--- a/web/index.html
+++ b/web/index.html
@@ -327,6 +327,7 @@
     <script type="text/javascript" src="js/nms-types.js"></script>
     <script type="text/javascript" src="js/nms-ui-switch.js"></script>
     <script type="text/javascript" src="js/nms-ui-switch-summary.js"></script>
+    <script type="text/javascript" src="js/nms-nightmode.js"></script>
     <script src="js/jquery.datetimepicker.full.js" type="text/javascript"></script>
     <script type="text/javascript">
 	initNMS();
diff --git a/web/js/nms-nightmode.js b/web/js/nms-nightmode.js
new file mode 100644
index 0000000..310ec01
--- /dev/null
+++ b/web/js/nms-nightmode.js
@@ -0,0 +1,18 @@
+"use strict";
+
+var nmsNightMode = nmsNightMode || {
+
+}
+
+var prefersColorSchemeMediaQuery = "(prefers-color-scheme: dark)";
+
+nmsNightMode.toggle = function() {
+	var active = window.matchMedia(prefersColorSchemeMediaQuery).matches;
+	nms.nightMode = active;
+}
+
+nmsNightMode.init = function() {
+	var preferColorScheme = window.matchMedia(prefersColorSchemeMediaQuery);
+	preferColorScheme.addListener(() => nmsNightMode.toggle());
+	nmsNightMode.toggle(); // trigger initial
+}
diff --git a/web/js/nms.js b/web/js/nms.js
index 7f4bde7..5012bff 100644
--- a/web/js/nms.js
+++ b/web/js/nms.js
@@ -410,6 +410,7 @@ function initNMS() {
 	setupKeyhandler();
 	nmsSearch.init();
 	nmsDhcp.init();
+	nmsNightMode.init();
 }
 
 function detectHandler() {
-- 
cgit v1.2.3