Skip to content

Instantly share code, notes, and snippets.

@colin-haber
Created March 25, 2012 01:00
Show Gist options
  • Save colin-haber/2190496 to your computer and use it in GitHub Desktop.
Save colin-haber/2190496 to your computer and use it in GitHub Desktop.
.background-color-shift (@color, @amount: 10%) when (lightness(@color) > 50%) {
background-color: darken(@color, @amount);
}
.background-color-shift (@color, @amount: 10%) when (lightness(@color) <= 50%) {
background-color: lighten(@color, @amount);
}
.text-color-shift (@color, @amount: 10%) when (lightness(@color) > 50%) {
color: darken(@color, @amount);
}
.text-color-shift (@color, @amount: 10%) when (lightness(@color) <= 50%) {
color: lighten(@color, @amount);
}
@davidkaneda
Copy link

I saw in the post that you need to stick with Less for this, but are looking at Sass in the future. If you do end up giving Sass/Compass a proper go, you should check out a project I work on called Compass Recipes. I added a ["color-by-background"]( mixin, which you can call like this:

.myelement {
  @include color-by-background($bg-color, 40);
}

Where 40 is the amount of "contrast." Important to note that color-by-background also uses a custom "brightness" function, which is better at checking background readability than Sass's built-in "lightness," and also has option for $inset-text (adds a small text-shadow, varying light or dark). Here's a demo page that shows what I mean. Hope that helps!

@fat
Copy link

fat commented Mar 25, 2012

replace <= with =<.

In less the comparisons match on this: /^(?:>=|=<|[<=>])/

@colin-haber
Copy link
Author

Thanks, @fat. I forgot LESS comparisons worked that way.

@fat
Copy link

fat commented Mar 27, 2012

No worries :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment