暗黑模式估计是今年最流行的网页配色了
学习一点，进步一点。
这个效果还是挺实用的，很多网页都有，但能找到的教程都不全面，或者是罗里吧嗦的长篇大论。
能用最简单的方式实现，就绝不拖泥带水。
直接上代码了，记录一下学习的成果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
/* 基本白天的css样式 */
.box {
width: 300px;
height: 300px;
background: orange;
}
/* 黑夜样式 */
html[dark='true'] body {
background: #333;
color:#bbb
}
html[dark='true'] .box {
background: red;
}
#dark{cursor:pointer}
</style>
</head>
<body>
<!--darkmode start-->
<div class="box"></div>
<a id="dark" href="javascript:">黑</a>
<!--darkmode end-->
</body>
</html>
<script>
if (localStorage.getItem('dark')) {
$('html').attr('dark', true)
$('#dark').text('白')
} else {
$('html').removeAttr('dark', true)
$('#dark').text('黑')
}
$('#dark').on('click', function () {
if ($('html').attr('dark')) {
$('html').removeAttr('dark')
localStorage.removeItem('dark')
$('#dark').text('黑')
} else {
$('html').attr('dark', true)
localStorage.setItem('dark', true)
$('#dark').text('白')
}
})
</script>
评论 (0)