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: "#2c90fc", | |
| }, | |
| secondary: { | |
| main: "#b827fc", | |
| }, | |
| }, | |
| }, | |
| dark: { | |
| palette: { | |
| primary: { | |
| main: "#2c90fc", | |
| }, | |
| secondary: { | |
| main: "#b827fc", | |
| }, | |
| }, | |
| }, | |
| }, | |
| typography: { | |
| ...roboto.style, | |
| h1: { | |
| fontSize: "5.25em", | |
| }, | |
| }, | |
| components: { | |
| MuiLink: { | |
| styleOverrides: { | |
| root: { | |
| textDecoration: "none", | |
| ":hover": { | |
| textDecoration: "underline", | |
| }, | |
| }, | |
| }, | |
| }, | |
| }, | |
| }); | |
| export default theme; | |