如何实现Toggle开关切换时切换页面背景色CSS变量？

问题 #

现有Toggle开关的HTML/CSS代码，页面背景色使用--body-color变量，需要在开关勾选时将页面背景色切换为--background-colour变量。

原代码如下：

CSS #

:root {
  /*========== Colors ==========*/
  /*Color mode HSL(hue, saturation, lightness)*/
  --line-color: hsl(234, 12%, 35%);
  --active-color: hsl(234, 100%, 98%);
  --inactive-color: hsl(234, 20%, 68%);
  --body-color: hsl(189, 49%, 87%);
  --background-colour: hsl(189, 84%, 14%);
}

* {
  box-sizing: border-box;
}

body {
  height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
  background-color: var(--body-color);
}

.toggle__content {
  display: grid;
  row-gap: 1.5rem;
}

.toggle__label {
  cursor: pointer;
  padding-block: .5rem;
}

.toggle__check {
  display: none;
}

.toggle__rail {
  position: relative;
  width: 52px;
  height: 4px;
  background-color: var(--line-color);
  border-radius: 2rem;
}

.toggle__circle {
  display: block;
  width: 24px;
  height: 24px;
  background-color: var(--body-color);
  box-shadow: inset 0 0 0 4px var(--inactive-color);
  border-radius: 50%;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  margin: auto 0;
  transition: transform .4s, box-shadow .4s;
  z-index: 2;
}

.toggle__border {
  position: absolute;
  width: 32px;
  height: 32px;
  background-color: var(--body-color);
  border-radius: 50%;
  left: -4px;
  top: 0;
  bottom: 0;
  margin: auto 0;
  transition: transform .4s;
}

/* Toggle animation effects */
.toggle__check:checked~.toggle__rail .toggle__circle {
  transform: translateX(28px);
  box-shadow: inset 0 0 0 12px var(--active-color);
}

.toggle__check:checked~.toggle__rail .toggle__border {
  transform: translateX(28px);
}

HTML #

<div class="toggle__content">
  <label class="toggle__label">
        <input type="checkbox" class="toggle__check">
        <div class="toggle__rail">
            <span class="toggle__circle"></span>
            <span class="toggle__border"></span>
        </div>
    </label>
</div>

解决方案 #

方案1：使用CSS :has() 伪类（现代浏览器推荐） #

利用CSS的:has()伪类检测页面中开关是否被勾选，直接修改body的背景色，无需JavaScript。

在现有CSS末尾添加以下规则：

/* 开关勾选时切换body背景色 */
body:has(.toggle__check:checked) {
  background-color: var(--background-colour);
}

/* 优化：背景色切换后，调整开关元素颜色以适配深色背景 */
body:has(.toggle__check:checked) .toggle__circle,
body:has(.toggle__check:checked) .toggle__border {
  background-color: var(--active-color);
}

优点：纯CSS实现，代码简洁，无JS依赖。
注意：:has()伪类支持Chrome 105+、Firefox 121+、Safari 15.4+，旧浏览器不兼容。

方案2：使用JavaScript（兼容旧浏览器） #

通过监听开关的change事件，动态切换body的背景色，兼容所有主流浏览器。

方法A：通过类名控制（更易维护）

1. 先在CSS中添加类规则：

body.dark-background {
  background-color: var(--background-colour);
}

body.dark-background .toggle__circle,
body.dark-background .toggle__border {
  background-color: var(--active-color);
}

2. 然后在HTML末尾添加JavaScript代码：

<script>
const toggleCheck = document.querySelector('.toggle__check');
const body = document.body;

toggleCheck.addEventListener('change', function() {
  body.classList.toggle('dark-background', this.checked);
});
</script>

方法B：直接修改行内样式

如果不需要扩展样式，也可以直接操作行内样式：

<script>
const toggleCheck = document.querySelector('.toggle__check');
const body = document.body;
const toggleElements = document.querySelectorAll('.toggle__circle, .toggle__border');

toggleCheck.addEventListener('change', function() {
  // 切换背景色
  body.style.backgroundColor = this.checked 
    ? 'var(--background-colour)' 
    : 'var(--body-color)';
  
  // 同步调整开关元素颜色
  toggleElements.forEach(el => {
    el.style.backgroundColor = this.checked 
      ? 'var(--active-color)' 
      : 'var(--body-color)';
  });
});
</script>

优点：兼容所有旧浏览器，类名方式更便于扩展其他样式。

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