dark mode added

crates/librqbit/webui/src/components/buttons/DarkModeToggle.tsx

@@ -0,0 +1,27 @@
+import { useState, useEffect } from "react";
+
+const DarkModeToggle = () => {
+  const getInitialState = () => {
+    const storedDarkMode = localStorage.getItem("darkMode");
+    return storedDarkMode ? JSON.parse(storedDarkMode) : false;
+  };
+  const [isDarkMode, setIsDarkMode] = useState<boolean>(getInitialState);
+
+  useEffect(() => {
+    document.body.classList.toggle("dark", isDarkMode);
+    localStorage.setItem("darkMode", JSON.stringify(isDarkMode));
+  }, [isDarkMode]);
+
+  return (
+    <div className="fixed bottom-5 right-5">
+      <button
+        onClick={() => setIsDarkMode((prev) => !prev)}
+        className="ml-2 text-gray-700 dark:text-gray-300"
+      >
+        Dark Mode
+      </button>
+    </div>
+  );
+};
+
+export default DarkModeToggle;

crates/librqbit/webui/src/components/forms/FormInput.tsx

@@ -25,7 +25,9 @@ export const FormInput: React.FC<{
 }) => {
   return (
     <div className="flex flex-col gap-2 text-sm mb-2">
-      <label htmlFor={name}>{label}</label>
+      <label htmlFor={name} className="dark:text-slate-500">
+        {label}
+      </label>
       <input
         autoFocus={autoFocus}
         type={inputType}

crates/librqbit/webui/src/rqbit-web.tsx

@@ -7,6 +7,7 @@ import { IconButton } from "./components/buttons/IconButton";
 import { BsBodyText } from "react-icons/bs";
 import { LogStreamModal } from "./components/modal/LogStreamModal";
 import { Header } from "./components/Header";
+import DarkModeToggle from "./components/buttons/DarkModeToggle";
 
 export interface ErrorWithLabel {
   text: string;
@@ -86,6 +87,7 @@ export const RqbitWebUI = (props: {
       </div>
 
       <LogStreamModal show={logsOpened} onClose={() => setLogsOpened(false)} />
+      <DarkModeToggle />
     </AppContext.Provider>
   );
 };