Blogspot自定义Contempo主题折叠栏深色模式按钮失效修复

问题根源是重复使用了同一个ID modedark，HTML中ID必须唯一，导致JS仅能绑定第一个按钮的事件；同时折叠栏按钮属于动态渲染元素，常规事件绑定无法生效。按以下步骤修改：

1. 修改所有按钮的HTML代码 #

给每个深色模式按钮的input设置唯一ID，同时添加统一类名便于JS/CSS批量选择：

<!-- 原正常按钮 -->
<div class='modedark'>
  <input class='check modedark-input' id='modedark-1' title='Mode Dark' type='checkbox'/>
  <label class='iconmode' for='modedark-1'>
    <svg class='openmode' viewBox='0 0 24 24'>
      <path d='M12,18C11.11,18 10.26,17.8 9.5,17.45C11.56,16.5 13,14.42 13,12C13,9.58 11.56,7.5 9.5,6.55C10.26,6.2 11.11,6 12,6A6,6 0 0,1 18,12A6,6 0 0,1 12,18M20,8.69V4H15.31L12,0.69L8.69,4H4V8.69L0.69,12L4,15.31V20H8.69L12,23.31L15.31,20H20V15.31L23.31,12L20,8.69Z'/>
    </svg>
    <svg class='closemode' viewBox='0 0 24 24'>
      <path d='M14.3,16L13.6,14H10.4L9.7,16H7.8L11,7H13L16.2,16H14.3M20,8.69V4H15.31L12,0.69L8.69,4H4V8.69L0.69,12L4,15.31V20H8.69L12,23.31L15.31,20H20V15.31L23.31,12L20,8.69M10.85,12.65H13.15L12,9L10.85,12.65Z'/>
    </svg>
  </label>
</div>

<!-- 折叠栏内的按钮 -->
<div class='modedark'>
  <input class='check modedark-input' id='modedark-2' title='Mode Dark' type='checkbox'/>
  <label class='iconmode' for='modedark-2'>
    <svg class='openmode' viewBox='0 0 24 24'>
      <path d='M12,18C11.11,18 10.26,17.8 9.5,17.45C11.56,16.5 13,14.42 13,12C13,9.58 11.56,7.5 9.5,6.55C10.26,6.2 11.11,6 12,6A6,6 0 0,1 18,12A6,6 0 0,1 12,18M20,8.69V4H15.31L12,0.69L8.69,4H4V8.69L0.69,12L4,15.31V20H8.69L12,23.31L15.31,20H20V15.31L23.31,12L20,8.69Z'/>
    </svg>
    <svg class='closemode' viewBox='0 0 24 24'>
      <path d='M14.3,16L13.6,14H10.4L9.7,16H7.8L11,7H13L16.2,16H14.3M20,8.69V4H15.31L12,0.69L8.69,4H4V8.69L0.69,12L4,15.31V20H8.69L12,23.31L15.31,20H20V15.31L23.31,12L20,8.69M10.85,12.65H13.15L12,9L10.85,12.65Z'/>
    </svg>
  </label>
</div>

2. 修改JavaScript代码 #

用类选择器替代ID选择器，同时使用事件委托确保动态生成的折叠栏按钮能触发事件，且所有按钮状态同步：

<script type='text/javascript'>//<![CDATA[
$(document).ready(function(){
  // 初始化深色模式状态
  $("body").toggleClass(localStorage.toggled);
  var isNight = $("body").hasClass("Night");
  // 同步所有按钮的选中状态
  $(".modedark-input").prop("checked", isNight);

  // 事件委托绑定点击事件，兼容动态元素
  $(document).on("click", ".modedark-input", function(){
    if(localStorage.toggled !== "Night"){
      $("body").toggleClass("Night", true);
      localStorage.toggled = "Night";
      $(".section-center").css("display", "block");
      $(".modedark-input").prop("checked", true);
    } else {
      $("body").toggleClass("Night", false);
      localStorage.toggled = "";
      $(".section-center").css("display", "");
      $(".modedark-input").prop("checked", false);
    }
  });
});//]]>
</script>

3. 验证CSS代码 #

原有CSS未依赖#modedark选择器，仅使用类选择器，无需修改即可兼容修改后的按钮。

修改完成后，所有深色模式按钮会同步状态并正常触发深色模式切换，包括折叠栏中的按钮。

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