Change username color in chat with power level color (#2282)
authorAjay Bura <32841439+ajbura@users.noreply.github.com>
Sun, 23 Mar 2025 11:09:29 +0000 (22:09 +1100)
committerGitHub <noreply@github.com>
Sun, 23 Mar 2025 11:09:29 +0000 (22:09 +1100)
commit08e975cd8e275372d489b415d92fa8d5ca233a3f
treed84b74fd8b64d3524784850bb4eb963ee2439b62
parent7d54eef95b0adafa3a66b33e370bcd3d15c5154b
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
26 files changed:
package-lock.json
package.json
src/app/components/message/Reply.tsx
src/app/components/message/layout/Base.tsx
src/app/components/message/layout/layout.css.ts
src/app/components/power/PowerColorBadge.tsx
src/app/components/power/style.css.ts
src/app/features/message-search/MessageSearch.tsx
src/app/features/message-search/SearchResultGroup.tsx
src/app/features/room/RoomInput.tsx
src/app/features/room/RoomTimeline.tsx
src/app/features/room/RoomView.tsx
src/app/features/room/message/Message.tsx
src/app/features/room/room-pin-menu/RoomPinMenu.tsx
src/app/features/settings/general/General.tsx
src/app/hooks/usePowerLevelTags.ts
src/app/hooks/useRoom.ts
src/app/hooks/useTheme.ts
src/app/pages/Router.tsx
src/app/pages/ThemeManager.tsx
src/app/pages/client/direct/RoomProvider.tsx
src/app/pages/client/home/RoomProvider.tsx
src/app/pages/client/inbox/Notifications.tsx
src/app/pages/client/space/RoomProvider.tsx
src/app/plugins/color.ts [new file with mode: 0644]
src/app/state/settings.ts