создание пользовательского темного материала темы интерфейса - PullRequest
0 голосов
/ 06 апреля 2020

В настоящее время у меня есть две отдельные темы, и я выбираю true или false, если пользователь хочет, чтобы светлая тема показывала светлую тему, и если пользователь хочет, чтобы темная показывала темную. Я бы предпочел, чтобы моя тема была в одном файле и выбирал между типом светлый или темный. Я хотел бы знать, из чего состоит лучшая практика создания темной темы в интерфейсе материалов:

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
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...