mirror of
https://github.com/cinnyapp/cinny.git
synced 2025-11-16 12:10:28 +03:00
Change username color in chat with power level color (#2282)
* 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
This commit is contained in:
parent
7d54eef95b
commit
08e975cd8e
26 changed files with 463 additions and 91 deletions
16
src/app/plugins/color.ts
Normal file
16
src/app/plugins/color.ts
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
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();
|
||||
};
|
||||
Loading…
Add table
Add a link
Reference in a new issue