local-it/vikunja-frontend
0
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

feat: improve colorIsDark helper

Browse source 
(also improve contrast of white label text)
This commit is contained in:
Dominik Pschenitschni 2022-05-21 00:09:41 +02:00 committed by Gitea
parent 72925fb938
commit 297d283090
2 changed files with 9 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/helpers/color/colorIsDark.ts
View file

@ -1,4 +1,4 @@
export const colorIsDark = color => {
export function colorIsDark(color) {
if (typeof color === 'undefined') {
return true // Defaults to dark
}
@ -16,7 +16,11 @@ export const colorIsDark = color => {
const g = (rgb >> 8) & 0xff // extract green
const b = (rgb >> 0) & 0xff // extract blue
// luma will be a value 0..255 where 0 indicates the darkest, and 255 the brightest
const luma = 0.2126 * r + 0.7152 * g + 0.0722 * b // per ITU-R BT.709
return luma > 128
// this is a quick and dirty implementation of the WCAG 3.0 APCA color contrast formula
// see: https://gist.github.com/Myndex/e1025706436736166561d339fd667493#andys-shortcut-to-luminance--lightness
const Ys = Math.pow(r/255.0,2.2) * 0.2126 +
Math.pow(g/255.0,2.2) * 0.7152 +
Math.pow(b/255.0,2.2) * 0.0722
return Math.pow(Ys,0.678) >= 0.5
}

2
src/models/label.ts
View file

@ -15,7 +15,7 @@ export default class LabelModel extends AbstractModel {
if (this.hexColor.substring(0, 1) !== '#') {
this.hexColor = '#' + this.hexColor
}
this.textColor = colorIsDark(this.hexColor) ? '#4a4a4a' : '#e5e5e5'
this.textColor = colorIsDark(this.hexColor) ? '#4a4a4a' : '#fff'
this.createdBy = new UserModel(this.createdBy)
this.created = new Date(this.created)