I am trying to make a light/dark theme for a website. I have gotten most things to work, but I am trying to change a data attribute from javascript when the light/dark theme changes, but this is not working.
Here is my code:
const lightThemeFunc = () => {
document.documentElement.style.setProperty('--text-color', 'black');
document.documentElement.style.setProperty("--background-image", "url('Images/cadence_light_theme.jpg')");
document.documentElement.style.setProperty('--navbar-color', 'whitesmoke');
document.documentElement.style.setProperty('--sub-color', "linear-gradient(to bottom, #ffffff, #f0effd, #dedffb, #c9d0f9, #b2c2f8, #bcbcf5, #c7b6f1, #d2b0ea, #f1b4d9, #ffbdca, #ffcbc1, #ffdac2)");
document.getElementsByClassName('g-ytsubscribe').setAttribute("data-theme", "default");
};
const darkThemeFunc = () => {
document.documentElement.style.setProperty('--text-color', 'whitesmoke');
document.documentElement.style.setProperty("--background-image", "url('Images/cadence_dark_theme.jpeg')");
document.documentElement.style.setProperty("--navbar-color", 'black');
document.documentElement.style.setProperty("--sub-color", "linear-gradient(to bottom, #000000, #242323, #434040, #655f60, #898181)");
document.getElementsByClassName('g-ytsubscribe').setAttribute("data-theme", "dark");
};
<div data-tooltip8="Subscribe to our youtube channel" class="g-ytsubscribe" data-channelid="UCeUBUuz5jIy-5eG1ysVh1pA" data-layout="full" data-theme="dark" data-count="hidden"></div>
I am trying to change the "data-theme" of the youtube subscribe button with setAttribute, but it is not working. Also, the functions go to the buttons that are not included in this code. If you want them please tell me! Thank You!
