Switching between Twitter Bootstrap Themes?

javascript jquery css twitter-bootstrap bootswatch

10,461

Solution 1

Use Kickstrap. You can install themes from basically anywhere, make your own, includes themes from Bootswatch and it uses Less.js client-side to easily recompile your changes each time.

Solution 2

Alright, since you want to load different themes...

You can use jQuery to load different stylesheets

<html>
    <head>
        <link rel="stylesheet" href="stylesheet.css" type="text/css" />
    </head>
    <body>
    ...
</html>

This could be a button click or another event that is triggered. So, what you would do is simply insert a new element into the head section of the page DOM. This can be done in a couple of lines of jQuery:

$(document).ready(function () {
    $("a").click(function () {
        $('head').append('<link rel="stylesheet" href="style2.css" type="text/css" />');
    });
});

I hope this solves it...

Solution 3

I tested this on IE11, Chrome, Firefox and it works:

<link id="theBoostrapTheme" type = "text/css" rel = "stylesheet" href = "Content/bootstrap-theme.min.css"/>

<a role="menuitem" tabindex="-1" href="javaScript:void(0);" onclick="changeCurrentTheme('_Cerulean')">Cerulean</a>

Code:

function changeCurrentTheme(theNewThemeName) {
  $("#theBoostrapTheme").attr("href", "Content/bootstrap-theme.min" + theNewThemeName + ".css");
  }

In this case the theme files other than the original were named like this: bootstrap-theme.min_ …. .css. For example: bootstrap-theme.min_Cerulean.css

10,461

Author by

samturner

Updated on June 13, 2022

Comments

samturner almost 2 years

I'm working on a project for a client built on Twitter Bootstrap. He wants to have different colour schemes that the user can select from. For example have a Red Colour Scheme and a Blue Colour Scheme that the user can change through a menu up the top.

Is there any plugins for jQuery (or anything else for that matter) that will do this? All it really has to do is load a different CSS file I suppose, how would you go about doing this?