mirrors/cinny
1
0
Fork 0
mirror of https://github.com/cinnyapp/cinny.git synced 2025-11-15 03:30:29 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

Change username color in chat with power level color (#2282)

Browse source 
* 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:
Ajay Bura 2025-03-23 22:09:29 +11:00 • committed by GitHub
parent 7d54eef95b
commit 08e975cd8e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
26 changed files with 463 additions and 91 deletions
Download patch file Download diff file Expand all files Collapse all files

50
src/app/pages/ThemeManager.tsx
View file

@ -1,8 +1,13 @@
import { useEffect } from 'react';
import React, { ReactNode, useEffect } from 'react';
import { configClass, varsClass } from 'folds';
import { DarkTheme, LightTheme, ThemeKind, useSystemThemeKind, useThemes } from '../hooks/useTheme';
import { useSetting } from '../state/hooks/settings';
import { settingsAtom } from '../state/settings';
import {
DarkTheme,
LightTheme,
ThemeContextProvider,
ThemeKind,
useActiveTheme,
useSystemThemeKind,
} from '../hooks/useTheme';
export function UnAuthRouteThemeManager() {
const systemThemeKind = useSystemThemeKind();
@ -21,38 +26,15 @@ export function UnAuthRouteThemeManager() {
return null;
}
export function AuthRouteThemeManager() {
const systemThemeKind = useSystemThemeKind();
const themes = useThemes();
const [systemTheme] = useSetting(settingsAtom, 'useSystemTheme');
const [themeId] = useSetting(settingsAtom, 'themeId');
const [lightThemeId] = useSetting(settingsAtom, 'lightThemeId');
const [darkThemeId] = useSetting(settingsAtom, 'darkThemeId');
export function AuthRouteThemeManager({ children }: { children: ReactNode }) {
const activeTheme = useActiveTheme();
// apply normal theme if system theme is disabled
useEffect(() => {
if (!systemTheme) {
document.body.className = '';
document.body.classList.add(configClass, varsClass);
const selectedTheme = themes.find((theme) => theme.id === themeId) ?? LightTheme;
document.body.className = '';
document.body.classList.add(configClass, varsClass);
document.body.classList.add(...selectedTheme.classNames);
}
}, [systemTheme, themes, themeId]);
document.body.classList.add(...activeTheme.classNames);
}, [activeTheme]);
// apply preferred system theme if system theme is enabled
useEffect(() => {
if (systemTheme) {
document.body.className = '';
document.body.classList.add(configClass, varsClass);
const selectedTheme =
systemThemeKind === ThemeKind.Dark
? themes.find((theme) => theme.id === darkThemeId) ?? DarkTheme
: themes.find((theme) => theme.id === lightThemeId) ?? LightTheme;
document.body.classList.add(...selectedTheme.classNames);
}
}, [systemTheme, systemThemeKind, themes, lightThemeId, darkThemeId]);
return null;
return <ThemeContextProvider value={activeTheme}>{children}</ThemeContextProvider>;
}