From 569505cebd16786dc748a6854773ddfd9311d891 Mon Sep 17 00:00:00 2001 From: Serial <69764315+Serial-ATA@users.noreply.github.com> Date: Thu, 19 May 2022 18:33:16 -0400 Subject: [PATCH] Auto-detect preferred colorscheme --- util/gh-pages/script.js | 34 +++++++++++++++++++++++----------- 1 file changed, 23 insertions(+), 11 deletions(-) diff --git a/util/gh-pages/script.js b/util/gh-pages/script.js index bf4ce79b2cbc9..68e65acf9cb7e 100644 --- a/util/gh-pages/script.js +++ b/util/gh-pages/script.js @@ -343,17 +343,23 @@ function setTheme(theme, store) { let enableNight = false; let enableAyu = false; - if (theme == "ayu") { - enableAyu = true; - } else if (theme == "coal" || theme == "navy") { - enableNight = true; - } else if (theme == "rust") { - enableHighlight = true; - } else { - enableHighlight = true; - // this makes sure that an unknown theme request gets set to a known one - theme = "light"; + switch(theme) { + case "ayu": + enableAyu = true; + break; + case "coal": + case "navy": + enableNight = true; + break; + case "rust": + enableHighlight = true; + break; + default: + enableHighlight = true; + theme = "light"; + break; } + document.getElementsByTagName("body")[0].className = theme; document.getElementById("styleHighlight").disabled = !enableHighlight; @@ -368,4 +374,10 @@ function setTheme(theme, store) { } // loading the theme after the initial load -setTheme(localStorage.getItem('clippy-lint-list-theme'), false); +const prefersDark = window.matchMedia("(prefers-color-scheme: dark)"); +const theme = localStorage.getItem('clippy-lint-list-theme'); +if (prefersDark.matches && !theme) { + setTheme("coal", false); +} else { + setTheme(theme, false); +}