我们在浏览网站的时候经常看到网站有明暗主题，只需要点击下对应的按钮就可以切换网站到暗色或者明亮主题，今天我们就来记录下切换明暗主题的两种方法，本站就使用了其中一种方式。

1.使用js去批量替换css样式

这种方式就是比较简单粗暴的去遍历整个网站的class类，然后替换一个新的class样式强制切换到新的class样式，具体写法如下：

切换的js代码如下：

    var storage = window.localStorage;
    function switch_theme(theme_id){
        if(theme_id == 1){
            var eles = document.getElementsByClassName("row-bg");
            for(var i=0; i<eles.length; i++){
                eles[i].classList.replace("row-bg", "row-dark-bg");
                i--;
            }
        }else{
            var eles = document.getElementsByClassName('row-dark-bg');
            for(var i=0; i<eles.length; i++){
                eles[i].classList.replace("row-dark-bg", "row-bg");
                i--;
            }
        }
    }
    if(!storage.theme){
        storage.theme = 1;
    }else if(storage.theme == 2){
        switch_theme(1);
        $("#mode").html('<i class="layui-icon layui-icon-light"></i>');
    }
    $("#mode").on("click",function(){
        if(storage.theme == 1){
            switch_theme(1);
            storage.theme = 2;
            $(this).html('<i class="layui-icon layui-icon-light"></i>');
        }else{
            switch_theme(2);
            storage.theme = 1;
            $(this).html('<i class="layui-icon layui-icon-moon"></i>');
        }
    });

然后html切换按钮代码如下：

<a href="javascript:" title="切换颜色模式" class="border-color row-bg" id="mode"><i class="layui-icon layui-icon-moon"></i></a>

上述代码就是点击以后遍历整个网页的html代码使用row-dark-bg替换row-bg来实现整站的颜色变化，其中使用了localstorage这个持久化存储，这个存储之前也写过笔记，具体可以查看以前的笔记：https://sulao.cn/post/355

2.使用color-schema方式来做替换

这种方式主要是js和css进行操作，具体代码如下：

css代码：

:root {
  color-scheme: light dark;
  -webkit-color-scheme: light dark;
  --light-bg: #fff;
  --light-color: #2f363c;
  --light-code: #fafafa;
  --dark-bg: #2f363c;
  --dark-color: #fff;
  --dark-code: #fafafa;
}
body{
    font-size: 14px !important;
    margin: 0;
    padding: 0;width: 100%;
    height: 100%;
    font-family: 'Century Gothic','Microsoft Yahei',tahoma,Arial;
    background-color: #7d3c4e;
    color: light-dark(var(--light-color), var(---dark-color));
    transition: background-color 0.3s ease, color 0.3s ease;
}
code {
  color: light-dark(var(--light-code), var(--dark-code));
}
.light {
  color-scheme: light;
}
.dark {
  color-scheme: dark;
}

js代码如下：

    var storage = window.localStorage;
    function switch_theme(theme_id){
        if(theme_id ==1){
            document.documentElement.style.colorScheme = 'dark';
        }else if(theme_id == 2){
            document.documentElement.style.colorScheme = 'ligth';        
        }
    }
    if(!storage.theme){
        storage.theme = 1;
    }else if(storage.theme == 2){
        switch_theme(1);
        $("#mode").html('<i class="layui-icon layui-icon-light"></i>');
    }
    $("#mode").on("click",function(){
       if(storage.theme == 1){
           switch_theme(1);
           storage.theme = 2;
           $(this).html('<i class="layui-icon layui-icon-light"></i>');
       }else{
           switch_theme(2);
           storage.theme = 1;
           $(this).html('<i class="layui-icon layui-icon-moon"></i>');
        }
    });

上述就是再写样式的时候例如color颜色的值可以直接写成这样

.row-bg{
    background-color: light-dark(var(--light-bg), var(--dark-bg));
    opacity: 0.95;
}

这样就是可以通过color-schema设定的颜色对实现对应的颜色赋值到class样式

以上就是两种js切换明暗主题的两种方式，推荐使用第二种方式，目前也是第二种方式为主流方式。