Volantis主题自定义—暗黑模式动画
Volantis主题自定义—暗黑模式动画
DearXuan
发布于 2022-01-19 18:43:46
发布于 2022-01-19 18:43:46
本文灵感来自于阳光派plus
https://www.zyoushuo.cn/post/e8f5.html
原效果
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>重新生成后运行，可以看到已经出现动画效果
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2021年8月25日，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录