我来帮你排查下问题并给出修正方案：

首先，你的代码逻辑本身是正确的，但大概率是DOM加载时机的问题——如果你的JS代码在页面DOM元素还没渲染完成就执行了，document.getElementsByClassName('ct-sw-input')会获取到一个空集合，自然不会有任何效果。除此之外，还有几个可以优化的点让代码更健壮。

修正后的完整代码 #

document.addEventListener('DOMContentLoaded', function() {
  // 更简洁地获取根html元素
  const root = document.documentElement;
  // 用querySelectorAll获取所有目标input，返回静态NodeList更稳定
  const switchers = document.querySelectorAll('.ct-sw-input');
  // 提取主题判断结果到变量，避免重复调用localStorage
  const isDarkTheme = localStorage.getItem('theme') === 'dark';

  // 遍历处理每个主题开关
  switchers.forEach(switcher => {
    // 设置复选框选中状态
    switcher.checked = isDarkTheme;
    // 用closest查找最近的label父元素，比parentElement更健壮（适配结构变化）
    const parentLabel = switcher.closest('label');
    if (isDarkTheme) {
      parentLabel.classList.add('active');
    } else {
      parentLabel.classList.remove('active');
    }
  });

  // 简化根元素主题类的切换逻辑
  root.classList.toggle('dark-mode', isDarkTheme);
  root.classList.toggle('light-mode', !isDarkTheme);
});

关键改进点说明 #

• 确保DOM加载完成：用DOMContentLoaded事件包裹代码，保证所有目标元素都已渲染完成后再执行操作，这是解决你当前问题的核心；
• 更可靠的元素选择：用querySelectorAll('.ct-sw-input')替代getElementsByClassName，它返回的是静态NodeList，不会随DOM变化自动更新，而且支持直接用forEach遍历，无需手动写for循环；
• 健壮的父元素查找：用closest('label')替代parentElement，哪怕以后HTML结构调整（比如input外面新增一层容器），依然能准确找到对应的label父元素；
• 代码简化与性能优化：将主题判断结果提取为变量isDarkTheme，避免重复读取localStorage；用classList.toggle的第二个参数简化类的添加/移除逻辑，代码更简洁。

对应的HTML结构 #

<label class="switch" title="Dark Skin">
  <input type="checkbox" id="ct-sw" class="ct-sw-input">
  <span class="slider"></span>
</label>

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