Skip to content

A SCSS function that returns a text color (black or white) based on the provided background color.

Notifications You must be signed in to change notification settings

ThuHtooSan/adaptive-text

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

2 Commits
 
 
 
 
 
 

Repository files navigation

adaptive-text

This is a SCSS function that returns a text color (black or white) based on the provided background color by using W3C's algorithm. Simply speaking, this function changes text color based on color contrast.

Screenshot

How to use

  1. Copy the function to your functions.scss

    $ sed -n '/@function/,$p' adaptive-text.scss >> functions.scss
  2. Load required modules to your functions.scss

    $ sed -n '/@use/,/@use/p' adaptive-text.scss | cat - functions.scss > /tmp/out && mv /tmp/out functions.scss
  3. Import your functions.scss

    @use 'functions' as *;
    // or
    @import 'functions';
  4. You are ready to use it!

    Example:

    @each $key, $val in $some-color-map {
    	.bg-#{$key} {
    		background: $val;
    		color: adaptive-text($val);
    	}
    }