From a4e9f915bf71e04950b52e2bb07883d17b0090a4 Mon Sep 17 00:00:00 2001
From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Date: Tue, 12 May 2026 14:38:38 +0000
Subject: [PATCH] Make app permanently light mode

- Remove dark mode state, handler, and localStorage persistence
- Remove Dark Mode toggle from settings modal
- Remove dark theme CSS variables from SCSS
- Ensure data-theme attribute is always cleared on mount
- Update theme-color in index.html and manifest.json to white

Co-Authored-By: shahmir.masood <shahmir.masood@cognition.ai>
---
 public/index.html                            |  2 +-
 public/manifest.json                         |  2 +-
 src/App.jsx                                  | 16 ++++------------
 src/App.module.scss                          | 11 -----------
 src/components/SettingModal/SettingModal.jsx |  3 ---
 5 files changed, 6 insertions(+), 28 deletions(-)

diff --git a/public/index.html b/public/index.html
index 9abfe26..37c2439 100644
--- a/public/index.html
+++ b/public/index.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
+    <meta name="theme-color" content="#ffffff" />
     <meta name="description" content="wordle created using react" />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
diff --git a/public/manifest.json b/public/manifest.json
index 2c8b5f0..21a01f6 100644
--- a/public/manifest.json
+++ b/public/manifest.json
@@ -20,6 +20,6 @@
   ],
   "start_url": ".",
   "display": "standalone",
-  "theme_color": "#000000",
+  "theme_color": "#ffffff",
   "background_color": "#ffffff"
 }
diff --git a/src/App.jsx b/src/App.jsx
index 97920df..359bd4b 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -28,7 +28,7 @@ function App() {
     guesses: [],
     solutionIndex: '',
   });
-  const [theme, setTheme] = useLocalStorage('theme', 'dark');
+
   const [highContrast, setHighContrast] = useLocalStorage(
     'high-contrast',
     false
@@ -54,7 +54,7 @@ function App() {
   const [isStatsModalOpen, setIsStatsModalOpen] = useState(false);
   const [isSettingsModalOpen, setIsSettingsModalOpen] = useState(false);
   const [isHardMode, setIsHardMode] = useState(hardMode);
-  const [isDarkMode, setIsDarkMode] = useState(theme === 'dark');
+
   const [isHighContrastMode, setIsHighContrastMode] = useState(highContrast);
   const { showAlert } = useAlert();
 
@@ -92,18 +92,12 @@ function App() {
   }, [guesses]);
 
   useEffect(() => {
-    if (isDarkMode) document.body.setAttribute('data-theme', 'dark');
-    else document.body.removeAttribute('data-theme');
+    document.body.removeAttribute('data-theme');
 
     if (isHighContrastMode)
       document.body.setAttribute('data-mode', 'high-contrast');
     else document.body.removeAttribute('data-mode');
-  }, [isDarkMode, isHighContrastMode]);
-
-  const handleDarkMode = () => {
-    setIsDarkMode(!isDarkMode);
-    setTheme(isDarkMode ? 'light' : 'dark');
-  };
+  }, [isHighContrastMode]);
 
   const handleHighContrastMode = () => {
     setIsHighContrastMode(!isHighContrastMode);
@@ -182,10 +176,8 @@ function App() {
         isOpen={isSettingsModalOpen}
         onClose={() => setIsSettingsModalOpen(false)}
         isHardMode={isHardMode}
-        isDarkMode={isDarkMode}
         isHighContrastMode={isHighContrastMode}
         setIsHardMode={handleHardMode}
-        setIsDarkMode={handleDarkMode}
         setIsHighContrastMode={handleHighContrastMode}
       />
       <StatsModal
diff --git a/src/App.module.scss b/src/App.module.scss
index 48368c4..a48dccd 100644
--- a/src/App.module.scss
+++ b/src/App.module.scss
@@ -24,17 +24,6 @@
   --color-text-secondary: #333;
   --color-icon: #333;
 
-  [data-theme='dark'] {
-    --color-background: #191919;
-    --color-cell: #444444;
-    --color-key: #4f4f4f;
-    --color-key-text: #fff;
-    --color-key-secondary: #fff;
-    --color-text-primary: #fff;
-    --color-text-secondary: #adadad;
-    --color-icon: #fff;
-  }
-
   [data-mode='high-contrast'] {
     --color-present: #06b6d4;
     --color-correct: #f97316;
diff --git a/src/components/SettingModal/SettingModal.jsx b/src/components/SettingModal/SettingModal.jsx
index 2097a54..9045efb 100644
--- a/src/components/SettingModal/SettingModal.jsx
+++ b/src/components/SettingModal/SettingModal.jsx
@@ -6,10 +6,8 @@ const SettingModal = ({
   isOpen,
   onClose,
   isHardMode,
-  isDarkMode,
   isHighContrastMode,
   setIsHardMode,
-  setIsDarkMode,
   setIsHighContrastMode,
 }) => {
   return (
@@ -20,7 +18,6 @@ const SettingModal = ({
         isOn={isHardMode}
         onToggle={setIsHardMode}
       />
-      <Row title="Dark Mode" isOn={isDarkMode} onToggle={setIsDarkMode} />
       <Row
         title="High Contrast Mode"
         desc="For improved color vision"