In local/dev environment, my theme switch button works fine, but here when deployed, clicking the theme button doesn’t change the html element class, so the theme doesn’t change for some reason.
What could be the issue?
Repo: frontend-practice/frontend-mentor/calculator-app at main · jrmydix/frontend-practice · GitHub
Hey there, @jeremy
Thanks for reaching out and welcome to the Netlify Forums! Sorry to hear you are encountering problems. Can you please share the name of the function you are using?
Additionally, can you describe what elements of the theme should be changing when we toggle the theme switch button?
Hi, when you toggle the theme switch button, the whole page colors should change, a class like “dark”, “light”, or “third” should be added to the html element when a theme is chosen.
Looking at your code, I don’t know if there are other issues preventing your code from working but I do see a few issues. It’s worth noting these are not related to Netlify’s services but I’m happy to review!
The click handlers will only change the theme if something is set on the localStorage variable. By default, nothing is set on that variable. So when you click a button is checks localStorage.theme and does not have an
else condition to perform a default action if nothing is set on theme.
The site is using
.getItem( key ) and
.setItem( key, value ) functions that you can call to persist values that can be read across page loads. By setting those properties directly on localStorage as written:
localStorage.theme that will just set a theme property on the object which doesn’t persist across page loads.
Here’s some more information on localStorage: Window.localStorage - Web APIs | MDN
I hope that helps!
Thank you very much!
And as it was working locally I wasn’t sure where the issue was coming from.
Have a nice day!