chuckdries/Personal-Website
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

improve auto color stuff

Browse Source
This commit is contained in:
Chuck Dries 2021-06-19 10:46:43 -07:00
parent 68a8c3ba90
commit e4b434c0c3
1 changed files with 14 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
gatsby-node.js
View File

@ -11,6 +11,14 @@ const readFile = util.promisify(fs.readFile);
const badContrast = (color1, color2) => chroma.contrast(color1, color2) < 4.5;
const logColorsWithContrast = (color1, color2, text) => {
const c1hex = color1.hex();
const c2hex = color2.hex();
console.log(chalk.hex(c1hex).bgHex(c2hex)(
`${text} ${c1hex}/${c2hex} ${chroma.contrast(color1, color2)}`
));
};
function processColors(vibrantData, imagePath) {
let Vibrant = chroma(vibrantData.Vibrant.getRgb());
let DarkVibrant = chroma(vibrantData.DarkVibrant.getRgb());
@ -29,9 +37,9 @@ function processColors(vibrantData, imagePath) {
Vibrant = Vibrant.brighten();
}
}
// second pass - first doesn't always get it right.
// second pass - first doesn't always do enough
if (badContrast(DarkVibrant, Vibrant) || badContrast(DarkVibrant, LightMuted)) {
DarkVibrant = DarkVibrant.darken();
// DarkVibrant = DarkVibrant.darken();
if (badContrast(DarkVibrant, Vibrant)) {
Vibrant = Vibrant.brighten(2);
}
@ -41,12 +49,12 @@ function processColors(vibrantData, imagePath) {
}
if (badContrast(DarkVibrant, Vibrant)){
console.log('contrast still too low', imagePath);
console.log(chalk.hex(Vibrant.hex()).bgHex(DarkVibrant.hex())(`DV-V: ${chroma.contrast(DarkVibrant, Vibrant)}`));
console.warn('contrast still too low', imagePath);
logColorsWithContrast(Vibrant, DarkVibrant, 'V-DV');
}
if (badContrast(DarkVibrant, LightMuted)){
console.log('contrast still too low', imagePath);
console.log(chalk.hex(LightMuted.hex()).bgHex(DarkVibrant.hex())(`DV-LM: ${chroma.contrast(DarkVibrant, LightMuted)}`));
console.warn('contrast still too low', imagePath);
logColorsWithContrast(LightMuted, DarkVibrant, 'LM-DV');
}