Light/Dark主题切换功能失效，点击按钮无响应求技术解决方案

你的切换按钮已经实现了自身样式变化，但缺少关联页面主题的逻辑，以下是完整修复方案：

1. 修改HTML（添加主题切换逻辑） #

在</body>标签前加入脚本，监听复选框状态变化，触发页面主题切换：

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8" />
  <title></title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="toggleWrapper">
  <input type="checkbox" class="dn" id="dn" />
  <label for="dn" class="toggle">
    <span class="toggle__handler">
      <span class="crater crater--1"></span>
      <span class="crater crater--2"></span>
      <span class="crater crater--3"></span>
    </span>
    <span class="star star--1"></span>
    <span class="star star--2"></span>
    <span class="star star--3"></span>
    <span class="star star--4"></span>
    <span class="star star--5"></span>
    <span class="star star--6"></span>
  </label>
</div>
<header>Заголовок страницы</header>
<nav>Меню навигации</nav>
<aside>Боковая колонка SideBar</aside>
<article>
  Контент - основное содержимое страницы.
</article>
<footer>Подвал сайта</footer>

<script>
  const themeToggle = document.getElementById('dn');
  themeToggle.addEventListener('change', function() {
    document.body.classList.toggle('dark');
  });
</script>
</body>
</html>

2. 更新CSS（添加暗色主题样式） #

在原有CSS末尾添加暗色主题规则，同时优化基础样式确保切换前后可读性：

body {
  background-image: url('https://img.razrisyika.ru/kart/137/1200/544003-fotografiy-v-horoshem-kachestve-29.jpg');
  background-repeat: no-repeat;
  color: #333;
  transition: background-color 0.3s, color 0.3s;
}

/* 暗色主题样式 */
body.dark {
  background-image: url('https://img.razrisyika.ru/kart/137/1200/544002-fotografiy-v-horoshem-kachestve-28.jpg');
  color: #f0f0f0;
}

/* 页面区块适配样式 */
header, nav, aside, article, footer {
  padding: 1rem;
  margin: 0.5rem;
  border-radius: 4px;
  background-color: rgba(255,255,255,0.8);
}

body.dark header, 
body.dark nav, 
body.dark aside, 
body.dark article, 
body.dark footer {
  background-color: rgba(30,30,30,0.8);
}

/* 原有切换按钮样式保持不变 */
.toggleWrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  overflow: hidden;
  padding: 0 200px;
  transform: translate3d(-50%, -50%, 0);
}

.toggleWrapper input {
  position: absolute;
  left: -99em;
}

.toggle {
  cursor: pointer;
  display: inline-block;
  position: relative;
  width: 90px;
  height: 50px;
  background-color: #83d8ff;
  border-radius: 84px;
  transition: background-color 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

.toggle:before {
  content: 'AM';
  position: absolute;
  left: -50px;
  top: 15px;
  font-size: 18px;
}

.toggle:after {
  content: 'PM';
  position: absolute;
  right: -48px;
  top: 15px;
  font-size: 18px;
  color: #749ed7;
}

.toggle__handler {
  display: inline-block;
  position: relative;
  z-index: 1;
  top: 3px;
  left: 3px;
  width: 44px;
  height: 44px;
  background-color: #ffcf96;
  border-radius: 50px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
  transition: all 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transform: rotate(-45deg);
}

.toggle__handler .crater {
  position: absolute;
  background-color: #e8cda5;
  opacity: 0;
  transition: opacity 200ms ease-in-out;
  border-radius: 100%;
}

.toggle__handler .crater--1 {
  top: 18px;
  left: 10px;
  width: 4px;
  height: 4px;
}

.toggle__handler .crater--2 {
  top: 28px;
  left: 22px;
  width: 6px;
  height: 6px;
}

.toggle__handler .crater--3 {
  top: 10px;
  left: 25px;
  width: 8px;
  height: 8px;
}

.star {
  position: absolute;
  background-color: #fff;
  transition: all 300ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
  border-radius: 50%;
}

.star--1 {
  top: 10px;
  left: 35px;
  z-index: 0;
  width: 30px;
  height: 3px;
}

.star--2 {
  top: 18px;
  left: 28px;
  z-index: 1;
  width: 30px;
  height: 3px;
}

.star--3 {
  top: 27px;
  left: 40px;
  z-index: 0;
  width: 30px;
  height: 3px;
}

.star--4,
.star--5,
.star--6 {
  opacity: 0;
  transition: all 300ms 0 cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

.star--4 {
  top: 16px;
  left: 11px;
  z-index: 0;
  width: 2px;
  height: 2px;
  transform: translate3d(3px, 0, 0);
}

.star--5 {
  top: 32px;
  left: 17px;
  z-index: 0;
  width: 3px;
  height: 3px;
  transform: translate3d(3px, 0, 0);
}

.star--6 {
  top: 36px;
  left: 28px;
  z-index: 0;
  width: 2px;
  height: 2px;
  transform: translate3d(3px, 0, 0);
}

input:checked+.toggle {
  background-color: #749dd6;
}

input:checked+.toggle:before {
  color: #749ed7;
}

input:checked+.toggle:after {
  color: #fff;
}

input:checked+.toggle .toggle__handler {
  background-color: #ffe5b5;
  transform: translate3d(40px, 0, 0) rotate(0);
}

input:checked+.toggle .toggle__handler .crater {
  opacity: 1;
}

input:checked+.toggle .star--1 {
  width: 2px;
  height: 2px;
}

input:checked+.toggle .star--2 {
  width: 4px;
  height: 4px;
  transform: translate3d(-5px, 0, 0);
}

input:checked+.toggle .star--3 {
  width: 2px;
  height: 2px;
  transform: translate3d(-7px, 0, 0);
}

input:checked+.toggle .star--4,
input:checked+.toggle .star--5,
input:checked+.toggle .star--6 {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

input:checked+.toggle .star--4 {
  transition: all 300ms 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

input:checked+.toggle .star--5 {
  transition: all 300ms 300ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

input:checked+.toggle .star--6 {
  transition: all 300ms 400ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

修复说明 #

• JavaScript逻辑：监听复选框的状态变化，通过classList.toggle()给body添加/移除dark类，实现主题切换的触发。
• CSS适配：
  • 给默认body设置基础文本颜色和平滑过渡效果，提升切换体验。
  • 新增body.dark样式，替换暗色背景图并调整文本颜色。
  • 给页面所有区块添加亮色/暗色主题的适配背景，确保内容可读性。

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