Bootstrap4如何动态切换主题

本文阅读大约需要1.99分钟

bootstrap4有个网站叫做bootswatch（文末给出链接），其中已经设计了一些很美的主题：

要想使用也是很简单的，只需要下载其中的bootstrap.css或者bootstrap.min.css并覆盖到自己项目的对应文件就行了。如果你想动态切换的话，现在提供的思路是：

用JavaScript写一个函数响应页面上一个按钮的点击，这个函数主要是获取页面导入css的链接 < link >标签，修改它的 href值就行了。

当然如果你想让整个网站都应用上同一个动态修改后的主题，下文也用到了，主要是采用cookies记录的方式解决。

下面的代码来自Django，在HTML页面上的一些语法和大家常见的JavaEE不大相同，但本文涉及的内容只和JavaScript和Bootstrap有关，无需在意哈。但我要说一下我Django网站上各页面都有的一个特点，那就是每个HTML页面都继承于或被包含于一个基础页面，这样的话，便只需要修改基础页面的css或js就行了，相信JavaEE那边也是这样做的。

网页上涉及到的代码

（代码若显示不全，请向左滑动）

<link rel="stylesheet" href="{% static 'bootstrap4.0.0/css/bootstrap.min.css' %}" id="default-theme">

切换时主要针对上面 < link >标签的 href和 id进行修改，一个 href对应一个 id。本程序用到两个主题版本的css文件，其id和文件名的对应为：

id	同目录下的css文件名
default-theme	bootstrap.min.css
gray-theme	bootstrap_gray.min.css

这样就清晰明了了哈哈哈，下面是切换的按钮，触发changeTheme()方法：

<!--切换主题的按钮-->
<input id="change-theme-btn" type="button" class="btn btn-light" onclick="changeTheme()" value="切换主题"/>

涉及的JavaScript代码

代码实现比较简单，具体说明请看注释：

// 按钮触发的切换主题方法
function changeTheme() {
    var link = document.getElementsByTagName("link")[0];
    //判断目前页面上的link的id是哪个，如果是默认主题的话，就传送新主题的id给change()函数，否则亦然
    if (link.id === "default-theme") {
        change("dark-theme");
    } else {
        change("default-theme");
    }
}

//真正的切换主题方法
function change(themeName){
    var link = document.getElementsByTagName("link")[0];

    if(themeName === "default-theme"){
        link.id = "default-theme";
        link.href = '/static/bootstrap4.0.0/css/bootstrap.min.css';

        //记录新的主题到cookies，这里一定要写上path=/，否则就不是修改cookies而是在不同页面创建cookies了
        document.cookie = "themeCookies=default-theme;path=/";
    }else if(themeName === "dark-theme"){
        link.id = "dark-theme";
        link.href = '/static/bootstrap4.0.0/css/bootstrap_gray.min.css';
        document.cookie = "themeCookies=dark-theme;path=/";
    }
}

// 获取cookie中当前主题的id，没有则返回默认的default-theme
function getThemeName() {
    var themeCookies = "themeCookies=";
    var allCookies = document.cookie.split(';');
    for(var i=0; i<allCookies.length; i++){
        var c = allCookies[i].trim();
        if(c.indexOf(themeCookies) === 0)
            return c.substring(themeCookies.length, c.length);
    }
    return "default-theme";
}
  // 让网页每次进入时都先检查一下主题是哪个$(document).ready(function () {
    change(getThemeName());
});

今日作者: 米国队长

时间太瘦，指缝太宽

点击“阅读原文”查看Bootswatch网站：https://bootswatch.com/