使用css变量动态换肤

结构

    <div class="header">headerdiv>
    <button onclick="handleChange()">change themebutton>

样式

  <style>
    :root {
      /* :root伪类选择器表示文档根元素 */
      --backgroundColor: #f0f0f0;
      --color: #232323;
    }

    .header {
      background-color: var(--backgroundColor);
      color: var(--color);
      padding: 30px;
      margin: 30px;
    }

  style>

事件

通过js来动态设置css变量

<script>
  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');
    }

  }
script>

效果

切换后