SOURCE

console 命令行工具 X clear

                    
>
console
 document.body.style.setProperty('--backgroundColor', '#f0f0f0');
  document.body.style.setProperty('--color', '#232323');
  function handleChange() {
    const color = document.body.style.getPropertyValue('--color').trim();
    if (color === '#232323') {
      document.body.style.setProperty('--backgroundColor', '#000');
      document.body.style.setProperty('--color', '#fff');
    } else {
      document.body.style.setProperty('--backgroundColor', '#f0f0f0');
      document.body.style.setProperty('--color', '#232323');
    }
  }
<div class="header">header</div>
<button onclick="handleChange()">change theme</button>
:root {
    /* :root伪类选择器表示文档根元素<html> */
    --backgroundColor: #f0f0f0;
    --color: #232323;
}
.header {
    background-color: var(--backgroundColor);
    color: var(--color);
    padding: 30px;
    margin: 30px;
}