Check if a colour is “light” or “dark”?

[martinbean]

I’m trying to work out if a given colour is “light” or “dark”. I’ve seen the contrast-ratio function in, well, the _functons.scss file, but struggling to get it to give me a different result when I pass it two contrasting colours.

The reason I want to do this is so I can programatically set the navber styles based on the background colour of the element it’s contained within. I have a platform where users can “theme” their site. So they may choose any colour for their header, and I need the navber in that header to look appealing no matter what colour is selected. So I tried this:

.site-header {
  .navbar {
    @if color-constrast($site-header-bg) == $color-contrast-dark {
      @extend .navbar-light;
    } @else {
      @extend .navbar-dark;
    }
  }
}

However, this seems to just apply the .navbar-dark class no matter what value $site-header-bg has. Even with a white background, the navbar still has white links.

I basically just want to do, “If the given colour is ‘dark’, add the .navbar-dark styles. Otherwise, add the .navbar-light styles.”

[ffoodd]

You need to perform the contrast check before your condition, check this CodePen for a working example. Basically:

$site-header-bg: $white;
$site-header-fg: color-contrast($site-header-bg);

.site-header {
   .navbar {
      @if $site-header-fg == $color-contrast-dark {
        @extend .navbar-light;
      } @else {
        @extend .navbar-dark;
      }
   }
}