点击深色模式切换按钮如何同步关闭video元素的boxShadow效果

问题原因 #

你当前的代码逻辑中，每次点击切换按钮都会强制给视频元素设置固定的boxShadow属性，没有判断深色模式的开关状态，所以关闭深色模式时阴影样式永远不会被清除。

修复方案 #

利用你已经在按钮上切换的lightsoff类作为状态判断依据：当按钮有该类（深色模式开启）时给视频加阴影，没有该类（深色模式关闭）时清空阴影样式即可。
修改后的JS代码如下：

/* show/hide overlay & toggle style of button */
$(".togglelight").click(function() {
  $(this).toggleClass("lightsoff");
  $(".overlay").fadeToggle(700);
  const videoEl = document.getElementById("example-video");
  // 判断当前深色模式状态
  if ($(this).hasClass("lightsoff")) {
    // 深色模式开启，添加阴影
    videoEl.style.boxShadow = "#161616 0px 1px 1px 0px inset, #f44336 0px 50px 100px -20px, #f44336 0px 30px 60px -30px";
  } else {
    // 深色模式关闭，清空阴影
    videoEl.style.boxShadow = "none";
  }
});

可选优化方案 #

你也可以把阴影样式放到CSS类中统一管理，避免JS硬编码样式，后期维护更灵活：
首先新增CSS规则：

.dark-mode-video-shadow {
  box-shadow: #161616 0px 1px 1px 0px inset, #f44336 0px 50px 100px -20px, #f44336 0px 30px 60px -30px;
}

JS逻辑可以简化为：

$(".togglelight").click(function() {
  $(this).toggleClass("lightsoff");
  $(".overlay").fadeToggle(700);
  $("#example-video").toggleClass("dark-mode-video-shadow");
});

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