I have a theme like this, created using experimental_extendTheme of MUI:
<code>"use client";
import { experimental_extendTheme as extendTheme } from "@mui/material/styles";
import { dark, light } from "./palettes";
import { typography } from "./typography";
export const createTheme = (direction: "rtl" | "ltr") => {
return extendTheme({
colorSchemes: {
light: { palette: light },
dark: { palette: dark },
},
typography: typography,
direction,
shadows: ? // how to create shadows for dark and light theme?
});
};
</code>
<code>"use client";
import { experimental_extendTheme as extendTheme } from "@mui/material/styles";
import { dark, light } from "./palettes";
import { typography } from "./typography";
export const createTheme = (direction: "rtl" | "ltr") => {
return extendTheme({
colorSchemes: {
light: { palette: light },
dark: { palette: dark },
},
typography: typography,
direction,
shadows: ? // how to create shadows for dark and light theme?
});
};
</code>
"use client";
import { experimental_extendTheme as extendTheme } from "@mui/material/styles";
import { dark, light } from "./palettes";
import { typography } from "./typography";
export const createTheme = (direction: "rtl" | "ltr") => {
return extendTheme({
colorSchemes: {
light: { palette: light },
dark: { palette: dark },
},
typography: typography,
direction,
shadows: ? // how to create shadows for dark and light theme?
});
};
Now I want to create shadows for this two dark and light themes, but there is no option to differentiate between different themes in this situation, Also I cannot access the selected mode when I am creating the theme to use it to create different shadows based on that! what should I do?