From 6dff4270711d984400727b9c96e0012ebca46e26 Mon Sep 17 00:00:00 2001
From: Spirit <spirit1431007@gmail.com>
Date: Thu, 9 Apr 2020 15:05:03 +0800
Subject: [PATCH] feat: add dark mode add dark mode, replace theme built-in
 night mode. This style auto on at night, off in the day close #213

---
 footer.php       |   1 +
 functions.php    |   1 +
 header.php       |   1 +
 inc/decorate.php |   1 +
 js/sakura-app.js | 114 ++++++++++++++++++++++++++++++++++++++---------
 style.css        |  29 +++++++-----
 6 files changed, 117 insertions(+), 30 deletions(-)

diff --git a/footer.php b/footer.php
index 3641f35..558163c 100644
--- a/footer.php
+++ b/footer.php
@@ -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">
diff --git a/functions.php b/functions.php
index 37b406a..74382a7 100644
--- a/functions.php
+++ b/functions.php
@@ -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');
diff --git a/header.php b/header.php
index a826c21..9d380bb 100644
--- a/header.php
+++ b/header.php
@@ -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">
diff --git a/inc/decorate.php b/inc/decorate.php
index b2a4691..74e3ffc 100644
--- a/inc/decorate.php
+++ b/inc/decorate.php
@@ -100,6 +100,7 @@ $bg_style = akina_option('focus_height') ? 'background-position: center center;b
     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');
diff --git a/js/sakura-app.js b/js/sakura-app.js
index 74c6f00..c5df1bb 100644
--- a/js/sakura-app.js
+++ b/js/sakura-app.js
@@ -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 () {
diff --git a/style.css b/style.css
index 3839ddc..adb8669 100644
--- a/style.css
+++ b/style.css
@@ -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%;
     }