From 2740d1324ab989f675bd6b534d012c925225af91 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?H=C3=A5kon=20Solbj=C3=B8rg?= 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/js/nms-nightmode.js | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) create mode 100644 web/js/nms-nightmode.js (limited to 'web/js/nms-nightmode.js') 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 +} -- cgit v1.2.3