How to Change Color of Knob in Bootstrap 5 Switch

user_9516833 0
Viewed 3476

So i want to change the knob color to match my color theme. But when i open the bootstrap.css, i could not find the reference to that. I can change the border and the shadow, but not the knob. The only reference i can find is background image with i guess svg file like this:

.form-switch .form-check-input:focus {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2386b7fe'/%3e%3c/svg%3e");
}

But i dont know how to change that. Is it possible to change this one without creating the whole switch? Thanks for helping.

*image is for reference for what i want to change and what i have changed

The knob

bootstrap-5 svg css
4 Answers

It will work if you change the fill color correctly.

That means you can use a hex color with the appropriate escape %23 for the # character.

For example: #cc2222

fill='%23cc2222'/%3e%3c/svg%3e"

Or, you can used a named color...

For example: red

fill='red'/%3e%3c/svg%3e"

Or, you can use an RGB color with the appropriate escapes for parens (%28,%29)...

For example: rgba(100, 0, 0, .25)

fill='rgba%28100, 0, 0, 0.25%29'/%3e%3c/svg%3e"

Demo

user_1714560

Simply add this to your css file, or add it to your html file between <style> ... </style>, to change the background color of the switch - it also removes or modifies the blue circle and shadow. =]

.form-switch .form-check-input {
    height: 24px;
    width: 48px;
}
.form-switch .form-check-input:focus {
    border-color: rgba(0, 0, 0, 0.25);
    outline: 0;
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba(0,0,0,0.25)'/></svg>");
}
.form-switch .form-check-input:checked {
    background-color: #30D158;
    border-color: #30D158;
    border: none;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba(255,255,255,1.0)'/></svg>");
}
user_89540000

Scss way

Define variables for checked and unchecked input

Step-1

$custom-green: #1CA11C;
$white: #fff;

$form-switch-bg-green-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$custom-green}'/></svg>") !default;
$form-switch-checked-bg-green-image:    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#fff'/></svg>") !default;

Step-2

Usage in custom component file

.form-check {
    &.green &-input {
        background-image: escape-svg($form-switch-bg-green-image);
    }
    &.green &-input:checked {
        background-color: $custom-green;
        border-color: $custom-green;
        background-image: escape-svg($form-switch-checked-bg-green-image);
    }
    &.green &-input:focus {
        border-color: $custom-green;
        outline: 0;
        box-shadow: 0 0 $input-btn-focus-blur $input-btn-focus-width rgba($custom-green, $input-btn-focus-color-opacity);
          
    }
}

Thus if form-check has green class then switch will be green.

<div class="form-check green form-switch me-3 green">
    <input class="form-check-input" type="checkbox" value="" id="example-switch-default1" name="example-switch-default1" checked>
    <label class="form-check-label" for="example-switch-default1">Aktiv</label>
</div>

I have added box-shadow directly here which is generated via 2-3 variables in actual process, but in an all the change is only color of the box-shadow.

user_62091970

The color of the switch circle is defined as the 'fill' in the SVG (86b7fe). You can change that to a different value to change the color. The %23 is the url-encoded #

user_16946720
Related