Add dark theme (#1204)

Fixes #1151
This commit is contained in:
Dawid Potocki 2019-08-29 20:03:04 +00:00 committed by GitHub
parent 09e1d85933
commit f09d6c3165
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 236 additions and 3 deletions

View file

@ -27,6 +27,47 @@ function navSectionsClose(event) {
});
}
// Dark/Light color scheme switch button
document.querySelector("#nav-switch-theme").style.display = "inline"
if (localStorage.getItem("colorScheme") === "dark") {
document.querySelector("#dark-css").removeAttribute("media"); // Set dark theme
}
else if (localStorage.getItem("colorScheme") === "light") {
document.querySelector("#dark-css").setAttribute("media", "invalid"); // Set light theme
}
function changeColorScheme() {
// Use whatever users want
if (localStorage.getItem("colorScheme") === "dark") {
// Change to light theme
// by setting invalid media it will just not apply CSS for anyone
document.querySelector("#dark-css").setAttribute("media", "invalid");
localStorage.setItem("colorScheme", "light");
}
else if (localStorage.getItem("colorScheme") === "light") {
// Change to dark theme
// media was set to prefers-color-scheme: dark
document.querySelector("#dark-css").removeAttribute("media");
localStorage.setItem("colorScheme", "dark");;
}
// Just use whatever browsers want
else if (window.matchMedia("(prefers-color-scheme: dark)").matches === true) {
// Change to light Theme
document.querySelector("#dark-css").setAttribute("media", "invalid");
localStorage.setItem("colorScheme", "light");
}
else {
// Change to dark theme
document.querySelector("#dark-css").removeAttribute("media");
localStorage.setItem("colorScheme", "dark");;
}
}
// Matomo
var _paq = window._paq || [];
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */