From c1274e851abb4b8a80dca0131038e23223a6eb85 Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Mon, 25 Aug 2025 18:49:14 +0530
Subject: [PATCH] Add option for monochrome mode (#2464)

---
 src/app/features/settings/general/General.tsx |  8 ++++++++
 src/app/pages/ThemeManager.tsx                | 11 ++++++++++-
 src/app/state/settings.ts                     |  2 ++
 3 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/src/app/features/settings/general/General.tsx b/src/app/features/settings/general/General.tsx
index ed11ec4d..b861a060 100644
--- 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 7e6039a8..69d50cdb 100644
--- 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 15bf9a14..31ee6ccb 100644
--- 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,