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

柔光的暖阳◎ 2023-03-06 08:08 40阅读 0赞

使用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.演示 ##

![format_png][]

![format_png 1][]

[format_png]: /images/20230208/d566c4dde9784c1d857d03c196681246.png
[format_png 1]: /images/20230208/5cfbb31410484b25ba4b8d7bb4d52b19.png

发表评论取消回复

表情：

评论列表（有 0 条评论，40人围观）

还没有评论，来说两句吧...

相关阅读

相关 Android动态切换夜间模式的实现方案

Android开发中经常会遇到夜间模式等主题切换的需求，最常见的方案是通过setTheme切换Activity主题来实现。但是这种方案的缺点是每次切换主题后需要restart整

阳光穿透心脏的1/2处/ 2023年07月21日 06:19/ 0 赞/ 82 阅读

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

使用CSS和JavaScript在明暗模式之间切换。 1.添加CSS 设置`<body>`元素的样式并创建`.dark-mode`用于切换的类 body {

柔光的暖阳◎/ 2023年03月06日 08:08/ 0 赞/ 41 阅读

相关给网站文字添加图标-Font Awesome

Font Awesome图标库是很多站长都在使用的，使用起来也非常的简单有一些主题的目录啊导航等都没有图标，光秃秃的，我正在使用的大前端也是这样，给导航或分类添加一个图标会让网

怼烎@/ 2023年03月06日 08:08/ 0 赞/ 176 阅读

相关【设计】拟物时钟-夜间模式切换

先看效果： ![fdba84c02f229c476df254d949a9838e.png][] ![4aa123385f08ea361568367def2f3655.png

ゝ一纸荒年。/ 2022年09月03日 15:26/ 0 赞/ 179 阅读

相关夜间模式

DKNightVersion 的实现 --- 如何为 iOS 应用添加夜间模式 2015年05月09日在很多重阅读或者需要在夜间观看的软件其实都会把夜间模式当做一个

偏执的太偏执、/ 2022年07月29日 09:20/ 0 赞/ 189 阅读

相关在网站上添加加入QQ群的按钮加群按钮网站加群按钮添加加群按钮 QQ群按钮

<a target="_blank" href="http://qun.qq.com/jointhegroup/gid/QQ群号"> <img border=

淡淡的烟草味﹌/ 2022年04月14日 02:16/ 0 赞/ 290 阅读

相关一个网站的建设步骤（写给新手）

网站建设前的规划：首先要确定你要建的是是什么类型站点，要预先策划好网站的整体内容，次之要确定网站的发展方向和目标。建设一个网站一般分为以下几点进行: 1

旧城等待，/ 2022年03月20日 01:54/ 0 赞/ 294 阅读

相关给网站动态增加一个favicon

给网站动态增加一个favicon var docHead = document.getElementsByTagName('head')\[0\];

我会带着你远行/ 2022年03月19日 05:12/ 0 赞/ 592 阅读

相关如何给个人网站添加免费的SSL

背景最近站点总是被劫持，劫持什么意思喃？按照官方的说法就是所谓的网站劫持就是打开一个网站，出现一个不属于网站范畴的广告，或者是无法跳转到某个不属于这个范畴的网页。比如

痛定思痛。/ 2022年02月20日 08:08/ 0 赞/ 170 阅读

相关给网站添加HTTPS(添加SSSL证书)

给网站添加HTTPS(添加SSSL证书) 一、HTTP和HTTPS的区别 [ 点击查看区别 ][Link 1] 二、如何给你的网站添加SL证书这里我以阿

不念不忘少年蓝@/ 2022年01月28日 10:23/ 0 赞/ 497 阅读