JavaScript toggle button problem with reverting back to original CSS variable values
Solution 1:
So to me this looks like you are toggling between a dark/light mode. There are a ton of tutorials out there on this but this is the basics of it.
const button = document.querySelector('button')
button.addEventListener('click', toggleTheme)
function toggleTheme() {
if (document.body.getAttribute('data-theme') === 'light') {
document.body.setAttribute('data-theme', 'dark')
} else {
document.body.setAttribute('data-theme', 'light')
}
} :root {
--bg-color: #040d14;
--text-color: #f0f4f6;
--border-color: #30363a;
--highlight-color: #00c805;
--secondary-bg-color:#1e2124;
}
[data-theme="light"] {
--bg-color: #f7f7f7;
--text-color: #333;
--border-color: #040d14;
--highlight-color: #ebecec;
--secondary-bg-color:#1e2124;
}
.container {
background-color: var(--bg-color);
height: 200px;
color: var(--text-color);
border: 1px solid var(--border-color);
}<div class="container">
Stuff
</div>
<button>Toggle</button>