后台管理系统设计了多套主题皮肤，希望能随意切换主题风格。
在只有一套主题的时候，是在主页面上引入该主题样式：
<link href="/public/themes/default/css/main.css" rel="stylesheet" type="text/css" />切换主题，其实就是切换css路径中的default为不同主题的值。如切换到block主题，只需修改为：
<link href="/public/themes/block/css/main.css" rel="stylesheet" type="text/css" />每次切换主题，来修改此处的代码，然后再显然不是一个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来保存这个主题值；
<input type="hidden" id="theme" th:value="${projectTheme}" >然后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); }实现主题通过配置文件切换。
二、通过在页面上增加切换主题按钮，点击后修改数据库的主题字段值；
后台读取该字段的值，传到前端主页面；
后续步骤可以参考上面的。
在页面上点击切换按钮，就修改了主题风格。
备注:其实一开始是想这样修改的，然而没有成功：
<link href="/public/themes/${theme}/css/main.css" rel="stylesheet" type="text/css" />后面大佬指导，此方法可行，是这样的：
<link th:href="'/public/themes/'+ ${projectTheme} +'/css/main.css'" rel="stylesheet" type="text/css">
转载于:https://www.cnblogs.com/xphhh/p/11331093.html
