看到过很多网站都有一个暗黑模式之类的多主体切换，然后我就想着自己要不要弄一个暗黑模式。当然了，也不仅仅局限于暗黑模式，你可以自定义这些风格。理论上来说，只要你不嫌弃麻烦，你可以弄无限个风格来进行切换。

其实实现起来并不是很难，因为就是实时切换CSS文件来覆盖掉默认的样式罢了。能实现这一功能的方法也很多，但是我感觉有很多比较麻烦的，那我今天就来给大家带来一个最简单的办法吧！

简单的demo演示

https://demo.shaosiming.net/theme/index.html

代码部分

第一步：先将我们的主题CSS文件引入到head头部内

<link rel="stylesheet" href="style.css">
<!-- 默认的CSS，一定要引用在其他主题前，否则无法覆盖 两种方法，大家自行选择-->
<script src="theme.js"></script>
<!-- 主题文件，如果你不想写JS里面也可以直接引入，但是写进JS文件比较美观，如果主题较多，就要引入一大堆CSS文件 -->
<link rel="stylesheet" type="text/css" href="css/1.css" title="CSS1" id="CSS1" disabled>
<link rel="stylesheet" type="text/css" href="css/2.css" title="CSS2" id="CSS2" disabled>
<link rel="stylesheet" type="text/css" href="css/3.css" title="CSS3" id="CSS3" disabled>
<!-- 
    需要注意的是，引入的 title 和 id 必须和下面JS代码的大小写对应，如果下面是小写，引入就要小写 
    而且引入文件的最后一定要加入 disabled 禁用属性！默认就不加载主题文件，只有通过你点击请求才会加载
-->

第二步：将以下JavaScript代码加入到你的网页当中

<script>
    // 切换主题需要用到JS代码
    function changeCss(id) {
        for (var i = 1; i < 5; i++) {
            if (i == id)
                document.getElementById("CSS" + i).disabled = false; // 需要注意大小写，这里是大写，引入的文件也要大写
            else
                document.getElementById("CSS" + i).disabled = true; // 需要注意大小写，这里是大写，引入的文件也要大写
        }
    }
</script>

第三步：提供一个切换主题的入口

<li><a href="javascript:changeCss()">默认</a></li>
<li><a href="javascript:changeCss(1)">红色</a></li>
<li><a href="javascript:changeCss(2)">蓝色</a></li>
<li><a href="javascript:changeCss(3)">橙色</a></li>

后话：

这样就完成了多主题风格的切换，只要你有心情，你可以制作很多个主题来供访客切换，理论上来讲是无限制的。而且主题文件也不需要重新再写一遍，只需要将我们需要更改的元素写入到主题文件内就行了，具体的大家可以下载演示文件，然后看一下我是怎么写的就明白了了。

演示文件下载

点击高速下载