chore(theme): define palette and typographies and override mui styles with this values, also add rtlProvider

src/providers/AppProvider.tsx

@@ -1,9 +1,17 @@
 import React from 'react';
 import { I18nextProvider } from 'react-i18next';
 import i18n from '@/config/i18n';
+import { CustomThemeProvider } from './CustomThemeProvider';
+import { RtlProvider } from './RtlProvider';
 
 export const AppProviders: React.FC<{ children: React.ReactNode }> = ({
   children,
 }) => {
-  return <I18nextProvider i18n={i18n}>{children}</I18nextProvider>;
+  return (
+    <I18nextProvider i18n={i18n}>
+      <RtlProvider>
+        <CustomThemeProvider>{children}</CustomThemeProvider>
+      </RtlProvider>
+    </I18nextProvider>
+  );
 };

src/providers/CustomThemeProvider.tsx

@@ -0,0 +1,38 @@
+import React, { useMemo } from 'react';
+import { createTheme, ThemeProvider } from '@mui/material';
+import { darkPalette, lightPalette } from '@/theme/palette';
+import { useTranslation } from 'react-i18next';
+import { typography } from '@/theme/typography';
+
+export const CustomThemeProvider: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}) => {
+  const { i18n } = useTranslation();
+
+  const theme = useMemo(() => {
+    const direction = i18n.dir(i18n.language);
+
+    return createTheme({
+      direction: direction,
+      colorSchemes: {
+        light: {
+          palette: lightPalette,
+        },
+        dark: {
+          palette: darkPalette,
+        },
+      },
+      cssVariables: {
+        colorSchemeSelector: 'class',
+      },
+      spacing: 8,
+      typography: typography,
+    });
+  }, [i18n]);
+
+  return (
+    <ThemeProvider theme={theme} defaultMode="system">
+      {children}
+    </ThemeProvider>
+  );
+};

src/providers/RtlProvider.tsx

@@ -0,0 +1,25 @@
+import React, { useState, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { CacheProvider } from '@emotion/react';
+import createCache from '@emotion/cache';
+import rtlPlugin from 'stylis-plugin-rtl';
+
+// This provider configures Emotion's cache to support RTL.
+export const RtlProvider: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}) => {
+  const { i18n } = useTranslation();
+  const [cache, setCache] = useState(createCache({ key: 'css' }));
+
+  useEffect(() => {
+    const newDir = i18n.dir(i18n.language);
+
+    const newCache = createCache({
+      key: 'css',
+      stylisPlugins: newDir === 'rtl' ? [rtlPlugin] : [],
+    });
+    setCache(newCache);
+  }, [i18n, i18n.language]);
+
+  return <CacheProvider value={cache}>{children}</CacheProvider>;
+};