leyoda/rqbit
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

1/n Fixing dark mode

Browse source
This commit is contained in:
Igor Katson 2023-12-16 10:23:24 +00:00
parent f42e57d464
commit 8d886e0961
No known key found for this signature in database
GPG key ID: B4EC22B66D61A3F5
6 changed files with 31 additions and 35 deletions
Download patch file Download diff file Expand all files Collapse all files

2
crates/librqbit/webui/src/components/Header.tsx
View file

@ -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">

2
crates/librqbit/webui/src/components/TorrentsList.tsx
View file

@ -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} />
))}

27
crates/librqbit/webui/src/components/buttons/DarkModeToggle.tsx
View file

@ -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;