feat: podpora dark mode

client/src/components/Header.tsx

@@ -2,7 +2,7 @@ import { useEffect, useState } from "react";
 import { Navbar, Nav, NavDropdown } from "react-bootstrap";
 import { useAuth } from "../context/auth";
 import SettingsModal from "./modals/SettingsModal";
-import { useSettings } from "../context/settings";
+import { useSettings, ThemePreference } from "../context/settings";
 import FeaturesVotingModal from "./modals/FeaturesVotingModal";
 import PizzaCalculatorModal from "./modals/PizzaCalculatorModal";
 import RefreshMenuModal from "./modals/RefreshMenuModal";
@@ -54,7 +54,7 @@ export default function Header() {
         return n !== Infinity && String(n) === str && n >= 0;
     }
 
-    const saveSettings = (bankAccountNumber?: string, bankAccountHolderName?: string, hideSoupsOption?: boolean) => {
+    const saveSettings = (bankAccountNumber?: string, bankAccountHolderName?: string, hideSoupsOption?: boolean, themePreference?: ThemePreference) => {
         if (bankAccountNumber) {
             try {
                 // Validace kódu banky
@@ -99,6 +99,9 @@ export default function Header() {
         settings?.setBankAccountNumber(bankAccountNumber);
         settings?.setBankAccountHolderName(bankAccountHolderName);
         settings?.setHideSoupsOption(hideSoupsOption);
+        if (themePreference) {
+            settings?.setThemePreference(themePreference);
+        }
         closeSettingsModal();
     }
 

client/src/components/modals/SettingsModal.tsx

@@ -1,11 +1,11 @@
 import { useRef } from "react";
-import { Modal, Button } from "react-bootstrap"
-import { useSettings } from "../../context/settings";
+import { Modal, Button, Form } from "react-bootstrap"
+import { useSettings, ThemePreference } from "../../context/settings";
 
 type Props = {
     isOpen: boolean,
     onClose: () => void,
-    onSave: (bankAccountNumber?: string, bankAccountHolderName?: string, hideSoupsOption?: boolean) => void,
+    onSave: (bankAccountNumber?: string, bankAccountHolderName?: string, hideSoupsOption?: boolean, themePreference?: ThemePreference) => void,
 }
 
 /** Modální dialog pro uživatelská nastavení. */
@@ -14,12 +14,23 @@ export default function SettingsModal({ isOpen, onClose, onSave }: Readonly<Prop
     const bankAccountRef = useRef<HTMLInputElement>(null);
     const nameRef = useRef<HTMLInputElement>(null);
     const hideSoupsRef = useRef<HTMLInputElement>(null);
+    const themeRef = useRef<HTMLSelectElement>(null);
 
     return <Modal show={isOpen} onHide={onClose} size="lg">
         <Modal.Header closeButton>
             <Modal.Title><h2>Nastavení</h2></Modal.Title>
         </Modal.Header>
         <Modal.Body>
+            <h4>Vzhled</h4>
+            <Form.Group className="mb-3">
+                <Form.Label>Barevný motiv</Form.Label>
+                <Form.Select ref={themeRef} defaultValue={settings?.themePreference}>
+                    <option value="system">Podle systému</option>
+                    <option value="light">Světlý</option>
+                    <option value="dark">Tmavý</option>
+                </Form.Select>
+            </Form.Group>
+            <hr />
             <h4>Obecné</h4>
             <span title="V nabídkách nebudou zobrazovány polévky. Tato funkce je experimentální, a zejména u TechTower bývá často problém polévky spolehlivě rozeznat. V případě využití této funkce průběžně nahlašujte stále se zobrazující polévky." style={{ "cursor": "help" }}>
                 <input ref={hideSoupsRef} type="checkbox" defaultChecked={settings?.hideSoups} /> Skrýt polévky
@@ -34,7 +45,7 @@ export default function SettingsModal({ isOpen, onClose, onSave }: Readonly<Prop
             <Button variant="secondary" onClick={onClose}>
                 Storno
             </Button>
-            <Button variant="primary" onClick={() => onSave(bankAccountRef.current?.value, nameRef.current?.value, hideSoupsRef.current?.checked)}>
+            <Button variant="primary" onClick={() => onSave(bankAccountRef.current?.value, nameRef.current?.value, hideSoupsRef.current?.checked, themeRef.current?.value as ThemePreference)}>
                 Uložit
             </Button>
         </Modal.Footer>