项目介绍

名称:Darkmode.js 功能:给你的网站添加暗色模式

项目链接:

https://github.com/sandoche/Darkmode.js
             <!-- darkmode暗黑模式开始left   right 底部 bottom-->
<script src="https://cdn.bootcss.com/Darkmode.js/1.5.7/darkmode-js.js"></script>
<!-- darkmode js bootcss cdn或者jsdelivr cdn -->
<script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.5.7/lib/darkmode-js.min.js"></script>
<script>
 var options = {
        bottom: "32px",                 // default: '32px'  底部
        right: "32px",                  // default: '32px' 右
        left: "unset",                  // default: 'unset' 左
        time: "0.5s",                   // default: '0.3s' 过渡时间
        mixColor: "#fff",               // default: '#fff' 混合层背景色
        backgroundColor: "#fff",        // default: '#fff' 创建的背景层背景色
        buttonColorDark: "#262728",     // default: '#100f2c' 亮色状态下的按钮颜色
        buttonColorLight: "#fff",       // default: '#fff' 暗色状态下的按钮色
        saveInCookies: true,            // default: true, 是否存在cookie 默认 local storage
        label: "🌓",                    // default: '' 按钮中的内容
        autoMatchOsTheme: true,         // default: true 跟随系统设置
    };
    let darkmode = new Darkmode(options);
    darkmode.showWidget();
 
    $("document").ready(function () {
        if (darkmode.isActivated()) {
            document.getElementById("light-mode").style.display = "none";
            document.getElementById("dark-mode").style.display = "flex";
        } else {
            document.getElementById("light-mode").style.display = "flex";
            document.getElementById("dark-mode").style.display = "none";
        }
    });
 
    $(".darkmode-toggle").click(function () {
        if (darkmode.isActivated()) {
            document.getElementById("light-mode").style.display = "none";
            document.getElementById("dark-mode").style.display = "flex";
        } else {
            document.getElementById("light-mode").style.display = "flex";
            document.getElementById("dark-mode").style.display = "none";
        }
    });
</script>
     <!-- darkmode暗黑模式结束 -->