Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Synamically change text color based on a background color
$notification-confirm: hsla(101, 72%, 37%, 1); // Green
$notification-warning: #ffc53a; // Yellow
$notification-alert: rgb(172, 34, 34); // Red
%notification {
border-radius: 10px;
display: block;
font-size: 1.5em;
font-family: sans-serif;
padding: 1em 2em;
margin: 1em auto;
width: 30%;
text-align: center;
}
.notification {
@extend %notification;
}
.notification-confirm {
background: $notification-confirm;
color: set-notification-text-color($notification-confirm);
}
.notification-warning {
background: $notification-warning;
color: set-notification-text-color($notification-warning);
}
.notification-alert {
background: $notification-alert;
color: set-notification-text-color($notification-alert);
}
@function set-notification-text-color($color) {
@if (lightness($color) > 50) {
@return #000000; // Lighter backgorund, return dark color
} @else {
@return #ffffff; // Darker background, return light color
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment