@magedragonfrog/readable-text-color v2.2.0

@magedragonfrog/readable-text-color

Applies 'black' or 'white' as foreground color to HTML elements depending on their background color.

Usage

First off you need to install the package from NPM using npm install --save @magedragonfrog\readable-text-color.
Once the package is installed you can import the applyReadableTextColor function from @magedragonfrog\readable-text-color.
For example:

import { applyReadableTextColor } from '@magedragonfrog\readable-text-color'

applyReadableTextColor();

When applyReadableTextColor() is be called without any arguments, the function...

• ...will apply to all HTML Elements decorated with the data-* attribute data-apply-readable-text-color
• ...will consider bright all background colors that have a perceived brightness greater than 0.5

To customize this behavior supply applyReadableTextColor() a ReadableTextColorConfiguration.
ReadableTextColorConfiguration exposes two properties:

brightnessThreshold: Perceived brightness threshold, if a color as a perceived brightness greater than this number it will considered bright.
By default the value is 0.5.

elementsToAffectSelector: CSS selector used to select all the elements that will be affected by calling applyReadableTextColor() without arguments.
By default the selector is data-apply-readable-text-color

You can also give to applyReadableTextColor() an array of HTMLElement or a NodeListOf<HTMLELement> to target.
If this argument is supplied the property ReadableTextColorConfiguration.elementsToAffectSelector has no effect.

If you want to supply you array of HTMLElement or a NodeListOf<HTMLElement> but still use the default configuration, import and call applyReadableTextColorWithDefaultConfiguration().
For Example:

import { applyReadableTextColor } from '@magedragonfrog\readable-text-color'

const elementsToAffect = document.querySelectorAll('div > p');

applyReadableTextColorWithDefaultConfigurationTo(elementsToAffect);

Color representations supported

Refer to css-color-parser README