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

@@ -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">

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');

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">

js/sakura-app.js

@@ -322,10 +322,67 @@ function checkBgImgCookie() {
         $("#" + bgurl).click();
     }
 }
-if (document.body.clientWidth > 860) {
+
+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");
+                    $("html").css("background", "#31363b");
-                } else
+                    $(".site-content").css("background-color", "#fff");
-                    $("#night-mode-cover").css("visibility", "hidden");
+                    $("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":
+                    // case "dark-bg":
-                        $("body").css("background-image", "url(" + checkskin_bg(mashiro_option.skin_bg7) + ")");
+                    //     $("body").css("background-image", "url(" + checkskin_bg(mashiro_option.skin_bg7) + ")");
-                        break;
+                    //     break;
                 }
-                setCookie("bgImgSetting", tagid, 30);
                 closeSkinMenu();
             });
         });
@@ -423,13 +493,11 @@ $(document).ready(function () {
 });
 
 function topFunction() {
-    if ('scrollBehavior' in document.documentElement.style) {
+    window.scrollBy(0, -100)
-        window.scrollTo({
+    scrolldelay = setTimeout('topFunction()', 10)
-            top: 0,
+    var sTop = document.documentElement.scrollTop + document.body.scrollTop
-            behavior: "smooth"
+    if (sTop === 0) {
-        })
+        clearTimeout(scrolldelay)
-    } else {
-        window.scrollSmoothTo(0)
     }
 }
 
@@ -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 () {

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%;
     }