【网站】给网站添加一个夜间模式切换按钮

使用CSS和JavaScript在明暗模式之间切换。

1.添加CSS

设置<body>元素的样式并创建.dark-mode用于切换的类

body {padding: 25px;background-color: white;color: black;font-size: 25px;
}.dark-mode {background-color: black;color: white;
}

2。添加JavaScript

获取<body>元素并在.dark-mode类之间切换：

function myFunction() {var element = document.body;element.classList.toggle("dark-mode");
}

3.完整代码

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {padding: 25px;background-color: white;color: black;font-size: 25px;
}.dark-mode {background-color: black;color: white;
}
</style>
</head>
<body><h2>Toggle Dark/Light Mode</h2>
<p>Click the button to toggle between dark and light mode for this page.</p><button onclick="myFunction()">Toggle dark mode</button><script>
function myFunction() {var element = document.body;element.classList.toggle("dark-mode");
}
</script></body>
</html>

4.演示

【网站】给网站添加一个夜间模式切换按钮相关推荐

html怎么把一段文字设置为连接到下一个网页的按钮,为主页添加一个漂亮的按钮（上）_html...
是不是在做网页时,为按钮的制作发过愁啊?用图片做按钮的话,影响速度,不用图片,网页里自带的按钮真的是不感恭维,真是最近比较烦,其实,有了css(Cascading Style Sheet的缩写,层叠样 ...
android 个性按钮,酷炫的日间夜间模式切换按钮
前言最近看到一个酷炫的日间夜间模式切换按钮,于是就动手写了仿写了一个. 这里是Github链接,欢迎star,fork... PO上效果图,录制的不太好主要的编写思路这里主要是用属性动画中的Va ...
如何在WordPress中添加Pinterest“ Pin It”按钮（最终指南）
Do you want to add the Pinterest "Pin It" button in WordPress? Recently, a new traffic sou ...
iOS之给WebView导航栏添加“返回”与“关闭”按钮
一.需求说明在iOS开发中,不免有原生与H5的交互,比如说:从原生页面的一个按钮,点击之后跳转到了一个H5的页面A,A页面中又有一个按钮,点击之后,又加载了一个新的H5页面B,从B点击一个按钮,又加 ...
博客园添加一个分享的
给自己的博客添加一个分享的按钮吧!! 可以遇见更多志同道合的人呀!!! 使用百度的一键生成按钮就可以了:http://share.baidu.com/code 或者自己写一个也是一样的 <!-- ...
[RK3568 Android11] 开发之开发者选项中添加USB OTG模式切换（二）
目录前言一.开发者选项中添加USB OTG模式切换按钮二.按钮添加功能前言上一篇已讲解创建OTG模式的系统全局变量,此篇讲解怎么在设置应用->开发者选项中添加USB OTG切换按钮 ...
【嘉然live2d】来给WP网站添加一个live2
look,同款下图的成果~ 教程开始下载解压包,上传到你的主题目录上. 然后复制下面代码保存到主题目录的 footer.php文件放在</body>的下面,并修改成你的live ...
为网站代码块pre标签增加一个复制代码按钮代码
写文章的时候,作为一名专业的码农,经常会在文章中粘贴一些代码.有的时候代码块比较长,在后期使用中需要复制这段代码就比较麻烦参考其他比较专业的博客系统,都在代码块上有一个复制代码的按钮.用来快速复制整 ...
NProgress.js - 前端全站进度条插件 - 给你的网站添加一个加载进度条
0x00 前言前几天给博客换了@Veen Zhao大佬的Cuteen主题,非常好看,但是因为不想让自己的博客和其他人的千篇一律,于是决定在Cuteen主题的前提下逐渐设计一些自己需要的东西.正巧前几 ...

【网站】给网站添加一个夜间模式切换按钮

1.添加CSS

2。添加JavaScript

3.完整代码

4.演示

【网站】给网站添加一个夜间模式切换按钮相关推荐

最新文章

热门文章