Changing the color of a Bootstrap 5 toggle switch?

[agate]

Hi, I’ve been trying to change the color of the ‘ball’ that’s toggled in a toggle switch?
I’m going by this code:
Bootstrap

So how would I do this ? I can’t seem to figure this out.
Thanks

[ArielLeslie]

If you right click on the toggle and “inspect element”, you can really dig into an investigation of all the moving pieces of a component’s style.

I did a cursory look at the component you asked about. It looks like the “ball” of that toggle is styled primarily by this rule in _form-check.scss:

.form-switch .form-check-input:checked {
  background-position: right center;
  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='%23fff'/%3e%3c/svg%3e");
}

[agate]

Thanks, I will give that a try

[lasjorg]

The SASS variables are at the bottom of that page.

I didn’t spend a lot of time looking at it but customizing the colors for the switch might be a bit of a pain as it looks like some of the colors are shared and overwriting the variables affects the checkboxes as well as far as I can tell. The switch is a styled checkbox basically.

You can obviously overwrite the colors in plain CSS but that too isn’t super easy. The background image has the fill color in the URL string which isn’t hard to change but it has like 4 different states it can be in a combination of (checked/unchecked/focus/unfocused).

[agate]

Hi, it’s not working out well. I need to change the default background color (using linear-gradient) , and that works, but then I no longer see the toggle ball?
I tried adding z-index : -1 but it’s not working.

.form-check-input {
           
           background-image: linear-gradient(hsl(210, 78%, 56%),hsl(146, 68%, 55%));
         
        }

That’s why I asked about changing the toggle ball color.
Annoying to be stuck on something so small.

Thanks

[agate]

I solved it another way as this seemed too tricky.

[lasjorg]

Just to repeat what was already said. The toggle ball is the background image.

I looked at the source files and the _variables.scss file has some switch specific variables that aren’t on the docs page.

$form-switch-color: green;
$form-switch-focus-color: orange;
$form-switch-checked-color: red;