Topic: How to Apply the Active Color to both States of Switch Toggle
Bakke premium asked 8 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 8 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.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- 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