纯JavaScript+CSS实现切换夜间模式

发表于 2020-06-26   |   分类于 笔记

软件级别,甚至系统级别都有夜间功能了,这些小功能越来越可有可无了。

(手动)夜间模式切换函数,需要配合一些最基础的简单函数,比如addClass,removeClass这些

function switchNightMode(ico,text){
    var night = document.cookie.replace(/(?:(?:^|.*;\s*)night\s*\=\s*([^;]*).*$)|^.*$/, "$1") || '0';
    ico = document.getElementById(ico);
    text = document.getElementById(text);
    if(night == '0'){
        document.querySelector('link[title="dark"]').disabled = true;
        document.querySelector('link[title="dark"]').disabled = false;
        document.cookie = "night=1;path=/"
        removeClass(ico,'icon-moon');
        addClass(ico,'icon-sun');
        text.innerHTML = '日间模式';
        console.log('夜间模式开启');
    }else{
        document.querySelector('link[title="dark"]').disabled = true;
        document.cookie = "night=0;path=/"
        removeClass(ico,'icon-sun');
        addClass(ico,'icon-moon');
        text.innerHTML = '夜间模式';
        console.log('夜间模式关闭');
    }
}

html部分:

<a onclick="switchNightMode(snm,snm_text);" id="snm">
<i id="snm-ico" class="iconfont icon-moon"></i><i id="snm_text">夜间模式</I>
</a>

基本就这样了

© 2020 Powered by Typecho & Theme Quark