Skip to content

Commit

Permalink
feat: add dark mode
Browse files Browse the repository at this point in the history 
add dark mode, replace theme built-in night mode. This style auto on at night, off in the day
close #213
  • Loading branch information
@spirit1431007
spirit1431007 committed Apr 9, 2020
1 parent 777b918 commit 6dff427
Show file tree
Hide file tree
Showing 6 changed files with 117 additions and 30 deletions.
1 change: 1 addition & 0 deletions footer.php
View file
Expand Up @@ -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">
Expand Down
1 change: 1 addition & 0 deletions functions.php
View file
Expand Up @@ -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');
Expand Down
1 change: 1 addition & 0 deletions header.php
View file
Expand Up @@ -62,6 +62,7 @@
<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">
Expand Down
1 change: 1 addition & 0 deletions inc/decorate.php
View file
Expand Up @@ -100,6 +100,7 @@ function customizer_css() { ?>
width: var(--widthC);
}
<?php endif;?>
html,body.dark #main-container,body.dark #mo-nav,body.dark .headertop-bar::after,body.dark .site-content,body.dark .comments,body.dark .site-footer{background:#31363b !important;}body.dark .pattern-center-blank,body.dark .yya,body.dark .blank,body.dark .changeSkin-gear,body.dark .toc,body.dark .search-form input{background:rgba(49,54,59,0.85);}body.dark .single-reward .reward-row{background:#bebebe;}body.dark .font-family-controls button{background-color:#828080;}body.dark .single-reward .reward-row:before{border-bottom:13px solid #bebebe;}body.dark .search-form--modal,body.dark .ins-section .ins-section-header{border-bottom:none;background:rgba(49,54,59,0.95);}body.dark .ins-section .ins-search-item:hover,body.dark .ins-section .ins-search-item.active,body.dark .ins-section .ins-search-item:hover .ins-slug,body.dark .ins-section .ins-search-item.active .ins-slug,body.dark .ins-section .ins-search-item:hover .ins-search-preview,body.dark .ins-section .ins-search-item.active .ins-search-preview,body.dark .ins-section .ins-search-item:hover header,body.dark .ins-section .ins-search-item:hover .iconfont{color:#fff;background:#31363b;}body.dark .search_close:after,body.dark .search_close:before{background-color:#eee;}body.dark .search_close:hover:after,body.dark .search_close:hover:before{background-color:#3daee9;}body.dark input.m-search-input{background:#bebebe;}body.dark .openNav .icon,body.dark .openNav .icon:after,body.dark .openNav .icon:before{background-color:#eee;}body.dark .site-header:hover{background:#31363b;}body.dark .post-date,body.dark .post-list-thumb a,body.dark .menhera-container .emoji-item:hover{color:#424952;}body.dark .entry-content p,body.dark .entry-content ul,body.dark .entry-content ol,body.dark .comments .body p,body.dark .float-content,body.dark .post-list p,body.dark .link-title{color:#bebebe !important;}body.dark .entry-title a,body.dark .post-list-thumb .post-title,body.dark .post-list-thumb,body.dark .art-content #archives .al_mon_list .al_mon,body.dark .art-content #archives .al_mon_list span,body.dark .art .art-content #archives a,body.dark .menhera-container .emoji-item{color:#bebebe;}body.dark .logolink a,body.dark .post-content a:hover,body.dark .comment .body p a{color:rgba(61,174,233,0.8) !important;}body.dark .lower li ul,body.dark .header-user-avatar:hover .header-user-menu{background:#31363b;}body.dark .header-user-menu::before,body.dark .lower li ul::before{border-color:transparent transparent #31363b transparent;}body.dark .site-top ul li a,body.dark .header-user-menu a,body.dark #mo-nav ul li a,body.dark .site-title a,body.dark header.page-header,body.dark h1.cat-title{color:#eee;}body.dark .art .art-content #archives .al_year,body.dark .comment-respond input,body.dark .comment-respond textarea,body.dark .siren-checkbox-label{color:#eee;}body.dark input[type=color]:focus,body.dark input[type=date]:focus,body.dark input[type=datetime-local]:focus,body.dark input[type=datetime]:focus,body.dark input[type=email]:focus,body.dark input[type=month]:focus,body.dark input[type=number]:focus,body.dark input[type=password]:focus,body.dark input[type=range]:focus,body.dark input[type=search]:focus,body.dark input[type=tel]:focus,body.dark input[type=text]:focus,body.dark input[type=time]:focus,body.dark input[type=url]:focus,body.dark input[type=week]:focus,body.dark textarea:focus,body.dark #mo-nav .m-search form{color:#eee;background-color:#31363b;}body.dark .post-date,body.dark .post-list-thumb a,body.dark .post-meta{color:#888;}body.dark img,body.dark .cd-top,body.dark .highlight-wrap,body.dark iframe,body.dark .entry-content .aplayer{filter:brightness(0.8);}body.dark .post-list-thumb{box-shadow:0 1px 35px -8px rgba(0,0,0,0.8);}body.dark .centerbg{background-blend-mode:hard-light;background-color:#31363b;}body.dark .notice{color:#EFF0F1;background:#232629;border:none;}body.dark h1.fes-title,body.dark h1.main-title{border-bottom:1px dashed #ababab;}body.dark .scrollbar,body.dark .butterBar p.butterBar-message{background:#3daee9 !important;}body.dark .entry-content p code{color:#eee !important;background:rgba(61,174,233,0.5) !important;}body.dark #moblieGoTop,body.dark #moblieDarkLight{color:#eee;background-color:#232629;}body.dark #moblieGoTop:hover,body.dark #moblieDarkLight:hover{background-color:#232629;opacity:.8;}body.dark .widget-area{background-color:rgba(35,38,41,0.8);}body.dark .skin-menu,body.dark .menu-list li,body.dark .widget-area .heading,body.dark .widget-area .show-hide svg,body.dark #aplayer-float,body.dark .aplayer.aplayer-fixed .aplayer-body,body.dark .aplayer .aplayer-miniswitcher,body.dark .aplayer .aplayer-pic{color:#eee;background-color:#232629 !important;}body.dark .skin-menu::after{border-color:#232629 transparent transparent transparent;}body.dark .aplayer .aplayer-list ol li .aplayer-list-author{color:#eee;}body.dark #aplayer-float .aplayer-lrc-current{color:transparent !important;}body.dark .aplayer.aplayer-fixed .aplayer-lrc{text-shadow:-1px -1px 0 #989898;}body.dark .aplayer .aplayer-list ol li.aplayer-list-light{background:rgba(61,174,233,0.5) !important;}body.dark .aplayer .aplayer-list ol li:hover{background:rgba(61,174,233,0.8) !important;}body.dark .aplayer.aplayer-fixed .aplayer-list{border:none !important;}body.dark .aplayer.aplayer-fixed .aplayer-info,body.dark .aplayer .aplayer-list ol li{border-top:none !important;}body.dark .aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon:hover path,body.dark .widget-area .show-hide svg path{fill:#fafafa;}body.dark,body.dark button,body.dark input,body.dark select,body.dark textarea{color:#eee;}body.dark button,body.dark input[type=button],body.dark input[type=reset],body.dark input[type=submit]{box-shadow:none;}body.dark .entry-content th{background-color:#3daee9;}body.dark .author-profile i,body.dark .post-like a,body.dark .post-share .show-share,body.dark .sub-text,body.dark .we-info a,body.dark span.sitename,body.dark .post-more i:hover,body.dark #pagination a:hover,body.dark .post-content a:hover,body.dark .float-content i:hover{color:#3daee9;}body.dark .feature i,body.dark .feature-title span,body.dark .download,body.dark .navigator i:hover,body.dark .links ul li:before,body.dark .ar-time i,body.dark span.ar-circle,body.dark .object,body.dark .comment .comment-reply-link,body.dark .siren-checkbox-radio:checked + .siren-checkbox-radioInput:after{background:#3daee9;}body.dark .download,body.dark .navigator i:hover,body.dark .link-title,body.dark .links ul li:hover,body.dark #pagination a:hover,body.dark .comment-respond input[type='submit']:hover{border-color:#3daee9;}body.dark .site-info a:hover,body.dark .comment h4 a,body.dark #comments-navi a.prev,body.dark #comments-navi a.next,body.dark .comment h4 a:hover,body.dark .site-top ul li a:hover,body.dark .entry-title a:hover,body.dark #archives-temp h3,body.dark span.page-numbers.current,body.dark .sorry li a:hover,body.dark .site-title a:hover,body.dark .js-toggle-search.iconsearch:hover,body.dark .comment-respond input[type='submit']:hover,body.dark blockquote:before,body.dark blockquote:after,body.dark .entry-content a{color:#3daee9 !important;}body.dark .entry-content a:hover{color:#3daee9;text-decoration:underline !important;}body.dark .is-active-link::before,body.dark .commentbody:not(:placeholder-shown) ~ .input-label,body.dark .commentbody:focus ~ .input-label{background-color:#3daee9 !important;}body.dark .commentbody:focus{border-color:#3daee9 !important;}body.dark .insert-image-tips:hover,body.dark .insert-image-tips-hover{color:#3daee9;border:1px solid #3daee9;}body.dark .site-top ul li a:after,body.dark .menu-list li:hover,body.dark .font-family-controls button.selected{background-color:#3daee9 !important;}body.dark #nprogress .spinner-icon{border-top-color:#3daee9;border-left-color:#3daee9;}body.dark #nprogress .bar{background:#3daee9;}body.dark .comment .info,body.dark .comment-respond .logged-in-as,body.dark .notification,body.dark .comment-respond .logged-in-as a,body.dark .comment-respond .logged-in-as a:hover{color:#9499a8;}body.dark .sm{color:#377292 !important;}html,#main-container,#mo-nav,.headertop-bar::after,.site-content,.comments,.site-footer,.pattern-center-blank,.yya,.blank,.changeSkin-gear,.toc,.search-form input{transition:background 1s;}.entry-content p,.entry-content ul,.entry-content ol,.comments .body p,.float-content,.post-list p,.link-title{transition:color 1s;}body.dark::-webkit-scrollbar-thumb,body.dark::selection{background:#377292;color:#ccc;}
</style>
<?php }
add_action('wp_head', 'customizer_css');
114 changes: 94 additions & 20 deletions js/sakura-app.js
View file
Expand Up @@ -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() {
Expand All @@ -338,50 +395,63 @@ $(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 {
mashiro_global.variables.skinSecter = false;
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();
});
});
Expand Down Expand Up @@ -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)
}
}

Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -1801,6 +1872,9 @@ var home = location.href,
mb_to_top.onclick = function() {
topFunction();
}
mb_dark_light.onclick = function() {
mobile_dark_light();
}
}
}
$(function () {
Expand Down

0 comments on commit 6dff427

Please sign in to comment.