feat: podpora dark mode

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,
   }
 }