抱歉，您的浏览器无法访问本站
本页面需要浏览器支持（启用）JavaScript
了解详情 >

volantis主题自定义-暗黑模式动画(2022新版)

JavaScriptVolantis魔改大全

发布于：2022年8月18日

次浏览

文章合并

本文内容已修改并合并到文章Volantis魔改教程里,点击前往

效果

DearXuan

原版代码只提供了触发动画的函数,需要手动添加到onclick里,得修改主题源码,非常不方便.这里我修改了一下代码,使之更方便使用:

  1. 删除了原版的cookie,直接使用volantis.dark来判断当前模式
  2. 把动画函数绑定至volantis.dark,不需要手动添加onclick

引入文件

在 volantis/source/custom/ 下创建文件"darkmode.js"和"darkmode.css",这里的目录和文件名可以任选.但是建议搞一个专门放自定义文件的文件夹,以免混淆

你也可以放到其他地方

volantis/source/custom/darkmode.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
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 () {
            (volantis.dark.mode == "dark") 
            ? 
            ($("html").addClass("DarkMode"),
            $('#modeicon').attr("xlink:href", "#icon-sun")) 
            : 
            ($("html").removeClass("DarkMode"),
            $('#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 (volantis.dark.mode == "dark") {
        $("html").addClass("DarkMode");
        $('#modeicon').attr("xlink:href", "#icon-sun")
    } else {
        $("html").removeClass("DarkMode");
        $('#modeicon').attr("xlink:href", "#icon-_moon")
    }
}
BackTOP();
window.addEventListener('load', ()=>{
    volantis.dark.push(()=>{
        switchNightMode();
    })
}, {once: true})
volantis/source/custom/darkmode.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
#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)
}

在head里引入这两个文件,根据你的文件实际地址修改

hexo/source/_volantis/headBegin.ejs
1
2
<script src="/custom/darkmode.js"></script>
<link rel="stylesheet" href="/custom/darkmode.css" type="text/css"/>

到这里就已经完成了添加

更新于：2023年8月5日

前端

评论



😒再看，再看，再看就把你吃掉!