diff options
Diffstat (limited to 'src')
-rw-r--r-- | src/AppThemeProvider.jsx | 27 | ||||
-rw-r--r-- | src/common/components/LocalizationProvider.jsx | 7 | ||||
-rw-r--r-- | src/common/theme/index.js | 5 |
3 files changed, 30 insertions, 9 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> ); }; diff --git a/src/common/components/LocalizationProvider.jsx b/src/common/components/LocalizationProvider.jsx index f69feabf..3af97cf0 100644 --- a/src/common/components/LocalizationProvider.jsx +++ b/src/common/components/LocalizationProvider.jsx @@ -152,8 +152,9 @@ const LocalizationContext = createContext({ export const LocalizationProvider = ({ children }) => { const [language, setLanguage] = usePersistedState('language', getDefaultLanguage()); + const direction = /^(ar|he|fa)$/.test(language) ? 'rtl' : 'ltr'; - const value = useMemo(() => ({ languages, language, setLanguage }), [languages, language, setLanguage]); + const value = useMemo(() => ({ languages, language, setLanguage, direction }), [languages, language, setLanguage, direction]); useEffect(() => { let selected; @@ -163,8 +164,8 @@ export const LocalizationProvider = ({ children }) => { selected = language; } dayjs.locale(selected); - document.dir = /^(ar|he|fa)$/.test(language) ? 'rtl' : 'ltr'; - }, [language]); + document.dir = direction; + }, [language, direction]); return ( <LocalizationContext.Provider value={value}> diff --git a/src/common/theme/index.js b/src/common/theme/index.js index e8ce698b..00958497 100644 --- a/src/common/theme/index.js +++ b/src/common/theme/index.js @@ -4,8 +4,9 @@ import palette from './palette'; import dimensions from './dimensions'; import components from './components'; -export default (server, darkMode) => useMemo(() => createTheme({ +export default (server, darkMode, direction) => useMemo(() => createTheme({ palette: palette(server, darkMode), + direction, dimensions, components, -}), [server, darkMode]); +}), [server, darkMode, direction]); |