feat: podpora dark mode

client/src/App.scss

@@ -1,3 +1,17 @@
+:root, [data-bs-theme="light"] {
+  --luncher-navbar-bg: #3c3c3c;
+  --luncher-action-icon: rgb(0, 89, 255);
+  --luncher-buyer-icon: #dbba00;
+  --luncher-text-muted: gray;
+}
+
+[data-bs-theme="dark"] {
+  --luncher-navbar-bg: #1a1d21;
+  --luncher-action-icon: #5c9aff;
+  --luncher-buyer-icon: #ffd700;
+  --luncher-text-muted: #9ca3af;
+}
+
 .App {
   text-align: center;
 }
@@ -87,7 +101,7 @@ body,
 }
 
 .navbar {
-  background-color: #3c3c3c;
+  background-color: var(--luncher-navbar-bg);
   padding-left: 20px;
   padding-right: 20px;
 }
@@ -102,14 +116,14 @@ body,
 
 .table> :not(caption) {
   .action-icon {
-    color: rgb(0, 89, 255);
+    color: var(--luncher-action-icon);
     cursor: pointer;
     margin-left: 10px;
     padding: 0;
   }
 
   .buyer-icon {
-    color: #dbba00;
+    color: var(--luncher-buyer-icon);
     margin-left: 10px;
     padding: 0;
   }
@@ -139,7 +153,7 @@ body,
 }
 
 .trusted-icon {
-  color: rgb(0, 89, 255);
+  color: var(--luncher-action-icon);
   margin-right: 10px;
 }
 

client/src/App.tsx

@@ -436,7 +436,7 @@ function App() {
               <span title='Předchozí den'>
                 <FontAwesomeIcon icon={faChevronLeft} style={{ cursor: "pointer", visibility: dayIndex > 0 ? "initial" : "hidden" }} onClick={() => handleDayChange(dayIndex - 1)} />
               </span>
-              <h1 className='title' style={{ color: dayIndex === data.todayDayIndex ? 'black' : 'gray' }}>{data.date}</h1>
+              <h1 className={`title ${dayIndex !== data.todayDayIndex ? 'text-muted' : ''}`}>{data.date}</h1>
               <span title="Následující den">
                 <FontAwesomeIcon icon={faChevronRight} style={{ cursor: "pointer", visibility: dayIndex < 4 ? "initial" : "hidden" }} onClick={() => handleDayChange(dayIndex + 1)} />
               </span>

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>

client/src/context/settings.tsx

@@ -3,14 +3,19 @@ import React, { ReactNode, useContext, useEffect, useState } from "react"
 const BANK_ACCOUNT_NUMBER_KEY = 'bank_account_number';
 const BANK_ACCOUNT_HOLDER_KEY = 'bank_account_holder_name';
 const HIDE_SOUPS_KEY = 'hide_soups';
+const THEME_KEY = 'theme_preference';
+
+export type ThemePreference = 'system' | 'light' | 'dark';
 
 export type SettingsContextProps = {
   bankAccount?: string,
   holderName?: string,
   hideSoups?: boolean,
+  themePreference: ThemePreference,
   setBankAccountNumber: (accountNumber?: string) => void,
   setBankAccountHolderName: (holderName?: string) => void,
   setHideSoupsOption: (hideSoups?: boolean) => void,
+  setThemePreference: (theme: ThemePreference) => void,
 }
 
 type ContextProps = {
@@ -32,6 +37,7 @@ function useProvideSettings(): SettingsContextProps {
   const [bankAccount, setBankAccount] = useState<string | undefined>();
   const [holderName, setHolderName] = useState<string | undefined>();
   const [hideSoups, setHideSoups] = useState<boolean | undefined>();
+  const [themePreference, setTheme] = useState<ThemePreference>('system');
 
   useEffect(() => {
     const accountNumber = localStorage.getItem(BANK_ACCOUNT_NUMBER_KEY);
@@ -46,6 +52,10 @@ function useProvideSettings(): SettingsContextProps {
     if (hideSoups !== null) {
       setHideSoups(hideSoups === 'true');
     }
+    const savedTheme = localStorage.getItem(THEME_KEY) as ThemePreference | null;
+    if (savedTheme && ['system', 'light', 'dark'].includes(savedTheme)) {
+      setTheme(savedTheme);
+    }
   }, [])
 
   useEffect(() => {
@@ -72,6 +82,29 @@ function useProvideSettings(): SettingsContextProps {
     }
   }, [hideSoups]);
 
+  useEffect(() => {
+    localStorage.setItem(THEME_KEY, themePreference);
+  }, [themePreference]);
+
+  useEffect(() => {
+    const applyTheme = (theme: 'light' | 'dark') => {
+      document.documentElement.setAttribute('data-bs-theme', theme);
+    };
+
+    if (themePreference === 'system') {
+      const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+      applyTheme(mediaQuery.matches ? 'dark' : 'light');
+
+      const handler = (e: MediaQueryListEvent) => {
+        applyTheme(e.matches ? 'dark' : 'light');
+      };
+      mediaQuery.addEventListener('change', handler);
+      return () => mediaQuery.removeEventListener('change', handler);
+    } else {
+      applyTheme(themePreference);
+    }
+  }, [themePreference]);
+
   function setBankAccountNumber(bankAccount?: string) {
     setBankAccount(bankAccount);
   }
@@ -84,12 +117,18 @@ function useProvideSettings(): SettingsContextProps {
     setHideSoups(hideSoups);
   }
 
+  function setThemePreference(theme: ThemePreference) {
+    setTheme(theme);
+  }
+
   return {
     bankAccount,
     holderName,
     hideSoups,
+    themePreference,
     setBankAccountNumber,
     setBankAccountHolderName,
     setHideSoupsOption,
+    setThemePreference,
   }
 }