scss _brightness.scss

Posted 2021-05-18

@import 'brightness';

$dark-background-color: #333;
$light-text-color: white;

$light-background-color: #eee;
$dark-text-color: black;

.dark-background {
  background: $dark-background-color;
  color: contrasting-color($dark-background-color, $light-text-color, $dark-text-color);
}

.light-background {
  background: $light-background-color;
  color: contrasting-color($light-background-color, $light-text-color, $dark-text-color);
}

// Brightness math based on:
//   http://www.nbdtech.com/Blog/archive/2008/04/27/Calculating-the-Perceived-Brightness-of-a-Color.aspx

$red-magic-number: 241;
$green-magic-number: 691;
$blue-magic-number: 68;
$brightness-divisor: $red-magic-number + $green-magic-number + $blue-magic-number;

@function brightness($color) {
  // Extract color components
  $red-component: red($color);
  $green-component: green($color);
  $blue-component: blue($color);

  // Calculate a brightness value in 3d color space between 0 and 255
  $number: sqrt((($red-component * $red-component * $red-magic-number) + ($green-component * $green-component * $green-magic-number) + ($blue-component * $blue-component * $blue-magic-number)) / $brightness-divisor);

  // Convert to percentage and return
  @return 100% * $number / 255;
}

@function contrasting-color($color, $light, $dark) {
  @if brightness($color) < 65% {
    @return $light;
  } @else {
    @return $dark;
  }
}