Volantis主题自定义—暗黑模式动画

前往我的博客以获得更好的阅读体验

Volantis主题自定义—暗黑模式动画 - DearXuan的主页https://blog.dearxuan.com/2021/08/25/Volantis%E4%B8%BB%E9%A2%98%E8%87%AA%E5%AE%9A%E4%B9%89%E2%80%94%E6%9A%97%E9%BB%91%E6%A8%A1%E5%BC%8F%E5%8A%A8%E7%94%BB/

主页灵感来自于:miss-reria

本文灵感来自于阳光派plus，原文地址:hexo之Volantis添加暗黑模式

原作者效果

 原js无法兼容volantis自己的暗黑模式，因为它使用了自己的暗黑CSS，与volantis冲突。

本人经过修改之后，删除了原有CSS，这样就算切换模式也不会改变页面样式，同时在volantis的暗黑模式按钮上增加了点击事件，这样可以让用户在主动切换模式时触发动画。

在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,在</body>上面加上:

<%- 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>

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