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

src/app/hooks/useTheme.ts

@@ -1,7 +1,9 @@
 import { lightTheme } from 'folds';
-import { useEffect, useMemo, useState } from 'react';
+import { createContext, useContext, useEffect, useMemo, useState } from 'react';
 import { onDarkFontWeight, onLightFontWeight } from '../../config.css';
 import { butterTheme, darkTheme, silverTheme } from '../../colors.css';
+import { settingsAtom } from '../state/settings';
+import { useSetting } from '../state/hooks/settings';
 
 export enum ThemeKind {
   Light = 'light',
@@ -72,3 +74,37 @@ export const useSystemThemeKind = (): ThemeKind => {
 
   return themeKind;
 };
+
+export const useActiveTheme = (): Theme => {
+  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');
+
+  if (!systemTheme) {
+    const selectedTheme = themes.find((theme) => theme.id === themeId) ?? LightTheme;
+
+    return selectedTheme;
+  }
+
+  const selectedTheme =
+    systemThemeKind === ThemeKind.Dark
+      ? themes.find((theme) => theme.id === darkThemeId) ?? DarkTheme
+      : themes.find((theme) => theme.id === lightThemeId) ?? LightTheme;
+
+  return selectedTheme;
+};
+
+const ThemeContext = createContext<Theme | null>(null);
+export const ThemeContextProvider = ThemeContext.Provider;
+
+export const useTheme = (): Theme => {
+  const theme = useContext(ThemeContext);
+  if (!theme) {
+    throw new Error('No theme provided!');
+  }
+
+  return theme;
+};