diff options
Diffstat (limited to 'src/AppThemeProvider.jsx')
-rw-r--r-- | src/AppThemeProvider.jsx | 27 |
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> ); }; |