如何通过JavaScript修改Bootstrap颜色变量？点击触发失效排查

你遇到的问题核心是Bootstrap 5的CSS变量是带bs前缀的，比如主题色变量是--bs-primary而非你代码里的--primary。你修改的变量和Bootstrap组件实际引用的变量不匹配，所以UI颜色没变化。

修改后的代码如下：

<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('--bs-primary'));
        root.style.setProperty('--bs-primary', 'red');
        console.log('after', rs.getPropertyValue('--bs-primary'));
    }
</script>

额外补充：如果需要同步修改按钮的hover、active等交互状态颜色，还可以同时修改Bootstrap提供的--bs-primary-rgb变量（用于透明度相关样式），代码示例：

root.style.setProperty('--bs-primary', 'red');
root.style.setProperty('--bs-primary-rgb', '255,0,0');

内容的提问来源于stack exchange，提问作者MADJOE