Add option for monochrome mode (#2464)

diff --git a/src/app/features/settings/general/General.tsx b/src/app/features/settings/general/General.tsx
index ed11ec4d75b40cfa62e61366c011d52afc3b06e7..b861a060b7e8f83ce4dbaa1d6324d33ca602e1af 100644 (file)
--- a/src/app/features/settings/general/General.tsx
+++ b/src/app/features/settings/general/General.tsx
@@ -305,6 +305,7 @@ function PageZoomInput() {
 
 function Appearance() {
   const [systemTheme, setSystemTheme] = useSetting(settingsAtom, 'useSystemTheme');
+  const [monochromeMode, setMonochromeMode] = useSetting(settingsAtom, 'monochromeMode');
   const [twitterEmoji, setTwitterEmoji] = useSetting(settingsAtom, 'twitterEmoji');
 
   return (
@@ -332,6 +333,13 @@ function Appearance() {
         />
       </SequenceCard>
 
+      <SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
+        <SettingTile
+          title="Monochrome Mode"
+          after={<Switch variant="Primary" value={monochromeMode} onChange={setMonochromeMode} />}
+        />
+      </SequenceCard>
+
       <SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
         <SettingTile
           title="Twitter Emoji"

diff --git a/src/app/pages/ThemeManager.tsx b/src/app/pages/ThemeManager.tsx
index 7e6039a82df7242b23d768db3a2a7afa77cee545..69d50cdb9c58d00962972f15581c780ff1d7469d 100644 (file)
--- a/src/app/pages/ThemeManager.tsx
+++ b/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>;
 }

diff --git a/src/app/state/settings.ts b/src/app/state/settings.ts
index 15bf9a140247df0bca6397b675bdd4bc5b5dc860..31ee6ccb974be5ca62f6b25be90b8152bcab8f4c 100644 (file)
--- a/src/app/state/settings.ts
+++ b/src/app/state/settings.ts
@@ -14,6 +14,7 @@ export interface Settings {
   useSystemTheme: boolean;
   lightThemeId?: string;
   darkThemeId?: string;
+  monochromeMode?: boolean;
   isMarkdown: boolean;
   editorToolbar: boolean;
   twitterEmoji: boolean;
@@ -47,6 +48,7 @@ const defaultSettings: Settings = {
   useSystemTheme: true,
   lightThemeId: undefined,
   darkThemeId: undefined,
+  monochromeMode: false,
   isMarkdown: true,
   editorToolbar: false,
   twitterEmoji: false,