我目前有两个单独的主题,如果用户要用浅色显示浅色主题,如果用户要用深色显示暗色,则选择true或false。我希望将主题放在一个文件中,然后在浅色或深色之间选择。我想知道在Material UI中创建深色主题的最佳做法是:
import { createMuiTheme } from "@material-ui/core/styles"
const Raleway = {
fontFamily: "Raleway, sans-serif",
}
const BLACK = "#000000"
const DARK_GREY = "#373733"
const theme = createMuiTheme({
palette: {
type:"light",
background: {
default: "rgb(245, 245, 245)",
},
text: {
primary: BLACK,
secondary: DARK_GREY,
},
primary: {
// light: will be calculated from palette.primary.main,
main: "#60C1E5",
// dark: will be calculated from palette.primary.main,
// contrastText: will be calculated to contrast with palette.primary.main
},
secondary: {
main: "#E10098",
// dark: will be calculated from palette.secondary.main,
},
type: "dark",
background: {
paper: "#15202B",
default: "#11171F",
},
text: {
primary: "rgb(245, 245, 245)",
},
primary: {
// light: will be calculated from palette.primary.main,
main: "#60C1E5",
// dark: will be calculated from palette.primary.main,
// contrastText: will be calculated to contrast with palette.primary.main
},
secondary: {
main: "#E10098",
// dark: will be calculated from palette.secondary.main,
},
},
typography: {
h1: {
...Raleway,
},
h2: {
...Raleway,
},
h3: {
...Raleway,
},
h4: {
...Raleway,
},
h5: {
...Raleway,
},
h6: {
...Raleway,
},
body1: {
...Raleway,
},
body2: {
...Raleway,
},
subtitle1: {
...Raleway,
},
},
})
export default theme