feat: podpora themes

client/src/context/settings.tsx

@@ -4,18 +4,22 @@ 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';
+const COLOR_THEME_KEY = 'color_theme';
 
 export type ThemePreference = 'system' | 'light' | 'dark';
+export type ColorTheme = 'green' | 'blue' | 'purple';
 
 export type SettingsContextProps = {
   bankAccount?: string,
   holderName?: string,
   hideSoups?: boolean,
   themePreference: ThemePreference,
+  colorTheme: ColorTheme,
   setBankAccountNumber: (accountNumber?: string) => void,
   setBankAccountHolderName: (holderName?: string) => void,
   setHideSoupsOption: (hideSoups?: boolean) => void,
   setThemePreference: (theme: ThemePreference) => void,
+  setColorTheme: (color: ColorTheme) => void,
 }
 
 type ContextProps = {
@@ -45,11 +49,24 @@ function getInitialTheme(): ThemePreference {
   return 'system';
 }
 
+function getInitialColorTheme(): ColorTheme {
+  try {
+    const saved = localStorage.getItem(COLOR_THEME_KEY) as ColorTheme | null;
+    if (saved && ['green', 'blue', 'purple'].includes(saved)) {
+      return saved;
+    }
+  } catch (e) {
+    // localStorage nedostupný
+  }
+  return 'green';
+}
+
 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>(getInitialTheme);
+  const [colorTheme, setColor] = useState<ColorTheme>(getInitialColorTheme);
 
   useEffect(() => {
     const accountNumber = localStorage.getItem(BANK_ACCOUNT_NUMBER_KEY);
@@ -94,6 +111,11 @@ function useProvideSettings(): SettingsContextProps {
     localStorage.setItem(THEME_KEY, themePreference);
   }, [themePreference]);
 
+  useEffect(() => {
+    localStorage.setItem(COLOR_THEME_KEY, colorTheme);
+    document.documentElement.setAttribute('data-luncher-color', colorTheme);
+  }, [colorTheme]);
+
   useEffect(() => {
     const applyTheme = (theme: 'light' | 'dark') => {
       document.documentElement.setAttribute('data-bs-theme', theme);
@@ -129,14 +151,20 @@ function useProvideSettings(): SettingsContextProps {
     setTheme(theme);
   }
 
+  function setColorTheme(color: ColorTheme) {
+    setColor(color);
+  }
+
   return {
     bankAccount,
     holderName,
     hideSoups,
     themePreference,
+    colorTheme,
     setBankAccountNumber,
     setBankAccountHolderName,
     setHideSoupsOption,
     setThemePreference,
+    setColorTheme,
   }
 }