Change colors of animation using CSS/JS

[hrvstr]

I am using Hugo with this theme. The theme has a dark mode switch and I want to change the colors of the animation when the button is toggled.

The theme toggle js looks like this:

const getTheme = window.localStorage && window.localStorage.getItem("theme");
const themeToggle = document.querySelector(".theme-toggle");
const isDark = getTheme === "dark";
var metaThemeColor = document.querySelector("meta[name=theme-color]");
if (getTheme !== null) {
    document.body.classList.toggle("dark-theme", isDark);
    isDark ? metaThemeColor.setAttribute("content", "#252627") : metaThemeColor.setAttribute("content", "#fafafa");
}
themeToggle.addEventListener("click", () => {
    document.body.classList.toggle("dark-theme");
    window.localStorage && window.localStorage.setItem("theme", document.body.classList.contains("dark-theme") ? "dark" : "light", );
    document.body.classList.contains("dark-theme") ? metaThemeColor.setAttribute("content", "#252627") : metaThemeColor.setAttribute("content", "#fafafa");
    ;
});

I was thinking I could add something like this

<script>
  var effect = VANTA.FOG({
    el: "body",
    midtoneColor: 0x808C99,
  })

  if (getTheme !== null) {
    document.body.classList.toggle("dark-theme", isDark);
    effect.setOptions({midtoneColor: 0x00ff00});
  }
</script>

But it does not seem to work. Any ideas how to achieve this?
In the console log I see: Can't find variable: getTheme

[tengbao]

After you setOptions you may also need to do a effect.restart().
The console log seems like a problem with getTheme, unrelated to vanta.