我目前正在try 通过使用函数changeBackgrondColor()更改页面配色方案的my:Root变量，并将其赋给我的FontAwese月球"按钮".然而，当我点击月亮时，页面会在一秒钟内改变所有的 colored颜色 ，然后又回到原来的形式.
var r = document.querySelector(':root');
var rootStyles = getComputedStyle(r);
function changeBackgroundColor(){
r.style.setProperty('--clr-1', 'blue');
r.style.setProperty('--clr-2', 'blue');
r.style.setProperty('--clr-3', 'blue');
r.style.setProperty('--clr-4', 'blue');
}
通常将类theme-dark设置为body个元素，并使用可验证的css来表示 colored颜色 :
.theme-dark{
--body-bg:#333;
--color:#aaa;
--input-bg: #555;
}
body{
background-color: var(--body-bg);
color: var(--color);
}
input, button{
color: var(--color);
background-color: var(--input-bg);
}<input><button onclick="document.body.classList.toggle('theme-dark')">Toggle dark theme</button>