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

src/App.tsx

@@ -1,4 +1,4 @@
-import { CssBaseline } from '@mui/material';
+import { Box, CssBaseline, TextField, useColorScheme } from '@mui/material';
 import './App.css';
 import { useTranslation } from 'react-i18next';
 import { LanguageManager } from './components/LanguageManager';
@@ -13,9 +13,28 @@ function App() {
       <div style={{ padding: '16px' }}>
         <h1>{t('helloWorld')}</h1>
         <p>The main content and router will go here.</p>
+        <Box sx={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
+          <ThemeToggleButton />
+          <TextField label={t('helloWorld')} />
+        </Box>
       </div>
     </>
   );
 }
 
 export default App;
+
+import { Button } from '@mui/material';
+
+export const ThemeToggleButton = () => {
+  const { mode, setMode } = useColorScheme();
+
+  return (
+    <Button
+      variant="contained"
+      onClick={() => setMode(mode === 'light' ? 'dark' : 'light')}
+    >
+      Switch to {mode === 'light' ? 'Dark' : 'Light'} Mode
+    </Button>
+  );
+};