Semantic-ui: Adding colors to Toggle

[piernik]

Now toggle button is always green - can You add ability to declare color? red, blue, teal?

[jlukic]

This is easy to change with theming, https://github.com/Semantic-Org/Semantic-UI/blob/master/src/themes/default/modules/checkbox.variables#L12

You will need to use LESS version of build tools.

We wont support multiple colors for checkbox, it doesn't fit in with my design sensibilities for checkbox ui.

[piernik]

I'll do it - no problem but I think it should be in core

[kamalkhan]

A snippet to generate an infinite amount of colored checkboxes (less)

@colors: red, green, blue, violet, pink, black, white;
.ui.toggle.checkbox {
    .-(@i: length(@colors)) when (@i > 0) {
        @c: extract(@colors, @i);
        &.@{c} {
            input:checked~label {
                color: @c;
                &:before { background-color: @c; }
            }
        }
        .-((@i - 1));
    } .-;
}

Assign the color names to @colors and you are good to go.

Usage (html)

<div class="ui toggle pink checkbox">
    <input type="checkbox" tabindex="0" class="hidden">
    <label>Is this a rainbow?</label>
</div>

This overflow came in handy!

[Bandit]

If you double @ the colour names in the definition, it will use the theme variables (@blue etc) instead:

[...]
        &.@{c} {
            input:checked~label {
                color: @@c !important;
                &:before { background-color: @@c !important; }
            }
        }
[...]

Also I added !important to override the !important added by Semantic UI.

[moshest]

@jlukic Perhaps adding support only for toggles and not for checkboxs?

On my dashboard I have two toggles and I would like that each one of them will have different color without hacks.

[Isabellle]

Is it now possible to quickly change the color?