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 enableNight = false;
let enableAyu = false; let enableAyu = false;
if (theme == "ayu") { switch(theme) {
enableAyu = true; case "ayu":
} else if (theme == "coal" || theme == "navy") { enableAyu = true;
enableNight = true; break;
} else if (theme == "rust") { case "coal":
enableHighlight = true; case "navy":
} else { enableNight = true;
enableHighlight = true; break;
// this makes sure that an unknown theme request gets set to a known one case "rust":
theme = "light"; enableHighlight = true;
break;
default:
enableHighlight = true;
theme = "light";
break;
} }
document.getElementsByTagName("body")[0].className = theme; document.getElementsByTagName("body")[0].className = theme;
document.getElementById("styleHighlight").disabled = !enableHighlight; document.getElementById("styleHighlight").disabled = !enableHighlight;
@ -368,4 +374,10 @@ function setTheme(theme, store) {
} }
// loading the theme after the initial load // 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);
}