Having an issue with my WordPress site and custom JavaScript. The code is loaded into the site using 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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="374454455e47434477410619071905">[email protected]</a>/dark-mode-toggle.js">
The 'tr-color-vars' lists the variables to change between light and dark-mode. The '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 script returns an error message:
No variables found matching the tr-color-vars attribute value
However, the variables are there.
Why can't the js-code find the variables? Any help would be appreciated.
live webflow site (working example)
link of wordpress site (toggle issue)
I obtained this code and 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: 2 rem;
--dark--background-50: rgba(53, 50, 51, .5);
}