jquery实现网页白天与夜晚模式深色模式切换效果代码-html代码-BFW代码库

代码语言：html

代码描述：jquery实现网页白天与夜晚模式深色模式切换效果代码，增加了localstorage保存模式

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
    <style>
        /* reset-css 可以忽略 */
        * {
            margin: 0;
            padding: 0;
        }
        ol,ul {
            list-style: none;
        }
        a:link, a:hover {
            text-decoration: none;
        }
        .clearfix:after {
            /*伪元素是行内元素 正常浏览器清除浮动方法*/
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }
        .clearfix {
            *zoom: 1;
            /*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
        }

        body {
            background: var(--color-whiteblock);
        }
        .title {
            color: var(--color-blockwhite);
            padding-bottom: 30px;
        }
        .content {
            width: 1200px;
            margin: 70px auto;
        }
        .video-img img {
            width: 100%;
            max-height: 335px;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
        }
        .content ul li {
            float: left;
            width: 25%;
        }
        .content ul li .box {
            padding: 15px;
        }
        .video-ct {
            padding: 15px;
        }
        .content ul li .video-box {
            background: var(--color-three);
            border-radius: 10px;
            box-shadow: 0 1px 20px 0 rgb(0 125 255 / 14%);
        }
        .content ul li .video-txt {
            font-size: 16px;
            line-height: 1.7;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 5;
            overflow: hidden;
        }
        .video-name {
            padding-bottom: 15px;
        }
        .video-name, .video-txt {
            color: var(--color-blockwhite);
        }
        .button, .title {
            text-align: center;
        }
        .btn {
            display: inline-block;
            width: 60px;
            height: 60px;
            line-height: 60px;
            border-radius: 50%;
            text-align: center;
            background: #000;
        }
        .on-of {
            cursor: pointer;

            font-size: 30px;

            color: #23527c;
        }

        /* 正常模式 */
:root {
            --color-whiteblock: #ffffff;
            /*正常模式下颜色为白色*/
            --color-blockwhite: #000000;
            --color-one: #efeefd;
            --color-two: #fafafa;
            --color-three: #ffffff;
        }
        /* 深色模式 */
        [data-theme='dark'] {
            --color-whiteblock: #161B2A;
            /*开启深色模式颜色为黑色*/
            --color-blockwhite: #ffffff;
            --color-one: #070615;
            --color-two: #161b2a;
            --color-three: #070615;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="content clearfix">
            <h1 class="title">网页深色模式</h1>
            <ul>
                <li>
                    <div class="box">
                        <div class="video-box">
                            <div class="video-img">
                                <img src="//repo.bfw.wiki/bfwrepo/image/5fc1ae951e91a.png" alt="悬崖之上">
                            </div>
                            <div class="video-ct">
                                <h3 class="video-name">悬崖之上</h3>
                                <p class="video-txt">
                                    上世纪三十年代，四位曾在苏联接受特训的共产党特工组成任务小队，回国执行代号为“乌特拉”的秘密行动。由于叛徒的出卖，他们从跳伞降落的第一刻起， 就已置身于敌人布下的罗网之中。同志能否脱身，任务能否完成，雪一直下，立于“悬崖之上”的行动小组面临严峻考验。
                                </p>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="box">
                        <div class="video-box">
                            <div class="video-img">
                                <img src="//repo.bfw.wiki/bfwrepo/image/5fc1aecf36d5a.png" alt="扫黑·决战">
                            </div>
                            <div class="video-ct">
                                <h3 class="video-name">扫黑·决战</h3>
                                <p class="video-txt">
                                    该片是国内首部以“扫黑除恶”行动为题材、展现全国扫黑办督办案件的影视化作品，讲述某扫黑专案组组长宋一锐带领组员由一起征地案深入调查，突破层层阻挠，与幕后的黑恶势力展开激烈斗争，最终揭开腐败官员利用公职权力充当犯罪保护伞的虚伪面具，将犯罪分子绳之以法的故事。
                                </p>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="box">
                        <div class="video-box">
                            <div class="video-img">
                                <img src="//repo.bfw.wiki/bfwrepo/image/5fc1af0ba6cc.........完整代码请登录后点击上方下载按钮下载查看