网站白天or黑夜模式来回切换源代码-源代码-雅爱博客

网站白天or黑夜模式來回切換源代码，网站白天or黑夜模式来回切换源代码，现在这个方法只需用一个按钮就可以在【白天模式】&【黑夜模式】之间来回切换啦！并且载入新页面仍保持著黑暗模式。

Markup

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>暗夜模式,雅爱笔记，yaaibk.com每天更新一点点</title>

<link rel="stylesheet" type="text/css" href="1.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>

</head>
<body>
<div class="scene scene--card sundarkmodep">
  <div>
    <div class="card__face card__face--front"><span class="fa fa-moon" aria-hidden="true">暗夜模式</div>
    <div class="card__face card__face--back"><span class="fa fa-sun" aria-hidden="true">白昼模式</div>
  </div>
</div>
<script type="text/javascript">
//翻转动画
var card = document.querySelector('.card');
card.addEventListener('click',function() {
    card.classList.toggle('is-flipped');
});

/*
//换颜色
  $('.sundarkmodep').click(function(){
    $('*').toggleClass("darkmodecolor");
});
*/
</script>

<script>

$('.sundarkmodep').click(function() {

    if ($('*').hasClass("darkmodecolor")) {
        $.removeCookie('darkmodeStatus', {
            path: '/'
        });
        $.cookie('darkmodeStatus', 'sunmode', {
            path: '/'
        });
    } else if (!$('.main-body').hasClass("darkmodecolor")) {
        $.removeCookie('darkmodeStatus', {
            path: '/'
        });
        $.cookie('darkmodeStatus', 'darkmode', {
            path: '/'
        });
    }

    $('*').toggleClass("darkmodecolor");
});

var darkmodeStatus = $.cookie('darkmodeStatus');

if (darkmodeStatus == 'darkmode') {
    $('*').addClass("darkmodecolor");
} else if (darkmodeStatus == 'sunmode') {
    $('*').removeClass("darkmodecolor");
}

</script>

 </body>
</html>

CSS

/*---------------------------------
http://yaaibk.com
----------------------------------*/
.scene {
    width: 100px;
    height: 30px;
    perspective: 600px;
    position: fixed;
    z-index: 99999;
    top: 50px;
    right: 5px;
}

.card {
    width: 100%;
    height: 100%;
    cursor: pointer;
    transform-style: preserve-3d;
    transform-origin: center right;
    transition: transform 1s;
    border: 1px solid rgb(150, 150, 150, .5);
}

.card.is-flipped {
    transform: translateX(-100%) rotateY(-180deg);
}

.card__face {
    position: absolute;
    width: 100%;
    height: 100%;
    text-align: center;
    font-size: 16px;
    backface-visibility: hidden;
}

.card__face--front {
    color: black !important;
    background: white;
}

.card__face--front:hover {
    color: white !important;
    background-color: black;
}

.card__face--back {
    color: white !important;
    background: black;
    transform: rotateY(180deg);
}

.card__face--back:hover {
    color: black !important;
    background-color: white;
}

.darkmodecolor {
    background-color: #2B2B2B !important;
    color: #C5C5C5 !important;
    box-shadow: none;
}

本文地址：https://yaaibk.com/post/288.html
温馨提示：文章内容系作者个人观点，不代表雅爱博客对观点赞同或支持。
版权声明：本文为转载文章，来源于点击这里，版权归原作者所有，欢迎分享本文，转载请保留出处！