1/n Fixing dark mode

crates/librqbit/webui/src/components/Header.tsx

@@ -7,7 +7,7 @@ import Logo from "../../assets/logo.svg?react";
 export const Header = ({ title }: { title: string }) => {
   const [name, version] = title.split("-");
   return (
-    <header className="bg-slate-50 drop-shadow-lg flex flex-wrap justify-center lg:justify-between items-center dark:bg-slate-800">
+    <header className="bg-slate-50 drop-shadow-lg flex flex-wrap justify-center lg:justify-between items-center dark:bg-slate-800 mb-3">
       <div className="flex flex-nowrap items-center justify-between m-2">
         <Logo className="w-10 h-10 p-1" alt="logo" />
         <h1 className="flex items-center dark:text-white">

crates/librqbit/webui/src/components/TorrentsList.tsx

@@ -22,7 +22,7 @@ export const TorrentsList = (props: {
     );
   }
   return (
-    <div className="flex flex-col gap-2 mx-2 mt-3">
+    <div className="flex flex-col gap-2 mx-2">
       {props.torrents.map((t: TorrentId) => (
         <Torrent id={t.id} key={t.id} torrent={t} />
       ))}

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

@@ -1,27 +0,0 @@
-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/helper/darkMode.ts

@@ -0,0 +1,21 @@
+let darkMode = window.matchMedia("(prefers-color-scheme: dark)").matches;
+
+window
+  .matchMedia("(prefers-color-scheme: dark)")
+  .addEventListener("change", (event) => {
+    DarkMode.setDark(event.matches);
+  });
+
+export const DarkMode = {
+  isDark: () => darkMode,
+  setDark: (value: boolean) => {
+    darkMode = value;
+    document.body.classList.toggle("dark", darkMode);
+    return darkMode;
+  },
+  toggle: () => {
+    DarkMode.setDark(!darkMode);
+  },
+};
+
+DarkMode.setDark(darkMode);

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

@@ -4,10 +4,10 @@ import { AppContext, APIContext } from "./context";
 import { RootContent } from "./components/RootContent";
 import { customSetInterval } from "./helper/customSetInterval";
 import { IconButton } from "./components/buttons/IconButton";
-import { BsBodyText } from "react-icons/bs";
+import { BsBodyText, BsMoon } from "react-icons/bs";
 import { LogStreamModal } from "./components/modal/LogStreamModal";
 import { Header } from "./components/Header";
-import DarkModeToggle from "./components/buttons/DarkModeToggle";
+import { DarkMode } from "./helper/darkMode";
 
 export interface ErrorWithLabel {
   text: string;
@@ -68,7 +68,7 @@ export const RqbitWebUI = (props: {
   return (
     <AppContext.Provider value={context}>
       <Header title={props.title} />
-      <div className="relative dark:bg-gray-900 pt-3 min-h-screen h-full">
+      <div className="relative dark:bg-gray-900">
         {/* Menu buttons */}
         <div className="absolute top-0 start-0 pl-2 z-10">
           {props.menuButtons &&
@@ -76,6 +76,9 @@ export const RqbitWebUI = (props: {
           <IconButton onClick={() => setLogsOpened(true)}>
             <BsBodyText />
           </IconButton>
+          <IconButton onClick={DarkMode.toggle}>
+            <BsMoon />
+          </IconButton>
         </div>
 
         <RootContent
@@ -87,7 +90,6 @@ export const RqbitWebUI = (props: {
       </div>
 
       <LogStreamModal show={logsOpened} onClose={() => setLogsOpened(false)} />
-      <DarkModeToggle />
     </AppContext.Provider>
   );
 };

desktop/src-tauri/Cargo.lock

@@ -1867,7 +1867,7 @@ dependencies = [
 
 [[package]]
 name = "librqbit"
-version = "5.1.0"
+version = "5.2.0"
 dependencies = [
  "anyhow",
  "axum",
@@ -3012,7 +3012,7 @@ dependencies = [
 
 [[package]]
 name = "rqbit-desktop"
-version = "5.1.0"
+version = "5.2.0"
 dependencies = [
  "anyhow",
  "base64 0.21.5",