如何使一个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>

检查它清楚地展示了如何在单击时启用暗模式。

Answer 2

这个问题不是很清楚，但是试试这个:

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

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

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