Auto-detect preferred colorscheme

This commit is contained in:
Serial 2022-05-19 18:33:16 -04:00
parent 6f26383f8e
commit 569505cebd

View File

@ -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);
}