我正在使用Kickstrap来构建我的bootstrap应用程序，我的客户希望用户能够动态更改主题。我知道要更改主题，您所要做的就是更改themes.less文件中的目录，但我不知道最好的方法。此外，我想记住一个用户的主题偏好，所以我需要存储一个cookie才能做到这一点，但我不完全确定是否可以将cookie直接读入LESS作为变量。
基本上，我只想要一个允许用户从列表中选择主题的下拉菜单。
任何建议都会很棒！谢谢！
答案 0 :(得分：0)
假设您只使用纯HTML / CSS / JavaScript而不是服务器端框架，有几种方法可以做到这一点。一个涉及实际modifying the LESS source code，但让我提供一些更简单的方法：
我会尝试将theme.less保留为空白，因此它只会显示默认的Bootstrap主题。
然后你可以在一个单独的行上加载你的Kickstrap主题：
<link rel="stylesheet/less" type="text/css" href="kickstrap.less" />
<link rel="stylesheet/less" type="text/css" href="mytheme.less" />
<script src="less.js"></script>
两个主题文件
当然，您的主题可能包含两个文件，例如variable.less和bootswatch.less，这些文件可能无法将它们分开：
<link rel="stylesheet/less" type="text/css" href="kickstrap.less" />
<link rel="stylesheet/less" type="text/css" href="variables.less" />
<link rel="stylesheet/less" type="text/css" href="bootswatch.less" />
<script src="less.js"></script>
相反，您可以@import将variables.less文件bootswatch.less改为@import "variables.less";
。
<link rel="stylesheet/less" type="text/css" href="kickstrap.less" />
<link rel="stylesheet/less" type="text/css" href="bootswatch.less" />
<script src="less.js"></script>
然后使用上面的原始示例。
<link rel="stylesheet/less" type="text/css" href="css/kickstrap.css" />
<link rel="stylesheet/less" type="text/css" href="css/bootswatch.css" />
顺便说一句，如果你不使用LESS客户端，不用担心。只需使用已编译的CSS文件即可。
cssIfy()写入DOM
至于在DOM中更改此内容，我会尝试利用kickstrap.js中已有的function lessIfy(filePath) {
var linkElement = document.createElement("link");
linkElement.setAttribute("rel", "stylesheet/less");
linkElement.setAttribute("type", "text/css");
linkElement.setAttribute("href", filePath);
document.getElementsByTagName('body')[0].appendChild(linkElement);
}
函数。这将采用一个字符串（.css文件名）并将其作为样式表写入DOM。如果您需要将其编写为.less文件，则可以轻松地操作此函数。也许是这样的：
less.js如果你这样做，你需要确保之后{{1}}加载，所以请尝试在此之前添加它，或者（更糟糕的是）之后再次加载less.js。
答案 1 :(得分：0)
看看“包含的主题”选项如何在您选择主题时更改主题。