Fixed outdated dark mode button

package.json

@@ -75,9 +75,9 @@
     "http-proxy-middleware": "^3.0.3",
     "humanize-duration": "^3.32.1",
     "husky": "^9.1.7",
-    "i18next": "^23.16.4",
-    "i18next-browser-languagedetector": "^8.0.0",
-    "i18next-http-backend": "^2.6.2",
+    "i18next": "^24.2.2",
+    "i18next-browser-languagedetector": "^8.0.2",
+    "i18next-http-backend": "^3.0.2",
     "image-capture": "^0.4.0",
     "jimp": "^1.6.0",
     "js-cookie": "^3.0.5",
@@ -93,7 +93,6 @@
     "prettier": "^3.4.2",
     "react": "^19.0.0",
     "react-bootstrap": "^2.10.8",
-    "react-dark-mode-toggle-2": "^2.1.1",
     "react-dev-utils": "^12.0.1",
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",
@@ -102,7 +101,7 @@
     "react-dom": "^19.0.0",
     "react-dropzone": "^14.3.5",
     "react-fast-marquee": "^1.6.5",
-    "react-i18next": "^15.1.0",
+    "react-i18next": "^15.4.0",
     "react-merge-refs": "^2.1.1",
     "react-router-dom": "7",
     "react-slider": "^2.0.6",

src/components/Settings/GeneralSettings.tsx

@@ -1,8 +1,6 @@
 import { useState, useContext } from "react";
 import { ListGroup, Form } from "react-bootstrap";
-// import { DarkModeToggle } from "react-dark-mode-toggle-2";
 
-// import { db } from "../services/db";
 import i18n from "../../i18n";
 
 import { ThemeContext } from "../ThemeContext";
@@ -156,16 +154,14 @@ const DarkMode = () => {
         </>
       }
       right={
-        <div className="m-1">
-          {/* <DarkModeToggle
-            onChange={checked => {
-              setTheme(checked ? "dark" : "light");
-            }}
-            isDarkMode={theme === "dark"}
-            size={60}
-          /> */}
-          NOOP
-        </div>
+        <Form.Switch
+          checked={theme === "dark"}
+          onChange={e => {
+            setTheme(e.target.checked ? "dark" : "light");
+          }}
+          id="dark-mode-switch"
+          label=""
+        />
       }
     />
   );