This article shows a new way to add darkmode in your blog.

Code

  • Add the following css code in your css file(The idea of using mix-blend-mode comes from darkmode.js)[1]
.darkmode-layer {
    position: fixed;
    pointer-events: none;
    background: #fff;
    mix-blend-mode: difference;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
.darkmode-background {
    background: #fff;
    position: fixed;
    pointer-events: none;
    z-index: -1;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
.darkmode .search-input {
    background: #000;
    border-bottom-color: inherit
}
.darkmode img {
    mix-blend-mode: difference;
    filter: grayscale(30%);
}
.darkmode pre {
    background-color: #000 !important;
}
.darkmode .line-number {
    color: #c1c1c1;
}
.darkmode .hidden_nav {
    background-color: #000;
    box-shadow: 0 10px 20px 0;
}
.switch_default[type=checkbox] {
    display: none
}
.switch_default + label {
    background-color: #e6e6e6;
    border-radius: 7px;
    cursor: pointer;
    display: inline-block;
    height: 14px;
    position: relative;
    box-shadow: .2px .2px 1px .5px #b4b4b4;
    width: 30px
}
.switch_default + label:after {
    background-color: #fff;
    border-radius: 50%;
    content: "";
    height: 12px;
    left: 1px;
    position: absolute;
    top: .5px;
    width: 12px;
    box-shadow: .2px .2px 1px .5px #b4b4b4
}
.switch_default:checked + label {
    background-color: #1abc9c;
    box-shadow: none
}
.switch_default:checked + label:after {
    left: 17px
}
  • Add the following html code to where you want to show the button to control the darkmode. [2]
<div><input id="switch_default" onclick="mobileBtn()" type="checkbox" class="switch_default"><label for="switch_default" class="toggleBtn"></label></div>

You can also write your own css to beautify this button.

  • Put these two div beneath the body tag
<div id="darkmode_b"></div><div id="darkmode_l"></div>
  • Add the following js beneath the div.
// Written by Serence: blog.blinkstar.cn
function getCookie(name)
{
    var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
    if(arr=document.cookie.match(reg))
        return unescape(arr[2]);
    else
        return null;
}
cookie = getCookie("darkmode");
if (cookie == "enable"){
	document.getElementById("darkmode_b").classList.add("darkmode-background");
	document.getElementById("darkmode_l").classList.add("darkmode-layer");
	document.body.classList.add("darkmode");
	document.getElementById("switch_default").checked = true;
}
var mobileBtn = function f() {
if (document.getElementById("switch_default").checked == true){
	document.getElementById("darkmode_b").classList.add("darkmode-background");
	document.getElementById("darkmode_l").classList.add("darkmode-layer");
	document.body.classList.add("darkmode");
	document.cookie="darkmode=enable; path=/"; 
}
else{
	document.getElementById("darkmode_b").classList.remove("darkmode-background");
	document.getElementById("darkmode_l").classList.remove("darkmode-layer");
	document.body.classList.remove("darkmode");
	document.cookie="darkmode=disable; path=/"; 
}
}

you can also the compressed js.

function getCookie(a){var b,c=new RegExp("(^| )"+a+"=([^;]*)(;|$)");return(b=document.cookie.match(c))?unescape(b[2]):null}cookie=getCookie("darkmode"),"enable"==cookie&&(document.getElementById("darkmode_b").classList.add("darkmode-background"),document.getElementById("darkmode_l").classList.add("darkmode-layer"),document.body.classList.add("darkmode"),document.getElementById("switch_default").checked=!0);var mobileBtn=function(){1==document.getElementById("switch_default").checked?(document.getElementById("darkmode_b").classList.add("darkmode-background"),document.getElementById("darkmode_l").classList.add("darkmode-layer"),document.body.classList.add("darkmode"),document.cookie="darkmode=enable; path=/"):(document.getElementById("darkmode_b").classList.remove("darkmode-background"),document.getElementById("darkmode_l").classList.remove("darkmode-layer"),document.body.classList.remove("darkmode"),document.cookie="darkmode=disable; path=/")};

Problems

you may notice that some of your picture may become very strange after using this way. Though I add .darkmode img to overwrite some of the img, it may still have some problems. You can try to use the following code to avoid any of your code block being covered by the new layer.

// This code uses a class named logo as an example
.darkmode-layer .logo {
  isolation: isolate;
  mix-blend-mode: difference;
}

  1. In darkmode.js, the author uses Mix-blend-mode to render darkmode effect ↩︎

  2. The design of this button comes from Chic↩︎