Button color contrast function


Topic: Button color contrast function

dsuciu asked 6 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.


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 commented 6 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.


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


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
  • User: 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