Spaces:
Running
Running
import { Roboto } from "next/font/google"; | |
import { experimental_extendTheme as extendTheme } from "@mui/material/styles"; | |
export const roboto = Roboto({ | |
weight: ["300", "400", "500", "700"], | |
subsets: ["latin"], | |
display: "swap", | |
fallback: ["Helvetica", "Arial", "sans-serif"], | |
}); | |
/** | |
* https://mui.com/material-ui/experimental-api/css-theme-variables/customization/ | |
* | |
* TL;DR | |
* - specify both dark and light colors at once | |
* - extendTheme returns a theme for CssVarsProvider, not ThemeProvider | |
* - CssVarsProvider has a defaultMode property, set to "system" in _app.tsx | |
*/ | |
const theme = extendTheme({ | |
colorSchemes: { | |
light: { | |
palette: { | |
primary: { | |
main: "#40088d", | |
}, | |
secondary: { | |
main: "#038225", | |
}, | |
}, | |
}, | |
dark: { | |
palette: { | |
primary: { | |
main: "#2c90fc", | |
}, | |
secondary: { | |
main: "#b827fc", | |
}, | |
}, | |
}, | |
}, | |
typography: { | |
...roboto.style, | |
}, | |
components: { | |
MuiLink: { | |
styleOverrides: { | |
root: { | |
textDecoration: "none", | |
}, | |
}, | |
}, | |
}, | |
}); | |
export default theme; | |