Добавление настроек и их функциональности

FRONT/DEV/src/store/themeContext.tsx

@@ -3,10 +3,10 @@ import { ThemeProvider as StyledTheme } from 'styled-components';
 import { light, dark} from '../const/theme/theme';
 import { GlobalStyle } from '../const/theme/globalStyles';
 import { themeNames, ThemName } from '../const/theme/names';
+import {useThemeSettings} from "../hooks/useSettings";
 
 type ThemeContextType = {
     theme: ThemName;
-    toggleTheme: () => void;
 };
 
 const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
@@ -23,32 +23,13 @@ export const ThemeProvider: React.FC<{ children: React.ReactNode }> = ({ childre
     const getSystemTheme = () =>
         window.matchMedia('(prefers-color-scheme: dark)').matches ? themeNames[2] : themeNames[1];
 
-    const getInitialTheme = () => {
-        let savedTheme = localStorage.getItem('theme') as ThemName;
-        if (!savedTheme) {
-            savedTheme = themeNames[3]; // Устанавливаем значение по умолчанию
-            localStorage.setItem('theme', savedTheme); // Сохраняем без JSON.stringify
-        }
-        return savedTheme;
-    };
+    const getInitialTheme = useThemeSettings();
 
     const [theme, setTheme] = useState<ThemName>(getInitialTheme);
 
-    const toggleTheme = () => {
-        setTheme((prev) => {
-            let newTheme: ThemName;
-            if (prev === themeNames[3]) {
-                newTheme = themeNames[1];
-            } else if (prev === themeNames[1]) {
-                newTheme = themeNames[2];
-            } else {
-                newTheme = themeNames[3];
-            }
-            localStorage.setItem('theme', newTheme);
-
-            return newTheme;
-        });
-    };
+    useEffect(() => {
+        setTheme(getInitialTheme)
+    }, [getInitialTheme]);
 
     useEffect(() => {
         const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
@@ -68,8 +49,8 @@ export const ThemeProvider: React.FC<{ children: React.ReactNode }> = ({ childre
     const currentTheme = theme === themeNames[3] ? getSystemTheme() : theme;
 
     return (
-        <ThemeContext.Provider value={{ theme, toggleTheme }}>
-            <StyledTheme theme={{ ...currentTheme === themeNames[1] ? light : dark, toggleTheme }}>
+        <ThemeContext.Provider value={{ theme }}>
+            <StyledTheme theme={{ ...currentTheme === themeNames[1] ? light : dark }}>
                 <GlobalStyle />
                 {children}
             </StyledTheme>