Matching the sites theme (JS question)

[psychonormal]

Hi guys,

for my site with Remark42, I'm using Hugo with the Wowchemy module.
I can switch my site between light and dark mode. How to switch the Remark42 at the same time?

According to the Wowchemy documentation, there is a wcThemeChange-Event, which I could use:
https://wowchemy.com/docs/getting-started/customization/#theming-custom-integrations
In addition, there is a wcTheme key with value 0 (light) or 1 (dark) in the Local Storage

According to the Remark42 documentation one could change the theme with
window.REMARK42.changeTheme('light');

However, due to my complete lack of JS knowledge, I can't match both themes.
How could I get both themes to match?
Any help is appreciated!

[akellbl4]

Hi!
I think you need something like this:

document.addEventListener('wcThemeChange', (e) =>  {
    const isDark =  e.detail.isDarkTheme();
    window.REMARK42.changeTheme(isDark 'dark' : 'light');
})

[psychonormal]

I tried to fix the script on my own, but still no success:

document.addEventListener('wcThemeChange', (e) =>  {
    const isDark =  e.detail.isDarkTheme();
    if (typeof window.REMARK42 != "undefined") {
      window.REMARK42.changeTheme(isDark ? 'dark' : 'light');
    }
  }
);

document.addEventListener('DOMContentLoaded', function() {
  if (localStorage.getItem('wcTheme')) {
    let wcThemeValue = localStorage.getItem('wcTheme');
    if (wcThemeValue = 0) {
      console.log('wcTheme=0 -> light mode');
      if (typeof window.REMARK42 != "undefined") {
        window.REMARK42.changeTheme('light');
      }
    } else if (wcThemeValue = 1) {
      console.log('wcTheme=1 -> dark mode');
      if (typeof window.REMARK42 != "undefined") {
        alert("change REMARK42 to dark mode");
        window.REMARK42.changeTheme('dark');
      }
    } else {
      console.log('wcTheme=2 -> mode depends on browser settings, not sure how to catch them, so: light mode');
      if (typeof window.REMARK42 != "undefined") {
        window.REMARK42.changeTheme('light');
      }
    }
  }    
}, false);

I added the if (typeof window.REMARK42 != "undefined") { ... } checks in order to catch errors on pages where REMARK42 is not present.

So when I change my site to dark mode and move on to another page on my site, the site stays in dark mode, but REMARK42 switches back to the light mode - although the alert("change REMARK42 to dark mode"); is fired. I don't get any errors.

Any suggestions on this matter?

[akellbl4]

It should be like that:

document.addEventListener('wcThemeChange', function() {
  if (typeof window.REMARK42 === "undefined") {
    return
  }
  const currentTheme = e.detail.isDarkTheme() ? "dark" : "light";
  window.REMARK42.changeTheme(currentTheme);
});

document.addEventListener('DOMContentLoaded', function () {
  if (typeof window.REMARK42 === "undefined") {
    return;
  }
  const wcTheme = localStorage.getItem("wcTheme");
  const currentTheme = wcTheme === null || wcTheme === "0" ? "light" : "dark";
  window.REMARK42.changeTheme(currentTheme);
}, false);

[psychonormal]

Hi @akellbl4,

thank you so much for your help. I adopted your code, but the problem stays the same.
Although currentTheme has the correct value, Remark42 still does not match my sites theme.

Currently I'm using the following code on my site (https://psychonormal.de):

document.addEventListener('wcThemeChange', (e)=>{
  if (typeof `window.REMARK42` === "undefined") {
    return;
  }
  const currentTheme = e.detail.isDarkTheme() ? "dark" : "light";
  console.log("wcThemeChange-----------------------------------");
  console.log(currentTheme);
  console.log("wcThemeChange-----------------------------------");
  window.REMARK42.changeTheme(currentTheme);
}, false);

document.addEventListener('DOMContentLoaded', function () {
  if (typeof window.REMARK42 === "undefined") {
    return;
  }
  const wcTheme = localStorage.getItem("wcTheme");
  const currentTheme = wcTheme === null || wcTheme === "0" ? "light" : "dark";
  console.log("DOMContentLoaded--------------------------------");
  console.log(wcTheme);
  console.log(currentTheme);
  console.log("DOMContentLoaded--------------------------------");
  window.REMARK42.changeTheme(currentTheme);
}, false);

document.addEventListener('load', function () {
  if (typeof window.REMARK42 === "undefined") {
    return;
  }
  const wcTheme = localStorage.getItem("wcTheme");
  console.log(wcTheme);
  const currentTheme = wcTheme === null || wcTheme === "0" ? "light" : "dark";
  console.log("load--------------------------------------------");
  console.log(wcTheme);
  console.log(currentTheme);
  console.log("load--------------------------------------------");
  window.REMARK42.changeTheme(currentTheme);
}, false);

But I'm running out of ideas, how to fix this.
Do you have any suggestions?

[akellbl4]

Okay. I understood what's wrong.
First of all, you need to use only this part:

document.addEventListener('wcThemeChange', function() {
  if (typeof window.REMARK42 === "undefined") {
    return
  }
  window.REMARK42.changeTheme(e.detail.isDarkTheme() ? "dark" : "light);
});

And add this to your remark_config:

var wcTheme = window.localStorage.getItem("wcTheme");
var remark_config = {
  ...
  theme: wcTheme === null || wcTheme === "0" ? "light" : "dark";
}

[psychonormal]

Awesome! It works fine now! 🎆
Thank you so much @akellbl4! 🙏
You guys rock! 😊