Fixing darkModeToggle listener (#577)

If hideColorSchemeToggle is true, darkModeToggle will not be rendered and adding a listener to a non-existing object will cause error.
This commit is contained in:
Kirill Feoktistov
2021-06-25 18:27:13 +00:00
committed by GitHub
parent 9920a722b0
commit 4bb81da844
3 changed files with 8 additions and 4 deletions

1
.gitignore vendored
View File

@@ -1,3 +1,4 @@
.idea
**/themes/ **/themes/
exampleSite/public/ exampleSite/public/
exampleSite/resources/ exampleSite/resources/

View File

@@ -98,3 +98,4 @@
- [cuso4-5h2o](https://www.cuso4.me) - [cuso4-5h2o](https://www.cuso4.me)
- [freeformz](https://icanhazdowntime.org) - [freeformz](https://icanhazdowntime.org)
- [Roberto Gongora](https://yourfavourite.blog) - [Roberto Gongora](https://yourfavourite.blog)
- [Kirill Feoktistov](https://feoktistoff.org)

View File

@@ -11,9 +11,11 @@ if (localStorage.getItem("colorscheme")) {
setTheme(darkModeMediaQuery.matches ? "dark" : "light"); setTheme(darkModeMediaQuery.matches ? "dark" : "light");
} }
if (darkModeToggle) {
darkModeToggle.addEventListener('click', () => { darkModeToggle.addEventListener('click', () => {
setTheme(body.classList.contains("colorscheme-dark") ? "light" : "dark"); setTheme(body.classList.contains("colorscheme-dark") ? "light" : "dark");
}); });
}
darkModeMediaQuery.addListener((event) => { darkModeMediaQuery.addListener((event) => {
setTheme(event.matches ? "dark" : "light"); setTheme(event.matches ? "dark" : "light");
@@ -26,7 +28,7 @@ document.addEventListener("DOMContentLoaded", function () {
function setTheme(theme) { function setTheme(theme) {
body.classList.remove('colorscheme-auto'); body.classList.remove('colorscheme-auto');
inverse = theme === 'dark' ? 'light' : 'dark'; const inverse = theme === 'dark' ? 'light' : 'dark';
localStorage.setItem('colorscheme', theme); localStorage.setItem('colorscheme', theme);
body.classList.remove('colorscheme-' + inverse); body.classList.remove('colorscheme-' + inverse);
body.classList.add('colorscheme-' + theme); body.classList.add('colorscheme-' + theme);