fix(frontend): Implement persistent dark mode setting and & Implement persistent dark mode setting (#2423)

# Description

Please include a summary of the changes and the related issue. Please
also include relevant motivation and context.

## Checklist before requesting a review

Please delete options that are not relevant.

- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my code
- [x] I have commented hard-to-understand areas
- [x] I have ideally added tests that prove my fix is effective or that
my feature works
- [x] New and existing unit tests pass locally with my changes
- [x] Any dependent changes have been merged

## Screenshots (if appropriate):


<!--
ELLIPSIS_HIDDEN
-->


----

| <a href="https://ellipsis.dev" target="_blank"><img
src="https://avatars.githubusercontent.com/u/80834858?s=400&u=31e596315b0d8f7465b3ee670f25cea677299c96&v=4"
alt="Ellipsis" width="30px" height="30px"/></a> | 🚀 This PR
description was created by [Ellipsis](https://www.ellipsis.dev) for
commit bb45566f8a. |
|--------|--------|

### Summary:
This PR updates the `useLanguageHook` and `UserSettingsProvider`
functions to use the `shortName` of the selected language when changing
the language and to retrieve and store the dark mode setting from and to
local storage, respectively.

**Key points**:
- Updated `useLanguageHook` in
`/frontend/app/user/components/LanguageSelect/hooks/useLanguageHook.ts`
to use `shortName` of selected language when changing language.
- Updated `UserSettingsProvider` in
`/frontend/lib/context/UserSettingsProvider/User-settings.provider.tsx`
to retrieve dark mode setting from local storage.
- Updated listener for `change` event on `mediaQueryList` in
`UserSettingsProvider` to store updated dark mode setting in local
storage.


----
Generated with ❤️ by [ellipsis.dev](https://www.ellipsis.dev)



<!--
ELLIPSIS_HIDDEN
-->

---------

Co-authored-by: Zewed <dewez.antoine2@gmail.com>

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) => {

frontend/lib/context/UserSettingsProvider/User-settings.provider.tsx

@@ -23,10 +23,14 @@ export const UserSettingsProvider = ({
   const [remainingCredits, setRemainingCredits] = useState<number | null>(null);
   const [isDarkMode, setIsDarkMode] = useState<boolean>(() => {
     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 (