如何在默认情况下在暗模式下创建 HTML 页面视图？

Question

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

这是我的 HTML 代码的一部分。加载页面时，默认情况下应处于暗模式。有没有办法在不使用 `onClick.

的情况下解决这个问题

我什至尝试将 onclick 替换为默认设置，但没有用。我是 HTML 的新手，请帮助我。

Answer 1

您可以定义深色模式和浅色模式所需的样式。

<style>
  body {
    padding: 25px;
    background-color: black;
    color: white;
    font-size: 25px;
  }
  .dark-mode {
    background-color: black;
    color: white;
  }
  .light-mode {
    background-color: white;
    color: black;
  }
</style>

然后您可以创建在单击按钮时调用样式的 JS 函数。

<script>
  function darkMode() {
    var element = document.body;
    var content = document.getElementById("DarkModetext");
    element.className = "dark-mode";
    content.innerText = "Dark Mode is ON";
  }
  function lightMode() {
    var element = document.body;
    var content = document.getElementById("DarkModetext");
    element.className = "light-mode";
    content.innerText = "Dark Mode is OFF";
  }
</script>

Check this 它清楚地显示了如何在单击时启用暗模式。

Answer 2

问题不清楚，试试这个：

<input onclick='lightMode()' class='check flex' type='checkbox' checked/>

您需要将 checked 属性添加到输入标签。并且您需要创建一个 LightMode() 函数来将暗模式更改为亮模式。

但这只是一种一次性解决方案。

如何在默认情况下在暗模式下创建 HTML 页面视图？

How to make a HTML page view in dark mode on default?

html

themes

blogger