Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


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

Bakke premium asked 9 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">
      <input
        mdbCheckbox
        mdbValidate
        type="checkbox"
        formControlName="renewal"
        class="form-check-input"
        style="background-color: #3B71CA !important;"
      />
    </div>
    Renewal
  </label>
</div>

Rafał Seifert free answered 9 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;
$form-check-input-checkbox-focus-after-background-color:#3B71CA;
$form-switch-form-check-input-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.

FREE CONSULTATION

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

Status

Answered

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