Darkmode

2020-01-15 Views Javascript | Experience694字5 min read
featureimg

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)
.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. (The design of this button comes from Chic)
<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;
}

References

[1]
  

Mix-blend-mode: https://darkmodejs.learn.uno/


[2]
  

ITJoker's button design: https://blog.itjoker.cn/



Big Image
EOF
本文章采用CC BY-NC-SA 4.0进行许可。转载请注明出处!
上一篇

Data Structure - ArrayList


下一篇

Google adsense configuration