a
/
hugo-theme-paradox
mirror of https://github.com/trwnh/hugo-theme-paradox.git
1
Fork 0
Code Issues Projects Releases Wiki Activity

finish fixing color switcher

This commit is contained in:
a 2022-12-28 10:34:51 -06:00
parent cf9dc13bda
commit ddadf97337
1 changed files with 153 additions and 154 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
layouts/partials/color-switcher.html
View File

@ -133,14 +133,11 @@
</style>
<script>
var body = document.body;
var switcher = document.getElementsByClassName('js-toggle');
var input = document.getElementsByClassName('js-toggle-screenreader-only');
var switchers = document.getElementsByClassName('js-toggle');
console.log(switcher);
for (s of switcher) {
s.removeAttribute("style");
};
for (switcher of switchers) {
switcher.removeAttribute("style");
var input = switcher.querySelector('.js-toggle-screenreader-only')
input.addEventListener('focus', (event) => {
switcher.classList.add('js-toggle--focus');
@ -152,7 +149,9 @@ input.addEventListener('focusout', (event) => {
//Click on dark mode icon. Add dark mode classes and wrappers. Store user preference through sessions
switcher.addEventListener("click", function () {
for (switcher of switchers) {
this.classList.toggle('js-toggle--checked');
}
//this.classList.add('js-toggle--focus');
//If dark mode is selected
if (this.classList.contains('js-toggle--checked')) {
@ -168,6 +167,7 @@ if (this.classList.contains('js-toggle--checked')) {
}, 100);
}
})
};
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
localStorage.setItem('colorMode', 'dark');
@ -175,14 +175,13 @@ if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').match
//Check Storage. Keep user preference on page reload
if (localStorage.getItem('colorMode') == 'dark') {
//body.classList.add('dark-mode');
for (switcher of switchers) {
switcher.classList.add('js-toggle--checked');
}
body.classList.add('dark-mode');
}
};
if (localStorage.getItem('colorMode') == 'light') {
//body.classList.add('dark-mode');
body.classList.add('light-mode');
}
};
</script>