Dark theme

frontend/index.css

@@ -1,8 +1,16 @@
+@import url('./src/styles/colors.css');
+
 body {
     font-family: 'Shippori Antique', sans-serif;
     height: 80vh;
-    /* background-color: #222848; */
-    background-color: #f8f9ff;
-    /* color: #f1f1f1; */
-    color: #3b3e66;
+    background-color: var(--body);
+    color: var(--text);
+}
+
+.dark {
+    --body: #1c1c1c;
+    --text: #ffffff;
+    --status:#292929;
+    --stack: #212121;
+    --border: #3a3a3a;
 }

frontend/src/App.css

@@ -1,12 +1,14 @@
+@import url('../src/styles/colors.css');
+
 .status-box {
-    background-color: #f8f9ffa1;
+    background-color: var(--status);
     padding: 8px;
     border-radius: 5px;
     overflow-x: hidden;
 }
 
 .stack-box {
-    background-color: #ffffff;
+    background-color: var(--stack);
     border-radius: 1pc;
 }
 
@@ -14,3 +16,15 @@
     text-decoration: underline;
     cursor: pointer;
 }
+
+.form-control{
+    background-color: var(--status);
+    border-color: var(--border);
+    color: var(--text);
+}
+
+.input-group-text{
+    color: var(--text);
+    background-color: var(--status);
+    border-color: var(--border);
+}

frontend/src/App.tsx

@@ -12,8 +12,8 @@ import {
     Toast,
 } from "react-bootstrap";
 import { validateDomain, validateIP } from "./utils";
-import './App.css';
 import { IMessage } from "./interfaces";
+import './App.css';
 
 const socket = io(`http://${localStorage.getItem('server-addr') || 'localhost'}:3022`)
 
@@ -27,6 +27,7 @@ export function App() {
     const [invalidIP, setInvalidIP] = useState(false)
     const [updatedBin, setUpdatedBin] = useState(false)
     const [showSettings, setShowSettings] = useState(false)
+    const [darkMode, setDarkMode] = useState(localStorage.getItem('theme') === 'dark')
 
     useEffect(() => {
         socket.on('connect', () => {
@@ -34,9 +35,15 @@ export function App() {
         })
     }, [])
 
+    useEffect(() => {
+        darkMode ?
+            document.body.classList.add('dark') :
+            document.body.classList.remove('dark')
+    }, [darkMode])
+
     useEffect(() => {
         socket.on('progress', (data: IMessage) => {
-            setMessage(`${data.status || 'starting'} | progress: ${data.progress || '?'} | size: ${data.size || '?'} | speed: ${data.dlSpeed || '?'}`)
+            setMessage(`${data.status || '...'} | progress: ${data.progress || '?'} | size: ${data.size || '?'} | speed: ${data.dlSpeed || '?'}`)
             if (data.status === 'Done!') {
                 setHalt(false)
                 setMessage('Done!')
@@ -88,6 +95,16 @@ export function App() {
         socket.emit('update-bin')
     }
 
+    const toggleTheme = () => {
+        if (darkMode) {
+            localStorage.setItem('theme', 'light')
+            setDarkMode(false)
+        } else {
+            localStorage.setItem('theme', 'dark')
+            setDarkMode(true)
+        }
+    }
+
     return (
         <Container>
             <Row>
@@ -140,6 +157,11 @@ export function App() {
                             </InputGroup>
                             <Button onClick={() => updateBinary()} disabled={halt}>
                                 Update yt-dlp binary
+                            </Button>{' '}
+                            <Button
+                                variant={darkMode ? 'light' : 'dark'}
+                                onClick={() => toggleTheme()}>
+                                {darkMode ? 'Dark theme' : 'Light theme'}
                             </Button>
                         </div> :
                         null

frontend/src/styles/colors.css

@@ -0,0 +1,7 @@
+:root{
+    --body:#f8f9ff;
+    --text:#3b3e66;
+    --status:#f8f9ffa1;
+    --border:#ced4da;
+    --stack: #ffffff;
+}