aboutsummaryrefslogtreecommitdiff
path: root/src/AppThemeProvider.jsx
diff options
context:
space:
mode:
authorAnton Tananaev <anton@traccar.org>2024-04-07 09:56:18 -0700
committerAnton Tananaev <anton@traccar.org>2024-04-07 09:56:18 -0700
commit79c6ac5e2cf5a7778da5b4ac1229897234531f25 (patch)
treeb30641cc70a87e5c75fb120b2090f3f83b5f7d36 /src/AppThemeProvider.jsx
parent393651524bd66ed72d82b93f556ed4cc747a73c3 (diff)
downloadtrackermap-web-79c6ac5e2cf5a7778da5b4ac1229897234531f25.tar.gz
trackermap-web-79c6ac5e2cf5a7778da5b4ac1229897234531f25.tar.bz2
trackermap-web-79c6ac5e2cf5a7778da5b4ac1229897234531f25.zip
Theme and styles RTL support
Diffstat (limited to 'src/AppThemeProvider.jsx')
-rw-r--r--src/AppThemeProvider.jsx27
1 files changed, 23 insertions, 4 deletions
diff --git a/src/AppThemeProvider.jsx b/src/AppThemeProvider.jsx
index 109d25c4..8f64b931 100644
--- a/src/AppThemeProvider.jsx
+++ b/src/AppThemeProvider.jsx
@@ -1,21 +1,40 @@
import React from 'react';
import { useSelector } from 'react-redux';
import { ThemeProvider, useMediaQuery } from '@mui/material';
+import { CacheProvider } from '@emotion/react';
+import createCache from '@emotion/cache';
+import { prefixer } from 'stylis';
+import rtlPlugin from 'stylis-plugin-rtl';
import theme from './common/theme';
+import { useLocalization } from './common/components/LocalizationProvider';
+
+const cache = {
+ ltr: createCache({
+ key: 'muiltr',
+ stylisPlugins: [prefixer],
+ }),
+ rtl: createCache({
+ key: 'muirtl',
+ stylisPlugins: [prefixer, rtlPlugin],
+ }),
+};
const AppThemeProvider = ({ children }) => {
const server = useSelector((state) => state.session.server);
+ const { direction } = useLocalization();
const serverDarkMode = server?.attributes?.darkMode;
const preferDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
const darkMode = serverDarkMode !== undefined ? serverDarkMode : preferDarkMode;
- const themeInstance = theme(server, darkMode);
+ const themeInstance = theme(server, darkMode, direction);
return (
- <ThemeProvider theme={themeInstance}>
- {children}
- </ThemeProvider>
+ <CacheProvider value={cache[direction]}>
+ <ThemeProvider theme={themeInstance}>
+ {children}
+ </ThemeProvider>
+ </CacheProvider>
);
};