Switch to "colorSchemes" from "palette" API in mui theme

"colorSchemes" is the preferred api starting from mui v6

src/modules/core/contexts/AppContext.tsx

@@ -6,7 +6,7 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { Direction, StyledEngineProvider, ThemeProvider } from '@mui/material/styles';
+import { Direction, StyledEngineProvider, ThemeProvider, useColorScheme } from '@mui/material/styles';
 import React, { useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { BrowserRouter as Router } from 'react-router-dom';
 import { QueryParamProvider } from 'use-query-params';
@@ -58,6 +58,9 @@ export const AppContext: React.FC<Props> = ({ children }) => {
     const [themeMode, setThemeMode] = useLocalStorage<ThemeMode>('themeMode', ThemeMode.SYSTEM);
     const [pureBlackMode, setPureBlackMode] = useLocalStorage<boolean>('pureBlackMode', false);
 
+    const { mode } = useColorScheme();
+    const actualThemeMode = mode ?? themeMode ?? 'dark';
+
     const darkThemeContext = useMemo(
         () => ({
             appTheme,
@@ -71,8 +74,14 @@ export const AppContext: React.FC<Props> = ({ children }) => {
     );
 
     const theme = useMemo(
-        () => createAndSetTheme(themeMode, getTheme(appTheme, customThemes), pureBlackMode, currentDirection),
-        [themeMode, currentDirection, systemThemeMode, pureBlackMode, appTheme, customThemes],
+        () =>
+            createAndSetTheme(
+                actualThemeMode as ThemeMode,
+                getTheme(appTheme, customThemes),
+                pureBlackMode,
+                currentDirection,
+            ),
+        [actualThemeMode, currentDirection, systemThemeMode, pureBlackMode, appTheme, customThemes],
     );
 
     return (

src/modules/core/utils/MediaQuery.tsx

@@ -85,7 +85,7 @@ export class MediaQuery {
     }
 
     static getThemeMode(): Exclude<ThemeMode, 'system'> {
-        const themeMode = AppStorage.local.getItemParsed<ThemeMode>('themeMode', ThemeMode.SYSTEM);
+        const themeMode = AppStorage.local.getItem('mui-mode') as ThemeMode;
 
         const isSystemMode = themeMode === ThemeMode.SYSTEM;
         if (isSystemMode) {