带有扩展圆动画的黑暗模式
带有扩展圆动画的黑暗模式
提问于 2021-05-08 00:49:11
我有夜间模式(或黑暗模式)切换按钮在我的页面右上角。
然而，不像上面的链接，我切换夜间模式像下面的代码。
我使用数据主题属性来改变模式.(夜>光>夜)
<body data-theme="">
<div class="toggle" id="switch" onclick="toggleDarkMode()"></div>
</body>JS
function toggleDarkMode() {
var dataTheme = $('body').attr('data-theme');
if(dataTheme == 'dark') {
$('body').attr('data-theme', 'light');
} else {
$('body').attr('data-theme', 'dark');
}
};我需要你的建议，如何切换夜间模式与扩展循环动画与关键帧。
提前感谢！
回答 3
Stack Overflow用户
发布于 2021-05-08 01:45:59
对此，一个非常简单但有效的解决方案是创建一个class dark，您可以在其中放置所有的暗模式风格。然后在单击“class”时添加或删除该class
document.querySelector('.toggle').addEventListener('click', function(e) {
var body = document.getElementsByTagName('body')[0];
body.className = body.className !== 'dark' && 'dark';
}).dark {
background: black;
color: white;
}<body>
<p>Hello world</p>
<button class='toggle'>Dark Mode</button>
</body>
Stack Overflow用户
发布于 2021-05-08 00:59:26
您可以在CSS属性选择器属性的基础上使用data-theme来锁定主体，并对其进行适当的样式设置。
function toggleDarkMode() {
var dataTheme = $('body').attr('data-theme');
if (dataTheme == 'dark') {
$('body').attr('data-theme', 'light');
} else {
$('body').attr('data-theme', 'dark');
}
};body[data-theme="light"] {
background-color: white;
color: black;
}
body[data-theme="dark"] {
background-color: black;
color: white;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body data-theme="light">
<p>Hello world</p>
<button class="toggle" id="switch" onclick="toggleDarkMode()">Toggle Theme</button>
</body>
这将允许您使用任何CSS样式，如从您的问题中提供的链接。
Stack Overflow用户
发布于 2021-05-08 00:59:08
试试这边
<script>
$(document).ready(function(){
$("#switch").click(function(){
var dataTheme = $('body').attr('data-theme');
if(dataTheme == 'dark') {
$('body').attr('data-theme', 'light');
} else {
$('body').attr('data-theme', 'dark');
}
};
});
</script>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/67443094
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号