feat: podpora themes

client/src/components/Header.tsx

@@ -2,7 +2,7 @@ import { useEffect, useState } from "react";
 import { Navbar, Nav, NavDropdown, Modal, Button } from "react-bootstrap";
 import { useAuth } from "../context/auth";
 import SettingsModal from "./modals/SettingsModal";
-import { useSettings, ThemePreference } from "../context/settings";
+import { useSettings, ThemePreference, ColorTheme } from "../context/settings";
 import FeaturesVotingModal from "./modals/FeaturesVotingModal";
 import PizzaCalculatorModal from "./modals/PizzaCalculatorModal";
 import RefreshMenuModal from "./modals/RefreshMenuModal";
@@ -13,7 +13,7 @@ import { useNavigate } from "react-router";
 import { STATS_URL, OBJEDNANI_URL } from "../AppRoutes";
 import { FeatureRequest, getVotes, updateVote, LunchChoices, getChangelogs } from "../../../types";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faSun, faMoon } from "@fortawesome/free-solid-svg-icons";
+import { faSun, faMoon, faPalette } from "@fortawesome/free-solid-svg-icons";
 import { formatDateString } from "../Utils";
 
 const LAST_SEEN_CHANGELOG_KEY = "lastChangelogDate";
@@ -196,10 +196,20 @@ export default function Header({ choices, dayIndex }: Props) {
                     className="theme-toggle"
                     onClick={toggleTheme}
                     title={effectiveTheme === 'dark' ? 'Přepnout na světlý režim' : 'Přepnout na tmavý režim'}
-                    aria-label="Přepnout barevný motiv"
+                    aria-label="Přepnout světlý/tmavý režim"
                 >
                     <FontAwesomeIcon icon={effectiveTheme === 'dark' ? faSun : faMoon} />
                 </button>
+                <NavDropdown
+                    align="end"
+                    title={<FontAwesomeIcon icon={faPalette} />}
+                    id="color-theme-dropdown"
+                    className="theme-toggle"
+                >
+                    <NavDropdown.Item active={settings?.colorTheme === 'green'} onClick={() => settings?.setColorTheme('green' as ColorTheme)}>🟢 Zelený</NavDropdown.Item>
+                    <NavDropdown.Item active={settings?.colorTheme === 'blue'} onClick={() => settings?.setColorTheme('blue' as ColorTheme)}>🔵 Modrý</NavDropdown.Item>
+                    <NavDropdown.Item active={settings?.colorTheme === 'purple'} onClick={() => settings?.setColorTheme('purple' as ColorTheme)}>🟣 Fialový</NavDropdown.Item>
+                </NavDropdown>
                 <NavDropdown align="end" title={auth?.login} id="basic-nav-dropdown">
                     <NavDropdown.Item onClick={() => setSettingsModalOpen(true)}>Nastavení</NavDropdown.Item>
                     <NavDropdown.Item onClick={() => setRefreshMenuModalOpen(true)}>Přenačtení menu</NavDropdown.Item>