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.
