Add automatic dark mode detection

Also switches automatically whenever the OS does
This commit is contained in:
Wessel Dankers 2021-07-01 17:10:21 +02:00
parent 4fe0ff5b1a
commit b1ae89fa08
No known key found for this signature in database
GPG key ID: 5FA3BB6F097F72B4

View file

@ -4,8 +4,23 @@ document.addEventListener("DOMContentLoaded", function(event) { // wait for cont
toggleDarkMode(); // toggle theme
});
// needs to be done here as <body> is not available when the script in the head runs
if (typeof(Storage) !== 'undefined' && localStorage.getItem('theme') === 'dark')
if (typeof(Storage) !== 'undefined' && localStorage.getItem('theme') === 'dark') {
document.body.classList.add('dark');
} else if (window.matchMedia) {
const darkMedia = window.matchMedia('(prefers-color-scheme: dark)');
if (darkMedia.matches)
document.body.classList.add('dark');
// Some operating systems switch to dark mode only during the evening/night:
darkMedia.addEventListener('change', function(event) {
// Do not overwrite if the user made a manual choice:
if (localStorage.getItem('theme') === null) {
if (event.matches)
document.body.classList.add('dark');
else
document.body.classList.remove('dark');
}
});
}
});