I need to update certain bootstrap variable values using JavaScript instead of using SCSS. The specific requirement is that the changes must occur on click events, which is why I am opting for JavaScript.
Although I have attempted to implement the code below, it does not work as expected. The console message displays correctly, but the UI colors remain unchanged.
<button type="button" class="btn btn-primary" onclick="UpdateColor()">CHANGE COLOR ON CLICK</button>
<h3 class="text-primary">WHEN BUTTON IS CLICKED MY COLOR SHOULD CHANGE</h3>
<script>
function UpdateColor() {
var root = document.querySelector(':root');
var rs = getComputedStyle(root);
console.log('before', rs.getPropertyValue('--primary'));
root.style.setProperty('--primary', 'red');
console.log('after', rs.getPropertyValue('--primary'));
}
</script>