mirrors/sakura
1
0
Fork 0
mirror of https://github.com/mashirozx/sakura.git synced 2024-11-29 10:18:12 +08:00
Code Issues Projects Releases Wiki Activity

feat: add dark mode

Browse Source 
add dark mode, replace theme built-in night mode. This style auto on at night, off in the day
close #213
This commit is contained in:
Spirit 2020-04-09 15:05:03 +08:00
parent 777b91817c
commit 6dff427071
6 changed files with 117 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
footer.php
View File

@ -66,6 +66,7 @@
</div><!-- m-nav-center end -->
<a class="cd-top faa-float animated "></a>
<button id="moblieGoTop" title="Go to top"><i class="fa fa-chevron-up" aria-hidden="true"></i></button>
<button id="moblieDarkLight"><i class="fa fa-moon-o" aria-hidden="true"></i></button>
<!-- search start -->
<form class="js-search search-form search-form--modal" method="get" action="<?php echo home_url(); ?>" role="search">
<div class="search-form__inner">

1
functions.php
View File

@ -666,6 +666,7 @@ function akina_body_classes($classes)
/*if(!wp_is_mobile()) {
$classes[] = 'serif';
}*/
$classes[] = $_COOKIE['dark'.akina_option('cookie_version', '')] == '1' ? 'dark' : ' ';
return $classes;
}
add_filter('body_class', 'akina_body_classes');

1
header.php
View File

@ -62,6 +62,7 @@ if (akina_option('akina_meta') == true) {
<meta name="keywords" content="<?php echo $keywords; ?>" />
<?php } ?>
<link rel="shortcut icon" href="<?php echo akina_option('favicon_link', ''); ?>"/>
<meta name="theme-color" content="#31363b">
<meta http-equiv="x-dns-prefetch-control" content="on">
<?php wp_head(); ?>
<script type="text/javascript">

1
inc/decorate.php
View File

File diff suppressed because one or more lines are too long

114
js/sakura-app.js
View File

@ -322,10 +322,67 @@ function checkBgImgCookie() {
$("#" + bgurl).click();
}
}
if (document.body.clientWidth > 860) {
setTimeout(function () {
checkBgImgCookie();
}, 100);
function checkDarkModeCookie() {
var night = getCookie("night"),
today = new Date()
cWidth = document.body.clientWidth;
if (!night) {
if ((today.getHours() > 21 || today.getHours() < 7) && cWidth > 1200) {
$("#dark-bg").click();
console.log('夜间模式开启');
} else {
if (cWidth > 860) {
setTimeout(function () {
checkBgImgCookie();
}, 1000);
console.log('夜间模式关闭');
} else {
$("html").css("background", "unset");
$("body").removeClass("dark");
$("#moblieDarkLight").html('<i class="fa fa-moon-o" aria-hidden="true"></i>');
setCookie("dark", "0", 0.33);
}
}
} else {
if (night == '1' && (today.getHours() >= 22 || today.getHours() <= 6) && cWidth > 1200) {
$("#dark-bg").click();
console.log('夜间模式开启');
} else if (night == '0' || today.getHours() < 22 || today.getHours() > 6) {
if (cWidth > 860) {
setTimeout(function () {
checkBgImgCookie();
}, 1000);
console.log('夜间模式关闭');
} else {
$("html").css("background", "unset");
$("body").removeClass("dark");
$("#moblieDarkLight").html('<i class="fa fa-moon-o" aria-hidden="true"></i>');
setCookie("dark", "0", 0.33);
}
}
}
}
if (!getCookie("darkcache") && (new Date().getHours() > 21 || new Date().getHours() < 7)) {
removeCookie("dark");
setCookie("darkcache", "cached", 0.4);
}
setTimeout(function() {
checkDarkModeCookie();
}, 100);
function mobile_dark_light() {
if ($("body").hasClass("dark")) {
$("html").css("background", "unset");
$("body").removeClass("dark");
$("#moblieDarkLight").html('<i class="fa fa-moon-o" aria-hidden="true"></i>');
setCookie("dark", "0", 0.33);
} else {
$("html").css("background", "#31363b");
$("#moblieDarkLight").html('<i class="fa fa-sun-o" aria-hidden="true"></i>');
$("body").addClass("dark");
setCookie("dark", "1", 0.33);
}
}
function no_right_click() {
@ -338,13 +395,12 @@ $(document).ready(function () {
function checkskin_bg(a) {
return a == "none" ? "" : a
}
function changeBG() {
var cached = $(".menu-list");
cached.find("li").each(function () {
var tagid = this.id;
cached.on("click", "#" + tagid, function () {
if (tagid == "white-bg") {
if (tagid == "white-bg" || tagid == "dark-bg") {
mashiro_global.variables.skinSecter = true;
checkskinSecter();
} else {
@ -352,36 +408,50 @@ $(document).ready(function () {
checkskinSecter();
}
if (tagid == "dark-bg") {
$("#night-mode-cover").css("visibility", "visible");
} else
$("#night-mode-cover").css("visibility", "hidden");
$("html").css("background", "#31363b");
$(".site-content").css("background-color", "#fff");
$("body").addClass("dark");
setCookie("dark", "1", 0.33);
} else{
$("html").css("background", "unset");
$("body").removeClass("dark");
$(".site-content").css("background-color", "rgba(255, 255, 255, .8)");
setCookie("dark", "0", 0.33);
setCookie("bgImgSetting", tagid, 30);
}
switch (tagid) {
case "white-bg":
$("body").css("background-image", "url(" + checkskin_bg(mashiro_option.skin_bg0) + ")");
$(".site-content").css("background-color", "#fff");
break;
case "sakura-bg":
$("body").css("background-image", "url(" + checkskin_bg(mashiro_option.skin_bg1) + ")");
$(".site-content").css("background-color", "rgba(255, 255, 255, .8)");
break;
case "gribs-bg":
$("body").css("background-image", "url(" + checkskin_bg(mashiro_option.skin_bg2) + ")");
$(".site-content").css("background-color", "rgba(255, 255, 255, .8)");
break;
case "pixiv-bg":
$("body").css("background-image", "url(" + checkskin_bg(mashiro_option.skin_bg3) + ")");
$(".site-content").css("background-color", "rgba(255, 255, 255, .8)");
break;
case "KAdots-bg":
$("body").css("background-image", "url(" + checkskin_bg(mashiro_option.skin_bg4) + ")");
$(".site-content").css("background-color", "rgba(255, 255, 255, .8)");
break;
case "totem-bg":
$("body").css("background-image", "url(" + checkskin_bg(mashiro_option.skin_bg5) + ")");
$(".site-content").css("background-color", "rgba(255, 255, 255, .8)");
break;
case "bing-bg":
$("body").css("background-image", "url(" + checkskin_bg(mashiro_option.skin_bg6) + ")");
$(".site-content").css("background-color", "rgba(255, 255, 255, .8)");
break;
case "dark-bg":
$("body").css("background-image", "url(" + checkskin_bg(mashiro_option.skin_bg7) + ")");
break;
// case "dark-bg":
// $("body").css("background-image", "url(" + checkskin_bg(mashiro_option.skin_bg7) + ")");
// break;
}
setCookie("bgImgSetting", tagid, 30);
closeSkinMenu();
});
});
@ -423,13 +493,11 @@ $(document).ready(function () {
});
function topFunction() {
if ('scrollBehavior' in document.documentElement.style) {
window.scrollTo({
top: 0,
behavior: "smooth"
})
} else {
window.scrollSmoothTo(0)
window.scrollBy(0, -100)
scrolldelay = setTimeout('topFunction()', 10)
var sTop = document.documentElement.scrollTop + document.body.scrollTop
if (sTop === 0) {
clearTimeout(scrolldelay)
}
}
@ -1765,14 +1833,17 @@ var home = location.href,
cheight = window.innerHeight,
pc_to_top = document.querySelector(".cd-top"),
mb_to_top = document.querySelector("#moblieGoTop"),
mb_dark_light = document.querySelector("#moblieDarkLight"),
changeskin = document.querySelector(".changeSkin-gear");
$(window).scroll(function() {
if (cwidth <= 860) {
if ($(this).scrollTop() > 20) {
mb_to_top.style.transform = "scale(1)";
mb_dark_light.style.transform = "scale(1)";
} else {
mb_to_top.style.transform = "scale(0)";
mb_dark_light.style.transform = "scale(0)";
}
} else {
if ($(this).scrollTop() > 100) {
@ -1801,6 +1872,9 @@ var home = location.href,
mb_to_top.onclick = function() {
topFunction();
}
mb_dark_light.onclick = function() {
mobile_dark_light();
}
}
}
$(function () {

29
style.css
View File

@ -1283,7 +1283,7 @@ a:hover {
padding: 0 10px;
margin-left: auto;
margin-right: auto;
background-color: rgba(255, 255, 255, .8)
background-color: #fff
}
.post-list {
@ -1889,9 +1889,9 @@ h1.page-title.mb- {
}
}
#moblieGoTop {
#moblieGoTop,#moblieDarkLight {
position: fixed;
bottom: 10px;
bottom: 60px;
right: 10px;
z-index: 99;
border: 0;
@ -1906,11 +1906,14 @@ h1.page-title.mb- {
transform: scale(0);
transition:transform .3s
}
#moblieGoTop:hover {
#moblieGoTop:hover,#moblieDarkLight:hover {
background-color: #fff;
opacity: .8
}
#moblieDarkLight{
bottom: 10px;
}
.post-footer {
padding: 20px 0;
border-bottom: 1px dashed #ddd;
@ -4369,7 +4372,9 @@ i.iconfont.js-toggle-search.iconsearch {
margin-top: -3px;
line-height: unset;
}
body.dark .ins-section .fa{
color: #ccc;
}
.ins-section .ins-section-header,.ins-section .ins-search-item {
padding: 8px 15px;
cursor: url(https://cdn.jsdelivr.net/gh/moezx/cdn@3.1.9/img/Sakura/cursor/ayuda.cur),auto;
@ -5222,7 +5227,7 @@ i.iconfont.down {
@media (max-width:860px) {
#main-container {
transition-duration: .5s;
transition: background,transform .5s !important;
position: relative;
overflow: hidden;
z-index: 2
@ -5309,7 +5314,7 @@ i.iconfont.down {
top: 8px
}
.openNav.open .icon {
background-color: transparent
background-color: transparent !important
}
.openNav.open .icon:after,
.openNav.open .icon:before {
@ -5815,7 +5820,8 @@ i.iconfont.down {
}
.header-user-avatar:hover .header-user-menu {
display: block
display: block;
background: #fff;
}
.header-user-menu {
@ -5846,7 +5852,6 @@ i.iconfont.down {
.herder-user-name {
font-size: 12px;
background: #fff;
padding: 10px 10px;
border-radius: 4px 4px 0 0
}
@ -5862,7 +5867,6 @@ i.iconfont.down {
.header-user-menu .user-menu-option {
padding: 5px 0;
background: #fff;
border-radius: 0 0 4px 4px;
width: 130px
}
@ -8282,6 +8286,8 @@ td.hljs-ln-numbers {
--widthB: calc(var(--widthA) - 30px);
height: var(--widthB);
min-height: 99%;
white-space: pre-wrap;
word-wrap: break-word;
overflow-y: hidden;
overflow-x: auto;
height: auto
@ -8744,6 +8750,9 @@ h1[id*=toc-head]::before,h2[id*=toc-head]::before,h3[id*=toc-head]::before,h4[id
.bangumi-item:hover img{
filter: blur(3px);
}
body.dark .bangumi-item:hover img{
filter: brightness(0.8) blur(3px);
}
.bangumi-title {
height: 15%;
}