diff --git a/frontend/app/user/components/LanguageSelect/hooks/useLanguageHook.ts b/frontend/app/user/components/LanguageSelect/hooks/useLanguageHook.ts index 2f8fa8d38..05509c472 100644 --- a/frontend/app/user/components/LanguageSelect/hooks/useLanguageHook.ts +++ b/frontend/app/user/components/LanguageSelect/hooks/useLanguageHook.ts @@ -55,11 +55,21 @@ export const useLanguageHook = (): { useEffect(() => { setAllLanguages(languages); const savedLanguage = localStorage.getItem("selectedLanguage") ?? "English"; - - setCurrentLanguage( - languages.find((language) => language.label === savedLanguage) + let choosedLanguage = languages.find( + (lang) => lang.label === savedLanguage ); - void i18n.changeLanguage(savedLanguage); + if (!choosedLanguage) { + choosedLanguage = languages.find((lang) => lang.label === "English"); + } + if (currentLanguage) { + setCurrentLanguage(choosedLanguage); + localStorage.setItem("selectedLanguage", currentLanguage.label); + void i18n.changeLanguage(currentLanguage.shortName); + } else { + console.error( + "No valid language found, please check the languages configuration." + ); + } }, [i18n]); const change = (newLanguage: Language) => { diff --git a/frontend/lib/context/UserSettingsProvider/User-settings.provider.tsx b/frontend/lib/context/UserSettingsProvider/User-settings.provider.tsx index eaaa43b4f..1cb5756a9 100644 --- a/frontend/lib/context/UserSettingsProvider/User-settings.provider.tsx +++ b/frontend/lib/context/UserSettingsProvider/User-settings.provider.tsx @@ -23,10 +23,14 @@ export const UserSettingsProvider = ({ const [remainingCredits, setRemainingCredits] = useState(null); const [isDarkMode, setIsDarkMode] = useState(() => { if (typeof window !== "undefined") { - return true; + const localIsDarkMode = localStorage.getItem("isDarkMode"); + + return localIsDarkMode !== null + ? parseBoolean(localIsDarkMode) + : window.matchMedia("(prefers-color-scheme: dark)").matches; } - return true; + return false; }); useEffect(() => { @@ -37,40 +41,26 @@ export const UserSettingsProvider = ({ }, []); useEffect(() => { - if (typeof window !== "undefined") { - const prefersDarkMode = window.matchMedia( - "(prefers-color-scheme: dark)" - ).matches; - const localIsDarkMode = localStorage.getItem("isDarkMode"); - const newState = - localIsDarkMode !== null - ? parseBoolean(localIsDarkMode) - : prefersDarkMode; - setIsDarkMode(newState); - newState - ? document.body.classList.add("dark_mode") - : document.body.classList.remove("dark_mode"); + const mediaQueryList = window.matchMedia("(prefers-color-scheme: dark)"); + const listener = (event: MediaQueryListEvent) => { + const updatedState = event.matches; + setIsDarkMode(updatedState); + localStorage.setItem("isDarkMode", JSON.stringify(updatedState)); + }; + mediaQueryList.addEventListener("change", listener); - const mediaQueryList = window.matchMedia("(prefers-color-scheme: dark)"); - const listener = (event: MediaQueryListEvent) => { - const updatedState = event.matches; - setIsDarkMode(updatedState); - localStorage.setItem("isDarkMode", JSON.stringify(updatedState)); - }; - mediaQueryList.addEventListener("change", listener); - - return () => { - mediaQueryList.removeEventListener("change", listener); - }; - } + return () => { + mediaQueryList.removeEventListener("change", listener); + }; }, []); useEffect(() => { - isDarkMode - ? document.body.classList.add("dark_mode") - : document.body.classList.remove("dark_mode"); - - localStorage.setItem("isDarkMode", JSON.stringify(isDarkMode)); + if (typeof window !== "undefined") { + isDarkMode + ? document.body.classList.add("dark_mode") + : document.body.classList.remove("dark_mode"); + localStorage.setItem("isDarkMode", JSON.stringify(isDarkMode)); + } }, [isDarkMode]); return (