08e975cd8e
* add active theme context * add chroma js library * add hook for accessible tag color * disable reply user color - temporary * render user color based on tag in room timeline * remove default tag icons * move accessible color function to plugins * render user power color in reply * increase username weight in timeline * add default color for member power level tag * show red slash in power color badge with no color * show power level color in room input reply * show power level username color in notifications * show power level color in notification reply * show power level color in message search * render power level color in room pin menu * add toggle for legacy username colors * drop over saturation from member default color * change border color of power color badge * show legacy username color in direct rooms
16 lines
466 B
TypeScript
16 lines
466 B
TypeScript
import chroma from 'chroma-js';
|
|
import { ThemeKind } from '../hooks/useTheme';
|
|
|
|
export const accessibleColor = (themeKind: ThemeKind, color: string): string => {
|
|
if (!chroma.valid(color)) return color;
|
|
|
|
let lightness = chroma(color).lab()[0];
|
|
if (themeKind === ThemeKind.Dark && lightness < 60) {
|
|
lightness = 60;
|
|
}
|
|
if (themeKind === ThemeKind.Light && lightness > 50) {
|
|
lightness = 50;
|
|
}
|
|
|
|
return chroma(color).set('lab.l', lightness).hex();
|
|
};
|