JavaScript not finding css-variables - darkmode toggle in WordPress (webflow conversion)

I have an issue with my WordPress website and some custom JavaScript I want to use. The code gets loaded into the site with this script tag on line 16 in the head-section:

<script tr-color-vars="text,background,button-background,button-text,background-50,nav-menu-link,toggle-bg,toggle-offset"
duration="0.5" ease="power1.out"
src="https://cdn.jsdelivr.net/gh/timothydesign/scripts@v1.0.2/dark-mode-toggle.js">

'tr-color-vars' lists the variables I'd like to change between light and dark-mode. 'src=' calls the cdn-hosted code.

In my webflow website, where I converted the theme from, the toggle works fine.

On the WordPress site, the code from the script returns the error-message:

No variables found matching tr-color-vars attribute value

Yet the variables are there.

Why does the js-code not find the variables? Any hint would be much appreciated.

live webflow site (working example)

link of wordpress site (toggle issue)

I got this code and the how-to from timothy ricks on YouTube: Tutorial

JavaScript code:

/**
 * Dark Mode Toggle 1.0.2
 * Copyright 2023 Timothy Ricks
 * Released under the MIT License
 * Released on: November 28, 2023
 */

function colorModeToggle() {
  function attr(defaultVal, attrVal) {
    const defaultValType = typeof defaultVal;
    if (typeof attrVal !== "string" || attrVal.trim() === "") return defaultVal;
    if (attrVal === "true" && defaultValType === "boolean") return true;
    if (attrVal === "false" && defaultValType === "boolean") return false;
    if (isNaN(attrVal) && defaultValType === "string") return attrVal;
    if (!isNaN(attrVal) && defaultValType === "number") return +attrVal;
    return defaultVal;
  }

  const htmlElement = document.documentElement;
  const computed = getComputedStyle(htmlElement);
  let toggleEl;
  let togglePressed = "false";

  const scriptTag = document.querySelector("[tr-color-vars]");
  if (!scriptTag) {
    console.warn("Script tag with tr-color-vars attribute not found");
    return;
  }

  let colorModeDuration = attr(0.5, scriptTag.getAttribute("duration"));
  let colorModeEase = attr("power1.out", scriptTag.getAttribute("ease"));

  const cssVariables = scriptTag.getAttribute("tr-color-vars");
  if (!cssVariables.length) {
    console.warn("Value of tr-color-vars attribute not found");
    return;
  }

  let lightColors = {};
  let darkColors = {};
  cssVariables.split(",").forEach(function (item) {
    let lightValue = computed.getPropertyValue(`--color--${item}`);
    let darkValue = computed.getPropertyValue(`--dark--${item}`);
    if (lightValue.length) {
      if (!darkValue.length) darkValue = lightValue;
      lightColors[`--color--${item}`] = lightValue;
      darkColors[`--color--${item}`] = darkValue;
    }
  });

  if (!Object.keys(lightColors).length) {
    console.warn("No variables found matching tr-color-vars attribute value");
    return;
  }

  function setColors(colorObject, animate) {
    if (typeof gsap !== "undefined" && animate) {
      gsap.to(htmlElement, {
        ...colorObject,
        duration: colorModeDuration,
        ease: colorModeEase
      });
    } else {
      Object.keys(colorObject).forEach(function (key) {
        htmlElement.style.setProperty(key, colorObject[key]);
      });
    }
  }

  function goDark(dark, animate) {
    if (dark) {

CSS variables:

:root {
    --swatch--light: white;
    --swatch--transparent: rgba(255, 255, 255, 0);
    --swatch--brand: #8a2d59;
    --swatch--color: #1f1e3e;
    --swatch--dark: #201c1c;

    --color--background: var(--swatch--light);
    --color--text: var(--swatch--dark);
    --color--button-background: var(--swatch--brand);
    --color--button-text: var(--swatch--light);
    --color--toggle-bg: var(--swatch--light);
    --color--nav-menu-link: var(--swatch--light);
    --color--toggle-offset: 0rem;
    --color--background-50: rgba(255, 255, 255, .5);

    --dark--background: var(--swatch--dark);
    --dark--text: var(--swatch--light);
    --dark--button-background: var(--swatch--brand);
    --dark--button-text: var(--swatch--light);
    --dark--toggle-bg: var(--swatch--brand);
    --dark--nav-menu-link: var(--swatch--light);
    --dark--toggle-offset: 2rem;
    --dark--background-50: rgba(53, 50, 51, .5);
}

The root of the problem was, that during the conversion of the webflow site into a theme (curtesy of udesly) the import of the css got moved below the script tag with the javascript.

After manually changing the script to load later than the css-variables it works like a treat.

working example