后台管理系统设计了多套主题皮肤，希望能随意切换主题风格。

在只有一套主题的时候，是在主页面上引入该主题样式：

切换主题，其实就是切换css路径中的default为不同主题的值。如切换到block主题，只需修改为：

每次切换主题，来修改此处的代码，然后再显然不是一个Good idea.

 

下面记录下自己的两个想法：

一、通过在spring配置文件中设置project.theme；

project.theme = block

　　在后台通过@Value等方法读取；

@Value("${project.theme}")    private String projectTheme;

　　然后通过springMVC的Model、Map、ModelMap或者ModelAndView传到前端主页面；

model.addAttribute("projectTheme", projectTheme);

　　主页面上通过input来保存这个主题值；

　　然后js获取input的值，创建link标签，设置其href属性值，追加到主页面head中，

var theme = $("#theme").val(); loadTheme(theme);

function loadTheme(theme){    var link = document.createElement('link');        link.type = 'text/css';        link.rel = 'stylesheet';        if(theme)            link.href = '/public/themes/'+theme+'/css/main.css';        else            link.href = '/public/themes/default/css/main.css';        var head = document.getElementsByTagName('head')[0];        head.appendChild(link);}

　　实现主题通过配置文件切换。

 

二、通过在页面上增加切换主题按钮，点击后修改数据库的主题字段值；

　　后台读取该字段的值，传到前端主页面；

　　后续步骤可以参考上面的。

　　在页面上点击切换按钮，就修改了主题风格。

 

备注:其实一开始是想这样修改的，然而没有成功：

　　后面大佬指导，此方法可行，是这样的：