Changing Kickstrap Theme with Dropdown Menu?

Question

I'm using Kickstrap to theme my bootstrap app and my client wants users to be able to change themes on the fly. I know that to change the theme, all you have to do is change the directory in the themes.less file but I don't know the best way to go about this. Also, I want to remember a user's theme preference so I need to store a cookie to do this, but I'm not entirely sure if it's possible to read cookies straight into LESS as variables.

Basically, I just want a dropdown menu that allows users to select a theme from a list.

Any suggestions would be great! Thanks!

Answer 1

Assuming you're just using plain HTML/CSS/JavaScript and not a server-side framework, there are a few ways to do this. One involves actually modifying the LESS source code but let me offer some simpler ways:

I would try keeping theme.less blank, so it will just show a default Bootstrap theme.

then you can load your Kickstrap theme on a separate line like this:

<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>

Two theme files

Of course, your theme might have two files, like variable.less and bootswatch.less which may not work keeping them separate:

<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>

So instead, you can just @import the variables.less file into bootswatch.less.

@import "variables.less";

And then use the original example from above.

<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>

By the way, if you're not using LESS client-side, no worries. Just use the compiled CSS files for each instead.

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

Writing to the DOM

As far as changing this in the DOM, I would try taking advantage of the cssIfy() function already in kickstrap.js. This will take a string (the .css filename) and write it as a stylesheet to the DOM. If you need to write it as a .less file, you can probably just manipulate this function easily. Maybe something like this:

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

If you do it this way, you'll need to make sure less.js loads afterwards, so try either appending it before that or (worse) loading less.js again after that.

Answer 2

Take a look at how the "Included Themes" option changes the themes as you select them.