CODEWITHSUNDEEP
buttontwitter-bootstrapcolorstoggle
Jeremy
Jeremy

Reputation: 883

Twitter Bootstrap button toggle - How to make on/off state color contrast more obvious

I am using the button toggle feature of Twitter Bootstrap. Everything works perfectly. The problem is the color difference between the toggle's on/off state is too similar. It is hard to see the difference between on and off states.

Ideally I'd like to make the color contrast more pronounced between on/off states, or change the color entirely between states (e.g. blue = off, red = on). 

<button type='button' class='btn' data-toggle='button' value='ABC'><i class='icon-star-empty'></i></button>

Thanks.

Upvotes: 3

Views: 4604

Answers (2)

user1451334
user1451334

Reputation: 21

Recently also met this problem. found a quick solution

bootstrap-3.1.1

in line 209 from bootstrap.js

Change

if (changed) this.$element.toggleClass('active')

to

if (changed) this.$element.toggleClass('btn-success')

Upvotes: 2

Jeremy
Jeremy

Reputation: 883

I realized I could change the class using JQuery. Now off-state is white, on-state is green.

 $(document).ready(function() {

 $('.keyContactToggle').click(function (e) {

   var UserID = $(this).attr('value');

 if ( ($(this).is('.btn')) && ($(this).is('.keyContactToggle')) && !($(this).is('.btn-success')) ) {

   $(this).addClass('btn-success');


 } else {

   $(this).removeClass('btn-success');

 }

});

});

Upvotes: 1

Related Questions