Add option for monochrome mode (#2464)

src/app/pages/ThemeManager.tsx

@@ -8,6 +8,8 @@ import {
   useActiveTheme,
   useSystemThemeKind,
 } from '../hooks/useTheme';
+import { useSetting } from '../state/hooks/settings';
+import { settingsAtom } from '../state/settings';
 
 export function UnAuthRouteThemeManager() {
   const systemThemeKind = useSystemThemeKind();
@@ -28,13 +30,20 @@ export function UnAuthRouteThemeManager() {
 
 export function AuthRouteThemeManager({ children }: { children: ReactNode }) {
   const activeTheme = useActiveTheme();
+  const [monochromeMode] = useSetting(settingsAtom, 'monochromeMode');
 
   useEffect(() => {
     document.body.className = '';
     document.body.classList.add(configClass, varsClass);
 
     document.body.classList.add(...activeTheme.classNames);
-  }, [activeTheme]);
+
+    if (monochromeMode) {
+      document.body.style.filter = 'grayscale(1)';
+    } else {
+      document.body.style.filter = '';
+    }
+  }, [activeTheme, monochromeMode]);
 
   return <ThemeContextProvider value={activeTheme}>{children}</ThemeContextProvider>;
 }