JavaScript inside partial

Using Themes
#1

Hi all, I’m using a theme that emits a JavaScript event whenever the user switches between the light and dark mode. I’d like for example to load a different logo when using the dark mode. For that I’m using a script like this:

<script> 
document.addEventListener('wcThemeChange', (e) => {
  console.log('isDarkTheme? ' + e.detail.isDarkTheme());
  if (e.detail.isDarkTheme()) {
    console.log('The theme is dark');
    {{ $logo = resources.Get "media/logo-dark.svg" }}
  } else {
    console.log('The theme is light');
    {{ $logo = resources.Get "media/logo.svg" }}
  }
  });
</script>

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.

Could anyone help me with this?

Thank you very much in advance!

#2

You need to add the | safeJS filter after setting the logo.

    {{ $logo = resources.Get "media/logo.svg" | safeJS }}
#3

and also be sure to have a variable init statement before

{{ $logo := ...

1 Like
#4

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 img src 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).

Thanks a lot in advance,
Rodrigo

#5

I think I’ve been able to do this, at least for a simple case. I’ll see if I can do it for the rest of the images I want to change.

Thanks a lot for your time!

#6

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.

{{$logoDark := resources.Get "media/logo-dark.svg" }}
{{ $logo := resources.Get "media/logo.svg" }}
<script> 
document.addEventListener('wcThemeChange', (e) => {
  console.log('isDarkTheme? ' + e.detail.isDarkTheme());
  if (e.detail.isDarkTheme()) {
    console.log('The theme is dark');
    {{ $logoDark.RelPermalink | safeJS }}
  } else {
    console.log('The theme is light');
    {{ $logo.RelPermalink  | safeJS }}
  });
};
</script>
#7

I’m afraid this is not working but I already have a working example changing directly the src property of my images

1 Like
#8

Just curious, what was the error and how did you fix the code?

#9

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:

<script>
document.addEventListener('wcThemeChange', (e) => {
  console.log('isDarkTheme? ' + e.detail.isDarkTheme());
  if (e.detail.isDarkTheme()) {
    document.getElementById("logo").src="/media/logo-dark.svg";
  } else {
    document.getElementById("logo").src="/media/logo.svg";
  }
});
</script>
1 Like
#10

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 :partying_face:

Grabacion_de_pantalla_2021-11-05_a_las_19.15.44

#11

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.

#12

You’re totally right and I didn’t notice either :man_facepalming: