a/hugo-theme-paradox
1
Fork 0
mirror of https://github.com/trwnh/hugo-theme-paradox.git synced 2024-11-24 10:21:21 +00:00
Code Issues Projects Releases Wiki Activity

finish fixing color switcher

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