From a3045a3953c5446887ae2057383023bf35c26253 Mon Sep 17 00:00:00 2001 From: Kyle Copperfield Date: Mon, 2 Mar 2020 15:33:47 +0000 Subject: [PATCH] Use a MediaQueryListener to toggle on demand. Tested on OSX. (#925) Closes #867. --- assets/js/themes.js | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/assets/js/themes.js b/assets/js/themes.js index 90a05c36..c600073d 100644 --- a/assets/js/themes.js +++ b/assets/js/themes.js @@ -28,6 +28,27 @@ window.addEventListener('load', function () { update_mode(window.localStorage.dark_mode); }); + +var darkScheme = window.matchMedia('(prefers-color-scheme: dark)'); +var lightScheme = window.matchMedia('(prefers-color-scheme: light)'); + +darkScheme.addListener(scheme_switch); +lightScheme.addListener(scheme_switch); + +function scheme_switch (e) { + // ignore this method if we have a preference set + if (localStorage.getItem('dark_mode')) { + return; + } + if (e.matches) { + if (e.media.includes("dark")) { + set_mode(true); + } else if (e.media.includes("light")) { + set_mode(false); + } + } +} + function set_mode (bool) { document.getElementById('dark_theme').media = !bool ? 'none' : ''; document.getElementById('light_theme').media = bool ? 'none' : '';