换肤

CSS 变量

分别定义黑天白夜会变化的变量

/* 白天模式 */
:root {
  --body-bg: #fff;
  --main-bg: #fff;
  --main-color: #000;
  --btn-img: url("./dark-btn.svg");
}

/* 黑夜模式 */
:root .dark {
  --body-bg: #000;
  --main-bg: #000;
  --main-color: #fff;
  --btn-img: url("./light-btn.svg");
}

在 css 上使用

body {
  background-color: var(--body-bg);
}

main {
  color: var(--main-color);
}

i {
  background: var(--btn-img);
  background-size: cover;
}

<body>
  <main>
    test
    <i />
  </main>
</body>

通过监听 i 的点击，往 body 上切换 class，已改变 css 变量

document.querySelector('i').onclick = () => {
  document.body.classList.toggle('dark')
}

其他方案

全局变量名，但需要维护难，需要时刻注意优先级
less / sass 在线编译，代码难以看懂