创建自定义深色主题素材ui

时间:2020-04-06 16:43:41

标签: reactjs material-ui

我目前有两个单独的主题,如果用户要用浅色显示浅色主题,如果用户要用深色显示暗色,则选择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

0 个答案:

没有答案