diff options
| author | Håkon Solbjørg <hakon@solbj.org> | 2023-03-22 23:21:21 +0100 |
|---|---|---|
| committer | Håkon Solbjørg <hakon@solbj.org> | 2023-03-22 23:21:32 +0100 |
| commit | 2740d1324ab989f675bd6b534d012c925225af91 (patch) | |
| tree | f6c643c8b44a21bdb76df75a510911aa25e9c147 | |
| parent | e8efa85387af092adfca0f391c1c8e9aefab01af (diff) | |
feat(ui): Use Prefer Color Scheme to decide to use night modefeat/night-mode-follow-system
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
| -rw-r--r-- | web/index.html | 1 | ||||
| -rw-r--r-- | web/js/nms-nightmode.js | 18 | ||||
| -rw-r--r-- | web/js/nms.js | 1 |
3 files changed, 20 insertions, 0 deletions
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() { |