How do I switch Bootswatch themes in Meteor?

Question

I am building an app for the first time using Meteor. Due to an accessibility issue, we would like to offer two different Bootswatch themes to the users. I found a very useful explanation of how to switch Bootswatch themes here:

How to dynamically change themes after clicking a drop down menu of themes

(which references a handy fiddle in the accepted answer: http://jsfiddle.net/82AsF/)

I have tried placing the provided javascript inside myapp.html in the <head> tag. I also tried placing it inside the myapp.js file. (Then I tried placing in many assorted places just to see what would happen ;-) )

Nothing I have tried is working and it seems that it is the Meteor framework that is, understandably, "getting in the way". Is there an approach that will work for switching Bootswatch themes in a Meteor app?

I can use any of the bootswatch themes as my default - works as expected. It is the switching of the themes that results in no change to the theme (no change in the link in head). — user3469344, Mar 27 '14 at 16:38
So when you change `theme-name` in a link like this: `` nothing happens? — JohnAllen, Mar 27 '14 at 16:42
Do you have bootstrap3 installed? We don't use that, just bootstrap-accounts-ui, which I imagine probably includes bootstrap. I would try removing bootstrap packages except for bootstrap-accounts-ui, then change your theme and see what happens. — JohnAllen, Mar 27 '14 at 16:44
for the initial theme, yes, i can change it to any theme i want and it works as expected - however, when I try to take advantage if a **dynamic switch** of theme using the approach outlined in the referenced question, no dynamic switch occurs. — user3469344, Mar 27 '14 at 16:48
this question: http://stackoverflow.com/questions/10646570 led me to modify the jquery function like so: `$(function(){ var themesheet = $(''); themesheet.appendTo('head'); $('body').on('click', '.theme-link', function (e) { var themeurl = themes[$(this).attr('data-theme')]; themesheet.attr('href',themeurl); }); });` It now dynamically switches bootswatch themes in my meteor app via dropdown selection - very much like the bootswatch site. — user3469344, Mar 27 '14 at 19:50

score 2 · Accepted Answer · edited May 23 '17 at 12:20

Dynamically switching bootswatch themes is easily done as demonstrated in the originally referenced question: How to dynamically change themes after clicking a drop down menu of themes

Meteor (plus iron-router in my case) complicates this a little through the event maps and the simple fact that the dynamic change is occurring in the <head>.

Another answered question explains how to handle an event in jQuery directly (bypassing Meteor event maps): How to handle custom jQuery events in Meteor?

The code snippet below shows how I put the two ideas together. It's all working as expected.

var themes = {
  "default": "bootstrap311/css/bootstrap.default.min.css",
  "readable" : "bootstrap311/css/bootstrap.readable.min.css",
  "slate" : "bootstrap311/css/bootstrap.slate.min.css"
}

$(function(){
  var themesheet = $('<link href="'+themes['default']+'" rel="stylesheet" />');
  themesheet.appendTo('head');
  $('body').on('click', '.theme-link', function (e) {
    var themeurl = themes[$(this).attr('data-theme')]; 
    themesheet.attr('href',themeurl);
  });
});

How do I switch Bootswatch themes in Meteor?

1 Answers1