Javascript не может найти переменную CSS - WordPress - веб-поток - переключение темного режима ⇐ CSS

[Anonymous]

У меня есть веб-сайт WordPress, на котором я реализовал тумблер для светлого/темного режима.
Работает с переменными CSS, которые меняют свое значение. Код взят из руководства Тимоти Рикса.
Насколько я понимаю, js-код «находит» переменные и устанавливает их значения на основе светлых и темных переменных.
На сайте WordPress я могу найти как переменные CSS, так и загруженный js-код. Jet в консоли выдает сообщение об ошибке, которое звучит так, будто он не может найти переменные (не найдено переменных, соответствующих значению атрибута tr-color-vars)
Код запускается в строке 15/16 HTML.


Помогите пожалуйста понять: Почему js-код не находит переменные? Будем очень признательны за любые подсказки.
Это своего рода настройка:


/**
* 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) {
localStorage.setItem("dark-mode", "true");
htmlElement.classList.add("dark-mode");
setColors(darkColors, animate);
togglePressed = "true";
} else {
localStorage.setItem("dark-mode", "false");
htmlElement.classList.remove("dark-mode");
setColors(lightColors, animate);
togglePressed = "false";
}
if (typeof toggleEl !== "undefined") {
toggleEl.forEach(function (element) {
element.setAttribute("aria-pressed", togglePressed);
});
}
}

function checkPreference(e) {
goDark(e.matches, false);
}
const colorPreference = window.matchMedia("(prefers-color-scheme: dark)");
colorPreference.addEventListener("change", (e) => {
checkPreference(e);
});

let storagePreference = localStorage.getItem("dark-mode");
if (storagePreference !== null) {
storagePreference === "true" ? goDark(true, false) : goDark(false, false);
} else {
checkPreference(colorPreference);
}

window.addEventListener("DOMContentLoaded", (event) => {
toggleEl = document.querySelectorAll("[tr-color-toggle]");
toggleEl.forEach(function (element) {
element.setAttribute("aria-label", "View Dark Mode");
element.setAttribute("role", "button");
element.setAttribute("aria-pressed", togglePressed);
});
toggleEl.forEach(function (element) {
element.addEventListener("click", function () {
let darkClass = htmlElement.classList.contains("dark-mode");
darkClass ? goDark(false, true) : goDark(true, true);
});
});
});
}
colorModeToggle();
:root {
--swatch--light: #fff;
--swatch--dark: red;
--swatch--grey: #c6c6c6;
--color--background: var(--swatch--light);
--color--text: var(--swatch--dark);
--color--toggle-bg: var(--swatch--grey);
--color--toggle-offset: 0rem;
--dark--background: var(--swatch--dark);
--dark--text: var(--swatch--light);
--dark--toggle-bg: var(--swatch--dark);
--dark--toggle-offset: 2rem;
}

body {
background-color: var(--color--background);
color: var(--color--text);
}
a {color: var(--color--text);}

.mode-wrapper {
flex-flow: column;
align-self: center;
}

.toggle_wrap {
background-color: var(--color--toggle-bg);
border-radius: 200px;
flex: none;
justify-content: flex-start;
align-items: center;
width: 3.5rem;
height: 1.6rem;
padding: .2rem;
display: flex;
}

.toggle_inner {
margin-left: var(--color--toggle-offset);
background-color: var(--swatch--light);
border-radius: 20px;
width: 1.2rem;
height: 100%;
}










[url=tel:Tel. 07544 / 96 99 69]Tel. 07544 / 96 99 69[/url] Dienstag – Samstag: 17:00 – 00:30
Di – Sa: 17 – 00:30 Uhr













живой веб-сайт (рабочий пример): https://lichtblick-markdorf -web.webflow.io/
ссылка на сайт WordPress (не работает): http://dev2517.web14.biohost.net/
ссылка на YT-Tutorial:

Вставка Тимоти Рика:






Подробнее здесь: https://stackoverflow.com/questions/787 ... ode-toggle