From 09c4d703595abb63baa4854869af7f1ab962ffcb Mon Sep 17 00:00:00 2001
From: Jackson Zheng <60581068+JacksonZ03@users.noreply.github.com>
Date: Tue, 27 Jan 2026 08:55:47 +0000
Subject: [PATCH] Cleanup: Disable Invert options in Light Mode

---
 src/popup.html | 16 +---------------
 src/popup.ts   | 28 ++++++++++++++--------------
 2 files changed, 15 insertions(+), 29 deletions(-)

diff --git a/src/popup.html b/src/popup.html
index ab15934..1d721fb 100644
--- a/src/popup.html
+++ b/src/popup.html
@@ -178,7 +178,7 @@ <h3 class="sectionTitle hoverTip">
                             </div>
                         </div>
 
-                        <div class="section">
+                        <div id="documentInvertSection" class="section">
                             <h3 class="sectionTitle">Invert</h3>
 
                             <div class="sectionContent">
@@ -281,20 +281,6 @@ <h3 class="sectionTitle">Toggle Button</h3>
                                 </div>
                             </div>
                         </div>
-
-                        <div class="section">
-                            <h3 class="sectionTitle">Invert</h3>
-                            <div class="sectionContent">
-                                <div
-                                    id="advancedInvertOptions"
-                                    class="buttonRow fullWidth"
-                                >
-                                    <button id="documentInvertNormal">
-                                        <span>Normal</span>
-                                    </button>
-                                </div>
-                            </div>
-                        </div>
                     </div>
                 </div>
             </div>
diff --git a/src/popup.ts b/src/popup.ts
index 67e6b34..b595edd 100644
--- a/src/popup.ts
+++ b/src/popup.ts
@@ -464,6 +464,10 @@ class TipComponent {
 }
 
 class InvertComponent extends StateSubscriber {
+    private section = document.querySelector(
+        "#documentInvertSection"
+    ) as HTMLDivElement;
+
     private grayButton = document.querySelector(
         "#documentInvertGray"
     ) as HTMLButtonElement;
@@ -474,11 +478,6 @@ class InvertComponent extends StateSubscriber {
         "#documentInvertOff"
     ) as HTMLButtonElement;
 
-    // In advanced settings category
-    private normalButton = document.querySelector(
-        "#documentInvertNormal"
-    ) as HTMLButtonElement;
-
     initialize(): void {
         this.offButton.addEventListener("click", () => {
             this.state.setData({
@@ -499,16 +498,18 @@ class InvertComponent extends StateSubscriber {
                 invert_enabled: true,
             });
         });
-
-        this.normalButton.addEventListener("click", () => {
-            this.state.setData({
-                invert_mode: InvertMode.Normal,
-                invert_enabled: true,
-            });
-        });
     }
 
     update(newData: ExtensionData): void {
+        const isDarkMode = newData.mode === ExtensionMode.Dark;
+
+        // Show invert options only in dark mode
+        if (isDarkMode) {
+            this.section.classList.remove("hidden");
+        } else {
+            this.section.classList.add("hidden");
+        }
+
         this.resetAppearance();
 
         if (!newData.invert_enabled) {
@@ -524,7 +525,7 @@ class InvertComponent extends StateSubscriber {
                 this.blackButton.classList.add("selected");
                 break;
             case InvertMode.Normal:
-                this.normalButton.classList.add("selected");
+                this.offButton.classList.add("selected");
                 break;
             default:
                 break;
@@ -534,7 +535,6 @@ class InvertComponent extends StateSubscriber {
     resetAppearance(): void {
         this.grayButton.classList.remove("selected");
         this.blackButton.classList.remove("selected");
-        this.normalButton.classList.remove("selected");
         this.offButton.classList.remove("selected");
     }
 }