抱歉,您的浏览器无法访问本站

本页面需要浏览器支持(启用)JavaScript


了解详情 >

本文灵感来自于阳光派plus

原效果

DearXuan

修改思路

原js会在页面左下角绘制一个按钮,点击之后会使用自己的CSS来改变颜色,但是volantis已经有了自己的暗黑模式CSS,并且两者在检测暗黑模式上也用了不同的变量,导致暗黑模式被两次开启的bug。
考虑到原作者开关暗黑模式其实是执行特定的js代码,因此只需要修改主题的“暗黑模式”按钮,让用户点击时执行原作者的js代码就可以实现动画效果

方法

在volantis/layout/_partial下新建文件”darkmode.ejs”,添加以下代码

<script>
    function music_on() {
        var audio1 = document.getElementById('bg_music');
        if (audio1.paused) {
            audio1.play();
        }else{
            audio1.pause();
            audio1.currentTime = 0;//音乐从头播放
        }
    }
    function BackTOP() {
        $("#btn").hide();
        $(function () {
            $(window).scroll(function () {
                if ($(window).scrollTop() > 50) {
                    $("#btn").fadeIn(200);
                } else {
                    $("#btn").fadeOut(200);
                }
            });
            $("#btn").click(function () {
                $('body,html').animate({
                        scrollTop: 0
                    },
                    500);
                return false;
            });
        });
        $(function () {
            $("#say").click(function () {
                $('body,html').animate({
                        scrollTop: $('html, body').get(0).scrollHeight
                    },
                    500);
                return false;
            });
        })
    }
 
    $('#readmode').click(function () {
            $('body').toggleClass('read-mode')
        })
        
    function SiderMenu() {
        $('#main-container').toggleClass('open');
        $('.iconflat').css('width', '50px').css('height', '50px');
        $('.openNav').css('height', '50px');
        $('#main-container,#mo-nav,.openNav').toggleClass('open')
    }
 
    function switchNightMode() {
        $('<div class="Cuteen_DarkSky"><div class="Cuteen_DarkPlanet"></div></div>').appendTo($("body")), setTimeout(
            function () {
                var DarkMode = document.cookie.replace(/(?:(?:^|.*;\s*)DarkMode\s*\=\s*([^;]*).*$)|^.*$/, "$1") ||
                    '0';
                (volantis.dark.mode == "dark") 
                ? 
                ($("html").addClass("DarkMode"), 
                document.cookie = "DarkMode=1;path=/", 
                $('#modeicon').attr("xlink:href", "#icon-sun")) 
                : 
                ($("html").removeClass("DarkMode"), 
                document.cookie = "DarkMode=0;path=/", 
                $('#modeicon').attr("xlink:href", "#icon-_moon")), 
                setTimeout(function () {
                    $(".Cuteen_DarkSky").fadeOut(1e3, function () {
                        $(this).remove()
                    })
                }, 2e3)
            }), 50
    }
 
    function checkNightMode() {
        if ($("html").hasClass("n-f")) {
            $("html").removeClass("day");
            $("html").addClass("DarkMode");
            $('#modeicon').attr("xlink:href", "#icon-sun")
            return;
        }
        if ($("html").hasClass("d-f")) {
            $("html").removeClass("DarkMode");
            $("html").addClass("day");
            $('#modeicon').attr("xlink:href", "#icon-_moon")
 
            return;
        }
        if (document.cookie.replace(/(?:(?:^|.*;\s*)DarkMode\s*\=\s*([^;]*).*$)|^.*$/, "$1") === '') {
            if (volantis.dark.mode == "dark") {
                $("html").addClass("DarkMode");
                document.cookie = "DarkMode=1;path=/";
                console.log('夜间模式开启');
                $('#modeicon').attr("xlink:href", "#icon-sun")
            } else {
                $("html").removeClass("DarkMode");
                document.cookie = "DarkMode=0;path=/";
                console.log('夜间模式关闭');
                $('#modeicon').attr("xlink:href", "#icon-_moon")
            }
        } else {
            var DarkMode = document.cookie.replace(/(?:(?:^|.*;\s*)DarkMode\s*\=\s*([^;]*).*$)|^.*$/, "$1") || '0';
            if (DarkMode == '0') {
                $("html").removeClass("DarkMode");
                $('#modeicon').attr("xlink:href", "#icon-_moon")
            } else if (DarkMode == '1') {
                $("html").addClass("DarkMode");
                $('#modeicon').attr("xlink:href", "#icon-sun")
            }
        }
    }
    BackTOP();
</script>
 
<style>
    #RightDownBtn {
        position: fixed;
        left: 1.875rem;
        bottom: 1.875rem;
        padding: 0.3125rem 0.625rem;
        background: #fff;
        border-radius: 0.1875rem;
        transition: 0.3s ease all;
        z-index: 1;
        align-items: flex-end;
        flex-direction: column;
        display: -moz-flex;
        display: flex;
        float: right;
    }
 
    #RightDownBtn>a,
    #RightDownBtn>label {
        width: 1.5em;
        height: 1.5em;
        margin: 0.3125rem 0;
        transition: .2s cubic-bezier(.25, .46, .45, .94);
    }
 
    /* font color */
    .DarkMode #page,
    .DarkMode #colophon,
    .DarkMode #vcomments .vbtn,
    .DarkMode .art-content #archives .al_mon_list .al_mon,
    .DarkMode .art-content #archives .al_mon_list span,
    .DarkMode body,
    .DarkMode .art-content #archives .al_mon_list .al_mon,
    .DarkMode .art-content #archives .al_mon_list span,
    .DarkMode button,
    .DarkMode .art .art-content #archives a,
    .DarkMode textarea,
    .DarkMode strong,
    .DarkMode a,
    .DarkMode p,
    .DarkMode li,
    .DarkMode .label {
        color: rgba(255, 255, 255, .6);
    }
 
    
    .DarkMode #page,
    .DarkMode body,
    .DarkMode #colophon,
    .DarkMode #main-container,
    .DarkMode #page .yya,
    .DarkMode #content,
    .DarkMode #contentss,
    .DarkMode #footer {
        background-color: #292a2d;
    }
    .DarkMode strong,
    .DarkMode img {
        filter: brightness(.7);
    }
 
    /* sun and noon */
    .Cuteen_DarkSky,
    .Cuteen_DarkSky:before {
        content: "";
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        z-index: 88888888
    }
 
    .Cuteen_DarkSky {
        background: linear-gradient(#feb8b0, #fef9db)
    }
 
    .Cuteen_DarkSky:before {
        transition: 2s ease all;
        opacity: 0;
        background: linear-gradient(#4c3f6d, #6c62bb, #93b1ed)
    }
 
    .DarkMode .Cuteen_DarkSky:before {
        opacity: 1
    }
 
    .Cuteen_DarkPlanet {
        z-index: 99999999;
        position: fixed;
        left: -50%;
        top: -50%;
        width: 200%;
        height: 200%;
        -webkit-animation: CuteenPlanetMove 2s cubic-bezier(.7, 0, 0, 1);
        animation: CuteenPlanetMove 2s cubic-bezier(.7, 0, 0, 1);
        transform-origin: center bottom
    }
 
    @-webkit-keyframes CuteenPlanetMove {
        0% {
            transform: rotate(0)
        }
 
        to {
            transform: rotate(360deg)
        }
    }
 
    @keyframes CuteenPlanetMove {
        0% {
            transform: rotate(0)
        }
 
        to {
            transform: rotate(360deg)
        }
    }
 
    .Cuteen_DarkPlanet:after {
        position: absolute;
        left: 35%;
        top: 40%;
        width: 9.375rem;
        height: 9.375rem;
        border-radius: 50%;
        content: "";
        background: linear-gradient(#fefefe, #fffbe8)
    }
</style>

打开volantis/layout/layout.ejs,在上面加上:

<%- partial('_partial/darkmode', null, {cache: !config.relative_link}) %>

打开volantis/layout/_partial/header.ejs
搜索darkmode,如果文件没有被修改,应该出现在第37行
在下面可以看到一个a标签,为该标签添加点击事件

onclick="switchNightMode()"

打开volantis/layout/_plugins/rightmenu/layout.ejs,搜索darkmode
添加点击事件

<li class='option menuOption-Content' onclick="switchNightMode()">
  <span class='vlts-menu opt fix-cursor-default toggle-mode-btn' id='menuDarkBtn'>
    <i class='<%= theme.rightmenu.darkmode.icon %> fa-fw '></i> <%- trim(theme.rightmenu.darkmode.name) %>
  </span>
</li>

重新生成后运行,可以看到已经出现动画效果

评论