如何设置HTML页面默认加载为深色模式且不使用onClick触发？

• 第一步：给复选框添加checked原生属性，实现默认选中效果。你之前尝试的default并非HTML复选框的合法默认选中属性，正确属性为checked。
  修改后的对应代码段如下：

<div>
  <div class='flex fdcr aic mt-5 mr-13'>
    <label class='modeSwitch'>
      <input onclick='darkMode()' class='check flex' type='checkbox' checked/>
      <span class='toggleSwitch'/>
    </label>
  <div>

• 第二步：页面加载时主动触发一次深色模式逻辑，避免仅复选框选中但样式未生效的问题，两种实现方案可选：
  方案1：直接给body标签添加onload属性
  代码：<body onload="darkMode()">
  方案2：在页面</body>标签前插入JS监听加载事件
  代码：

  <script>
    window.addEventListener('load', darkMode)
  </script>
  

如果你编写的darkMode()函数本身就是根据复选框的选中状态判断要加载的样式，以上修改完成后即可实现默认开启深色模式的效果，原有onclick属性可以保留，不影响用户后续手动切换明暗模式。

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