Topic: How to Apply the Active Color to both States of Switch Toggle

Bakke premium asked 2 months ago

I would like the ability to change the "off" coloring of the form switch toggle to match the active color class. For my use case, it would look better if the color of the toggle didn't change to make it easier to indicate which option is selected, since I have the labels on either side of the control.

Here is the code for my switch that displays as I want it, I just need to change the coloring of the toggle when it's switched "off" to New Vehicle. I can force the background bit of the slider to be colored with background-color, but I can't seem to find the way of changing the circle's color.

<div class="mb-3">
  <label class="form-check-label d-flex">
    New Vehicle
    <div class="form-check form-switch mx-2">
        style="background-color: #3B71CA !important;"

Rafał Seifert staff answered 2 months ago

In your global styles.scss overwrite those variables:

$form-switch-form-check-input-after-background-color: #3B71CA;
$form-switch-form-check-input-checked-checkbox-after-background-color: #3B71CA;

@import 'mdb-angular-ui-kit/assets/scss/mdb.scss';

Make sure to do so before importing mdb styles. Let me know if that helps you.

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • ForumUser: Premium
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: MDB5 5.2.0
  • Device: N/A
  • Browser: N/A
  • OS: N/A
  • Provided sample code: No
  • Provided link: No