init project

src/core/utils/createEmotionCache.jsx

@@ -0,0 +1,38 @@
+import createCache from "@emotion/cache";
+import { prefixer } from "stylis";
+import stylisRTLPlugin from "stylis-plugin-rtl";
+
+const isBrowser = typeof document !== "undefined";
+
+export const createEmotionCacheLtr = () => {
+  let insertionPoint;
+
+  if (isBrowser) {
+    const emotionInsertionPoint = document.querySelector(
+      'meta[name="emotion-insertion-point"]'
+    );
+    insertionPoint = emotionInsertionPoint ?? undefined;
+  }
+
+  return createCache({
+    key: "mui-style",
+    insertionPoint,
+  });
+};
+
+export const createEmotionCacheRtl = () => {
+  let insertionPoint;
+
+  if (isBrowser) {
+    const emotionInsertionPoint = document.querySelector(
+      'meta[name="emotion-insertion-point"]'
+    );
+    insertionPoint = emotionInsertionPoint ?? undefined;
+  }
+
+  return createCache({
+    key: "muirtl",
+    stylisPlugins: [prefixer, stylisRTLPlugin],
+    insertionPoint,
+  });
+};

src/core/utils/theme-rtl.jsx

@@ -0,0 +1,12 @@
+import { createTheme } from "@mui/material/styles";
+import theme from "./theme";
+
+const themeRtl = createTheme({
+  direction: "rtl",
+  typography: {
+    fontFamily: `IRANSans, sans-serif`,
+  },
+  ...theme,
+});
+
+export default themeRtl;

src/core/utils/theme.jsx

@@ -0,0 +1,18 @@
+const theme = {
+  palette: {
+    primary: {
+      main: "#084070",
+      contrastText: "#fff",
+      light: "#2c6291",
+      dark: "#11293e",
+    },
+    secondary: {
+      main: "#FF4E00",
+      contrastText: "#fff",
+      light: "#ed743e",
+      dark: "#ad3a07",
+    },
+  },
+};
+
+export default theme;