I am creating a nextjs 13 app router project using material UI. i have designed the theme using createTheme but the primary color sort of dulls down on its own when uploading on AWS AMPLIFY. the changes look fine locally but not on cloud.
Dependencies i am using in the current project:
{
"@emotion/react": "^11.11.1",
"@emotion/styled": "^11.11.0",
"@fontsource/roboto": "^5.0.8",
"@mui/icons-material": "^5.14.3",
"@mui/material": "^5.14.3",
"@types/node": "20.4.8",
"@types/react": "18.2.18",
"@types/react-dom": "18.2.7",
"ag-grid-community": "^30.1.0",
"ag-grid-react": "^30.1.0",
"eslint": "8.46.0",
"eslint-config-next": "13.4.12",
"faker": "^5.5.3",
"millify": "^6.1.0",
"next": "13.4.12",
"next-auth": "^4.22.3",
"react": "18.2.0",
"react-chartjs-2": "^5.2.0",
"react-dom": "18.2.0",
"react-fast-marquee": "^1.6.0",
"react-spring": "^9.7.2",
"sass": "^1.67.0",
"typescript": "5.1.6"
}
Theme.ts, describing the two themes being used.
import { createTheme } from "@mui/material/styles";
declare module "@mui/material/styles" {
interface CustomTheme {
danger?: {
super?: string;
};
}
interface Theme extends CustomTheme {}
interface ThemeOptions extends CustomTheme {}
}
const theme = createTheme({
palette: {
primary: {
main: "#ffeda0",
light: "#ffe98a",
dark: "#ffdf57",
},
secondary: {
main: "#280b45",
light: "#411271",
dark: "#0e0419",
},
background: {
paper: "#fff",
default: "#fff",
},
},
danger: {
super: "#f00",
},
});
const darkTheme = createTheme({
palette: {
mode: "dark",
primary: {
main: "#280b45",
light: "#411271",
dark: "#0e0419",
},
text: {
primary: "#fff",
secondary: "#808080",
},
secondary: {
main: "#ffe98a",
light: "rgb(255,237,160)",
dark: "#ffdf57",
},
background: {
paper: "#121212",
default: "#121212",
},
},
});
export default theme;
export { darkTheme };