CSS复选框实现浅色和深色主题之间切换特效代码

使用方法

#switcher {
  position: absolute;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  top: 1rem;
  right: 1rem;
  width: 4em;
  height: 2em;
  background-color: var(--color, #000);
  border-radius: 2em;
  font-size: 20px;
}
#switcher::after {
  position: absolute;
  top: 0.25em;
  left: 0.25em;
  width: 1.5em;
  height: 1.5em;
  content: "";
  background-color: var(--bg-color, #fff);
  border-radius: 2em;
  transform: translateX(var(--translate, 0));
  transition: 250ms;
}
#switcher:checked {
  --translate: 2em;
  --bg-color: #424242;
  --color: #81d4fa;
}
#switcher:checked ~ * {
  --bg-color: #424242;
  --color: #81d4fa;
}