inside my partial controlling the navigation bar. That code above doesn’t throw any errors and I can see the messages in the console when switching between the light and dark modes. But the $logo variable doesn’t seem to be changing.
Thanks @brunoamaral and @divinerites. The variable was set before (:=) but when I add the | safeJS filter then I can’t access for example $logo.RelPermalink anymore, as Hugo says it’s not defined. The thing is that, after setting the $logo variable, I’m using it to include an img element like this:
<img src="{{ $logo.RelPermalink }}">
I’ve been proposed to change the imgsrc property directly through JS, but I’m not sure how to do that (and I understand it may be out of the scope of this forum).
You know, now that I pay more attention to your code, you’re mixing JS and Hugo templates in a way that won’t work.
See if this works please, I have no way to test it today.
I don’t remember the exact error message but it was something about a nil pointer (Hugo wasn’t able to find any resource, as if the variable wasn’t properly set or its .RelPermalink wasn’t defined). At the end what I did was to give and id to the image (logo in this case) and use a script like this:
With this I’m now able to show different files depending on which theme I’m using. Look at the logo upper left, the PhysiChemically image and the lottie animation
your solution is much better than mine because it is pure Javascript. It becomes easier to understand and there are more people that know JS than those that know Hugo. Good job!
For your reference, that error means the file path was wrong and looking at your code it seems it was missing a / at the beginning.