@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