自定义一个简单的网站模式切换功能

1,330次阅读

没有评论

共计 5404 个字符，预计需要花费 14 分钟才能阅读完成。

该文章最后更新于2024-04-25 10:44，某些内容具有时效性，若有错误或已失效，请谅解！

自定义一个简单的网站模式切换功能

一直想做一个暗黑模式，可惜一直不得空，最近终于有了时间，弄了一个简单的模式切换功能。

模式切换靠JS以及JS写入本地的缓存。

H5代码

下面代码放在主页顶部

<div class="trm-mode-swich-animation-frame">
    <div class="trm-mode-swich-animation">
        <i class="far fa-sun"></i>
        <div class="trm-horizon"></div>
        <i class="far fa-moon"></i></div>
</div>

下面代码放在上面代码的下方特别需要注意的是id="trm-scroll-container" 必须要有

<div id="trm-scroll-container">

下面代码很重要是按钮的 H5 代码不能有任何缺少不然都不能正常使用

<button class="trm-mode-switcher-place icon-button"></button>

下面代码放在主页尾部 JS前面

<div class="trm-hidden-switcher">
    <div class="trm-mode-switcher">
        <input class="tgl tgl-light" id="trm-swich" type="checkbox">
        <label class="trm-swich" for="trm-swich"></label>
    </div>
</div>

JS代码

$(function() {
    "use strict";

    $('.trm-mode-switcher').clone().appendTo('.trm-mode-switcher-place');
    $('#trm-swich').change(function() {
    if (localStorage.getItem("ailcc-theme-css") == null || localStorage.getItem("ailcc-theme-css") === "false") {
        //获取本地缓存 为空则默认明亮模式
      $('.trm-hidden-switcher input').prop("checked", true);
      $('.trm-mode-swich-animation-frame').addClass('trm-active');
      $("#trm-scroll-container").animate({
        opacity: 0,
      }, 600, function() {
        setTimeout(function() {
          $('.trm-mode-swich-animation').addClass('trm-active');
          $("#trm-switch-style").attr("href", "../static/default/css/style-dark.css");
          localStorage.setItem('ailcc-theme-css', 'true');
            //ailcc-theme-css=true 写入缓存
        }, 200);
        setTimeout(function() {
          $('.trm-mode-swich-animation-frame').removeClass('trm-active');
          $("#trm-scroll-container").animate({
            opacity: 1,
          }, 600);
        }, 1000);
      });
    } else if(localStorage.getItem("ailcc-theme-css") === "true") {
      $('.trm-hidden-switcher input').prop("checked", false);
      $('.trm-mode-swich-animation-frame').addClass('trm-active');
      $('.trm-mode-swich-animation').addClass('trm-active');
      $("#trm-scroll-container").animate({
        opacity: 0,
      }, 600, function() {
        setTimeout(function() {
          $('.trm-mode-swich-animation').removeClass('trm-active');
          $("#trm-switch-style").attr("href", "../static/default/css/style-light.css");
            localStorage.setItem('ailcc-theme-css', 'false');
            //ailcc-theme-css=false 写入缓存
        }, 200);
        setTimeout(function() {
          $('.trm-mode-swich-animation-frame').removeClass('trm-active');
          $("#trm-scroll-container").animate({
            opacity: 1,
          }, 600);
        }, 1000);
      });
    }
  });

});

CSS样式就自行搞定吧，下面的是我自己用的，每个人的审美不一样

.trm-hidden-switcher{
    display:none
}
.trm-mode-switcher-place .trm-mode-switcher{
    margin-right:0px;
    display:flex;
    justify-content:center;
    align-items:center;
    margin: auto;
    transform: translateY(15%);
}
.trm-mode-switcher-place .trm-mode-switcher i{
    margin:0 7px;
    font-size:12px
}
.trm-mode-switcher-place .trm-mode-switcher .tgl {
    display:none
}
.trm-mode-switcher-place .trm-mode-switcher .tgl,.trm-mode-switcher-place .trm-mode-switcher .tgl *,.trm-mode-switcher-place .trm-mode-switcher .tgl *:after,.trm-mode-switcher-place .trm-mode-switcher .tgl *:before,.trm-mode-switcher-place .trm-mode-switcher .tgl+.icon-settings,.trm-mode-switcher-place .trm-mode-switcher .tgl:after,.trm-mode-switcher-place .trm-mode-switcher .tgl:before {
    box-sizing:border-box
}
.trm-mode-switcher-place .trm-mode-switcher .tgl::selection,.trm-mode-switcher-place .trm-mode-switcher .tgl *::selection,.trm-mode-switcher-place .trm-mode-switcher .tgl *:after::selection,.trm-mode-switcher-place .trm-mode-switcher .tgl *:before::selection,.trm-mode-switcher-place .trm-mode-switcher .tgl+.icon-settings::selection,.trm-mode-switcher-place .trm-mode-switcher .tgl:after::selection,.trm-mode-switcher-place .trm-mode-switcher .tgl:before::selection {
    background:0
}
.trm-mode-switcher-place .trm-mode-switcher .tgl+.trm-swich {
    cursor:pointer;
    display:block;
    text-indent:-9999px;
    width:20px;
    height:20px;
    background:url(../svg/sun.svg);
    background-size:20px 20px;
    margin-top:-4px;
}
.trm-mode-swich-animation-frame {
    position:fixed;
    width:100%;
    height:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    opacity:0;
    pointer-events:none;
    transition:.4s ease-in-out
}
.trm-mode-swich-animation-frame.trm-active {
    opacity:1
}
.trm-mode-swich-animation-frame .trm-mode-swich-animation {
    margin-bottom:40px;
    width:80px;
    height:55px;
    position:relative;
    overflow:hidden;
    text-align:center
}
.trm-mode-swich-animation-frame .trm-mode-swich-animation:before {
    content:'';
    height:1px;
    width:120%;
    border-bottom:dotted 5px #dedee0;
    position:absolute;
    z-index:9;
    bottom:0;
    left:-10%
}
.trm-mode-swich-animation-frame .trm-mode-swich-animation .fa-sun {
    position:absolute;
    z-index:0;
    top:0;
    font-size:32px;
    margin-left:-15px;
    opacity:1;
    color:#dedee0;
    transition:.6s ease-in-out
}
.trm-mode-swich-animation-frame .trm-mode-swich-animation .fa-moon {
    position:absolute;
    z-index:0;
    top:0;
    font-size:32px;
    margin-left:-15px;
    color:#dedee0;
    opacity:0;
    transform:translateY(70px) rotate(0);
    transition:.6s ease-in-out
}
.trm-mode-swich-animation-frame .trm-mode-swich-animation.trm-active .fa-sun {
    transform:translateY(70px) rotate(360deg);
    opacity:0
}
.trm-mode-swich-animation-frame .trm-mode-swich-animation.trm-active .fa-moon {
    transform:translateY(0) rotate(360deg);
    opacity:1
}

最主要的是前台的CSS切换。

<script type="text/javascript">
if(localStorage.getItem("ailcc-theme-css") == null || localStorage.getItem("ailcc-theme-css") === "false") {    //获取本地缓存 如为空则默认为明亮模式
        document.write('<link type="text/css" rel="stylesheet" href="{$config.microblog}__CSS__/style-light.css" id="trm-switch-style">');  
    } else {
        document.write('<link type="text/css" rel="stylesheet" href="{$config.microblog}__CSS__/style-dark.css" id="trm-switch-style">');

    }
</script>

正文完

微信扫码打开小程序体验更多功能