It might be clearer for people who haven't written any CSS variables before to give them an empty placeholder selector that they're supposed to write into
It's quite a lot of work to define and toggle every single variable in the JS. It also requires duplicating every variable in both the CSS and JS (adding new ones later would get annoying to manage)
I think it would be more future-proof to get them to toggle a className on the root and then define all the darkmode variables in the CSS.
E.g.
:root {
--text:#000;
}
.dark {
--text:#fff;
}
functionswitchTheme(e){document.documentElement.classList.toggle("dark");// this would work on document.body too}
The base index.html contains <body class="dark">, is this intentional?
It was confusing and the class had be removed from the body for the code to work correctly (as per your gif). i.e the page loads in light mode, the switch is toggled and it turns dark.