feat: podpora dark mode

2026-01-30 07:47:03 +01:00
parent f91973f1a4
commit 6a1da97ef1
6 changed files with 89 additions and 11 deletions
--- a/client/index.html
+++ b/client/index.html
@@ -10,6 +10,17 @@
  <link rel="apple-touch-icon" href="/logo192.png" />
  <link rel="manifest" href="/manifest.json" />
  <title>Luncher</title>
+  <script>
+    (function() {
+      var saved = localStorage.getItem('theme_preference');
+      var theme = 'light';
+      if (saved === 'dark') theme = 'dark';
+      else if (saved === 'system' || !saved) {
+        theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+      }
+      document.documentElement.setAttribute('data-bs-theme', theme);
+    })();
+  </script>
 </head>

 <body>
--- a/client/src/App.scss
+++ b/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;
 }

--- a/client/src/App.tsx
+++ b/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>
--- a/client/src/components/Header.tsx
+++ b/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();
    }

--- a/client/src/components/modals/SettingsModal.tsx
+++ b/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>
--- a/client/src/context/settings.tsx
+++ b/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,
  }
 }