Switch not aesthetically pleasing while on dark background #119

grounded042 opened this Issue Mar 4, 2014 · 3 comments


None yet
4 participants

When using a switch on a dark background, it shows some gray on the right side while in the "ON" position.

2014-03-04 12_48_35-clipboard

I suggest doing one of the following to fix it. (The first gives me better results but can have an unwanted side effect when dragging the switch instead of clicking.)

  1. Add:
.has-switch .switch-on span.switch-right {
    -webkit-transition: all 0s ease 0.25s;
    transition: all 0s ease 0.25s;
    background-color: transparent;

.has-switch span.switch-right {
    -webkit-transition: all 0s;
    transition: all 0s; 
  1. Change this block (starting at line 3515 as of 00a8e14) from :
.has-switch > div.switch-on {
  left: 0;


.has-switch > div.switch-on {
  left: 1px;

I can submit a pull request with one of the above fixes. Is there a preference as to which solution I use?


andrew-ml commented Oct 8, 2014

Hi, @grounded042 ,
I've just checked switches on the dark background on the latest release, it looks fine,
here is the screenshot of test case in docs/examples/switches.html:

flat ui pro - google chrome png

Please let me know if you still see this bug.

jcarl commented Oct 11, 2014

Awesome! This looks great!

andrew-ml closed this Oct 17, 2014

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment