Original plugin: PostCSS High Contrast
postcss([
require('@webgarden/postcss-high-contrast')({
aggressiveHC: true,
aggressiveHCDefaultSelectorList: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'li', 'th', 'td'],
aggressiveHCCustomSelectorList: ['div', 'span'],
colorProps: ['color', 'fill'],
backgroundColor: '#000',
altBgColor: '#fff',
textColor: '#fff',
buttonSelector: ['button'],
buttonColor: '#000',
buttonBackgroundColor: '#fcff3c',
buttonBorderColor: 'none',
linkSelectors: ['a'],
linkColor: '#fcff3c',
linkHoverColor: '#fcff3c',
borderColor: '#fff',
disableShadow: true,
customSelectors: ['input'],
customSelectorColor: '#fff',
customSelectorBackgroundColor: '#000',
customSelectorBorderdColor: '#fff',
selectorsBlackList: ['textfield'],
imageFilter: 'invert(100%)',
imageSelectors: ['img'],
CSSPropsWhiteList: ['background', 'background-color', 'color', 'border', 'border-top', 'border-bottom',
'border-left', 'border-right', 'border-color', 'border-top-color', 'border-right-color',
'border-bottom-color', 'border-left-color', 'box-shadow', 'filter', 'text-shadow', 'fill'],
HTMLHighContrastClass: 'hc',
removeAnimations: false,
append: true
})
]);
Using this plugin with append
option, the high contrast CSS is prefixed with the configured html class (
default: html.hc
), and gets appended to the original css. You can toggle .hc
class on the HTML tag.
document.querySelector('a.high-contrast').addEventListener('click', function (evt) {
evt.preventDefault();
document.documentElement.classList.toggle('hc');
});
Tip: use cookies to remember turned on high contrast css on different sessions and pages.
Name | Default Value | Description |
---|---|---|
aggressiveHC |
true |
Will append properties even if they do not exist |
aggressiveHCDefaultSelectorList |
['h1', 'h2', 'h3', 'h4', 'h5', 'h6','p', 'li', 'th', 'td'] |
Default list of selectors for aggressive property append |
aggressiveHCCustomSelectorList |
['span'] |
Custom list of selectors for aggressive property append |
colorProps |
['color','fill'] |
List of Properties that will be considered for color changing |
backgroundColor |
#000 |
Backgound color |
altBgColor |
#fff |
Alternative background color |
textColor |
#fff |
Text color |
buttonSelector |
[button] |
Button Selector |
buttonColor |
#000 |
Button color |
buttonBackgroundColor |
#fcff3c |
Button background color |
buttonBorderColor |
none |
Button border color |
linkColor |
#fcff3c |
Link color |
linkHoverBgColor |
#fff |
Link hover bacground color |
linkHoverColor |
#000 |
Link hover color |
borderColor |
#fff |
Border color |
disableShadow |
true |
Disable shadow |
imageFilter |
false /invert(100%) /grayscale(100%) /contrast(200%) |
Image Filter (disabled by default). false to disable. Any css filter option can be passed |
imageSelectors |
['img'] |
Default list of image selectors to apply imageFilter |
removeCSSProps |
false |
This option will remove all unused CSS selectors or properties for better optimization. Use CSS minifiers like CSSNano or CSSO to merge selectors |
CSSPropsWhiteList |
['background', 'background-color', 'color', 'border', 'border-top', 'border-bottom', 'border-left', 'border-right', 'border-color', 'border-top-color', 'border-right-color', 'border-bottom-color', 'border-left-color', 'box-shadow', 'filter', 'text-shadow'] |
CSS properties whitelist |
HTMLHighContrastClass |
hc |
Class added to HTML selector |
append |
true |
Append HC CSS to original one. False means: overwrite |
removeAnimations |
true |
Removes keyframe animation definition if true |