From 693c79c9b7b036e3a9bd895856ec46a5d264c4cb Mon Sep 17 00:00:00 2001
From: Huang Xin <chrox.huang@gmail.com>
Date: Mon, 10 Mar 2025 00:02:01 +0800
Subject: [PATCH] fix: remove seldomly used option to invert colors in dark
 mode (#548)

This option is hard to understand and explain. Most hardcoded color
in dark mode that affects readability has already been fixed in the
reader so there is no necessity to have this option.
---
 .../src/app/reader/components/ViewMenu.tsx       | 16 +---------------
 1 file changed, 1 insertion(+), 15 deletions(-)

diff --git a/apps/readest-app/src/app/reader/components/ViewMenu.tsx b/apps/readest-app/src/app/reader/components/ViewMenu.tsx
index 2635d6a8..10aa1df1 100644
--- a/apps/readest-app/src/app/reader/components/ViewMenu.tsx
+++ b/apps/readest-app/src/app/reader/components/ViewMenu.tsx
@@ -32,16 +32,14 @@ const ViewMenu: React.FC<ViewMenuProps> = ({
   const { getView, getViews, getViewSettings, setViewSettings } = useReaderStore();
   const viewSettings = getViewSettings(bookKey)!;
 
-  const { themeMode, isDarkMode, themeCode, setThemeMode } = useThemeStore();
+  const { themeMode, themeCode, setThemeMode } = useThemeStore();
   const [isScrolledMode, setScrolledMode] = useState(viewSettings!.scrolled);
-  const [isInvertedColors, setInvertedColors] = useState(viewSettings!.invert);
   const [zoomLevel, setZoomLevel] = useState(viewSettings!.zoomLevel!);
 
   const zoomIn = () => setZoomLevel((prev) => Math.min(prev + ZOOM_STEP, MAX_ZOOM_LEVEL));
   const zoomOut = () => setZoomLevel((prev) => Math.max(prev - ZOOM_STEP, MIN_ZOOM_LEVEL));
   const resetZoom = () => setZoomLevel(100);
   const toggleScrolledMode = () => setScrolledMode(!isScrolledMode);
-  const toggleInvertedColors = () => setInvertedColors(!isInvertedColors);
 
   const openFontLayoutMenu = () => {
     setIsDropdownOpen?.(false);
@@ -78,12 +76,6 @@ const ViewMenu: React.FC<ViewMenuProps> = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isScrolledMode]);
 
-  useEffect(() => {
-    document.body.classList.toggle('invert', isInvertedColors);
-    getView(bookKey)?.renderer.setStyles?.(getStyles(viewSettings!));
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isInvertedColors]);
-
   useEffect(() => {
     const view = getView(bookKey);
     if (!view) return;
@@ -154,12 +146,6 @@ const ViewMenu: React.FC<ViewMenuProps> = ({
         icon={themeMode === 'dark' ? <BiMoon /> : themeMode === 'light' ? <BiSun /> : <TbSunMoon />}
         onClick={cycleThemeMode}
       />
-      <MenuItem
-        label={_('Invert Colors in Dark Mode')}
-        icon={isInvertedColors ? <MdCheck className='text-base-content' /> : undefined}
-        onClick={toggleInvertedColors}
-        disabled={!isDarkMode}
-      />
     </div>
   );
 };