html实现全局夜间模式
时间: 2023-02-07 09:37:00 浏览: 198
在 HTML 中实现全局夜间模式可以使用一个简单的方法:在页面的 `<head>` 中添加一个 `<style>` 标签,然后在标签内写入样式。
你可以使用 CSS 的 `@media` 查询来为夜间模式设置不同的样式。例如,你可以在夜间模式下将背景色设置为黑色,并将文本颜色设置为白色:
```html
<head>
<style>
body {
background-color: black;
color: white;
}
@media (prefers-color-scheme: light) {
body {
background-color: white;
color: black;
}
}
</style>
</head>
```
你还可以使用 JavaScript 来动态地更改样式,以实现夜间模式切换的功能。你可以使用 `matchMedia` 函数来检查用户的颜色方案设置,然后使用 `classList` 属性来添加、删除或切换元素的类。
例如,你可以使用以下代码来检查用户的颜色方案设置,并在夜间模式下添加一个类:
```javascript
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
document.body.classList.add('dark');
}
```
然后你可以使用以下代码来切换夜间模式:
```javascript
function toggleDarkMode() {
document.body.classList.toggle('dark');
}
```
希望这些信息对你有帮助!
阅读全文