javascript - 使用下拉菜单更改 Kickstrap 主题？

Question

我正在使用Kickstrap为我的引导应用程序设置主题，我的客户希望用户能够即时更改主题。我知道要更改主题，您所要做的就是更改themes.less 文件中的目录，但我不知道最好的方法。另外，我想记住用户的主题偏好，所以我需要存储一个 cookie 来执行此操作，但我不完全确定是否可以将 cookie 作为变量直接读入 LESS。

基本上，我只想要一个允许用户从列表中选择主题的下拉菜单。

任何建议都会很棒！谢谢！

Answer 1

假设您只是使用纯 HTML/CSS/JavaScript 而不是服务器端框架，有几种方法可以做到这一点。一个涉及实际修改 LESS 源代码，但让我提供一些更简单的方法：

我会尝试将 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>

顺便说一句，如果您不使用 LESS 客户端，请不要担心。只需为每个使用编译的 CSS 文件。

<link rel="stylesheet/less" type="text/css" href="css/kickstrap.css" />
<link rel="stylesheet/less" type="text/css" href="css/bootswatch.css" />

写入 DOM

至于在 DOM 中更改它，我会尝试利用cssIfy(). kickstrap.js这将接受一个字符串（.css 文件名）并将其作为样式表写入 DOM。如果您需要将其编写为 .less 文件，您可能可以轻松地操作此函数。也许是这样的：

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);
}

如果您这样做，您需要确保less.js之后加载，因此请尝试在此之前附加它或（更糟）在此之后再次加载 less.js。

Answer 2

看看“包含的主题”选项如何在您选择主题时更改主题。