diff options
| author | Kyle Copperfield <kmcopper@danwin1210.me> | 2020-03-02 15:33:47 +0000 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2020-03-02 09:33:47 -0600 |
| commit | a3045a3953c5446887ae2057383023bf35c26253 (patch) | |
| tree | ca4d6ac9baa063c9cba7ec0b3d35891030b36221 /assets/js | |
| parent | c620a22017012a0dfcd0c3c89017a17587fe7b0e (diff) | |
| download | invidious-a3045a3953c5446887ae2057383023bf35c26253.tar.gz invidious-a3045a3953c5446887ae2057383023bf35c26253.tar.bz2 invidious-a3045a3953c5446887ae2057383023bf35c26253.zip | |
Use a MediaQueryListener to toggle on demand. Tested on OSX. (#925)
Closes #867.
Diffstat (limited to 'assets/js')
| -rw-r--r-- | assets/js/themes.js | 21 |
1 files changed, 21 insertions, 0 deletions
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' : ''; |