Topic: Button color contrast function
dsuciu free asked 5 years ago
Hi!
I would like to customize the function that is responsible for applying the text color on the buttons.
// MDB Mixins
// Set the color of the button and badge
@function set-notification-text-color($color) {
@if (lightness($color) > 80) {
@return $black-base; // Lighter backgorund, return dark color
}
@else {
@return $white-base; // Darker background, return light color
}
}
The contrast ratio set in the function does not pass the WebAIM test. Text still shows up white on a yellow background. I would like to know if there is a way to customize that function to fit my needs. I tried copying the function to the _custom-styles.scss file but it does not work. I am not looking for a hard-coded css override (but I'll do that if there's no other way).
I don't know how the function handles the contrast ratio but if I drop it to > 50 it seems to do the trick.
Marta Wierzbicka staff answered 5 years ago
Hi,
copy that set-notification-text-color
function to the _custom-variables.scss
file and then it will work. It won't work in the _custom-styles.scss
file.
Best, Marta
Marta Wierzbicka staff answered 5 years ago
Hi,
yes, you're right. You have to change the 80
value to 50
. You can change this value to any number you want.
Best, Marta
dsuciu free commented 5 years ago
Thank you for the quick response Marta. I really appreciate it. I will change the value to 50 but I was hoping to get a solution that would not require modifying the vendor file ( MDB mixins file). Is there a way to override the function in the _mixins.scss file by adding some code in my _custom-styles.scss file? If I need to update the the framework at some point I don't want to have to go back every time and change the values in your mixins file.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Free
- Premium support: No
- Technology: MDB jQuery
- MDB Version: 4.6.1
- Device: All
- Browser: All
- OS: All
- Provided sample code: No
- Provided link: Yes