I have a root css style file and I have defined some color variables in that. for ex:
--background-blue-primary: #005a9e;
Also, in my main html file there is a button to change theme. when someone clicked on that, i want the color code in variable to change.
how can i do that?
>Solution :
Like this
document.getElementById('themeChangeButton')
.addEventListener('click', () => document.documentElement.style
.setProperty('--background-blue-primary', '#ff4500')); :root {
--background-blue-primary: #005a9e;
}
body {
background-color: var(--background-blue-primary);
}<div class="content">
This is some content to see the effect of theme change.
</div>
<button id="themeChangeButton">Change Theme</button>or
document.getElementById('themeChangeButton')
.addEventListener('click', () => document.body.style.backgroundColor = '#ff4500');:root {
--background-blue-primary: #005a9e;
}
body {
background-color: var(--background-blue-primary);
}<div class="content">
This is some content to see the effect of theme change.
</div>
<button id="themeChangeButton">Change Theme</button>