@material-ui/core/styles#createMuiTheme JavaScript Examples

The following examples show how to use @material-ui/core/styles#createMuiTheme. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: ThemeProvider.js    From tisn.app with GNU Affero General Public License v3.0 6 votes vote down vote up 
themes = {
  light: createMuiTheme({
    palette: {
      primary: {
        main: indigo[500],
      },
      secondary: {
        main: pink['A400'],
      },
    },
  }),
  dark: createMuiTheme({
    palette: {
      type: 'dark',
      primary: {
        main: indigo[200],
      },
      secondary: {
        main: pink[200],
      },
    },
  }),
}
Example #2
Source File: Theme.js    From covid-tracker-material-ui-react with MIT License 6 votes vote down vote up 
lightTheme = createMuiTheme({
  palette: {
    common: {
      blue: `${arcBlue}`,
      orange: `${arcOrange}`,
    },
    primary: {
      main: `${arcBlue}`,
    },
    secondary: {
      main: `${arcOrange}`,
    },
    type: "light",
  },
})
Example #3
Source File: index.js    From AdaptivApps-fe with MIT License 6 votes vote down vote up 
theme = createMuiTheme({
  palette: {
    primary: { main: primary },
    secondary: { main: secondary },
  },
  typography: {
    // fontSize: 10,
    h1: { fontSize: "3rem", fontWeight: 400 },
    h2: { fontSize: "2.1rem", fontWeight: 500 },
    h3: { fontSize: "2rem" },
    h4: { fontSize: "2rem" },
    h5: { fontSize: "2rem" },
    h6: { fontSize: "2rem" },
    subtitle1: { fontSize: "1.6rem", color: "#808080" },
    subtitle2: { fontSize: "4.8rem", fontWeight: "bold" },
    body1: { fontSize: "1.6rem" },
    body2: { fontSize: "1.6rem" },
    button: { fontSize: "1.6rem" },
    caption: { fontSize: "1.6rem" },
    overline: { fontSize: "1.6rem" },
  },
  breakpoints: {
    values: {
      xl,
      lg,
      md,
      sm,
      xs,
    },
  },
})
Example #4
Source File: getPageContext.js    From next-qrcode with MIT License 6 votes vote down vote up 
theme = createMuiTheme({
  palette: {
    primary: {
      light: purple[300],
      main: purple[500],
      dark: purple[700],
    },
    secondary: {
      light: green[300],
      main: green[500],
      dark: green[700],
    },
  },
  typography: {
    useNextVariants: true,
  },
})
Example #5
Source File: style.js    From Queen with MIT License 6 votes vote down vote up 
StyleProvider = ({ children }) => {
  // const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');

  const theme = useMemo(
    () =>
      createMuiTheme({
        palette: {
          // type: prefersDarkMode ? 'dark' : 'light',
          primary: {
            main: '#085394',
          },
          secondary: {
            main: '#FFFFFF',
          },
          declarations: {
            main: '#085394',
            help: 'black',
          },
          background: {
            default: '#eeeeee',
          },
        },
        breakpoints: {
          values: {
            xs: 0,
            sm: 460,
            md: 750,
            lg: 875,
            xl: 1200,
          },
        },
      }),
    []
  );

  return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
}
Example #6
Source File: Theme.js    From WebApp with MIT License 6 votes vote down vote up 
customTheme = createMuiTheme({
  palette: {
    primary: {
      main: '#2196F3',
      contrastText: '#ffffff'
    },
    secondary: {
      main: '#333'
    },
    backgroundColor: '#2196F3',
    backgroundMain: 'linear-gradient(90deg, #2196F3 0%, #2092D1 100%)',
    boxShadow: '0px 4px 4px rgba(0, 0, 0, 0.24)'
  },
  typography: {
    // fontFamily: "Roboto",
    fontStyle: 'normal',
    fontWeight: 500,
    letterSpacing: '1.25px',
    h5: {
      textTransform: 'uppercase'
    },
    h6: {
      color: '#2196F3'
    }
  },
  mixins: {
    toolbar: {
      minHeight: 64,
      backgroundColor: '#2196F3',
      background: 'linear-gradient(90deg, #2196F3 0%, #2092D1 100%)',
      color: '#ffffff',
      paddingLeft: '13%' // this should be removed
    }
  }
})
Example #7
Source File: theme.js    From Full-Stack-React-Projects-Second-Edition with MIT License 6 votes vote down vote up 
theme = createMuiTheme({
    typography: {
      useNextVariants: true,
    },
    palette: {
      primary: {
      light: '#5c67a3',
      main: '#3f4771',
      dark: '#2e355b',
      contrastText: '#fff',
    },
    secondary: {
      light: '#ff79b0',
      main: '#ff4081',
      dark: '#c60055',
      contrastText: '#000',
    },
      openTitle: '#3f4771',
      protectedTitle: pink['400'],
      type: 'light'
    }
  })
Example #8
Source File: navbar.js    From upvision.github.io with MIT License 6 votes vote down vote up 
muiTheme = createMuiTheme({
  overrides: {
    MuiSlider: {
      thumb: {
        height: "12px",
        width: "12px",
        color: "#13e8b5",
      },
      track: {
        height: "3px",
        color: "#13a884",
      },
      rail: {
        height: "3px",
        color: "#13a884",
      },
      markLabel: {
        fontSize: "calc(0.5rem + 0.4vw)",
        color: "#13a884",
      },
      markLabelActive: {
        fontSize: "calc(0.5rem + 0.4vw)",
        color: "#ffffff",
      },
      mark: {
        backgroundColor: transparent,
      },
      markActive: {
        backgroundColor: transparent,
      },
    },
  },
})
Example #9
Source File: index.js    From acsys with MIT License 6 votes vote down vote up 
theme = createMuiTheme({
  palette: {
    primary: {
      light: '#c5a8ff',
      main: '#b79afe',
      dark: '#7735e3',
      contrastText: '#ffffff',
    },
  },
  typography: {
    h5: {
      fontWeight: 500,
      fontSize: 26,
      letterSpacing: 0.5,
    },
  },
  shape: {
    borderRadius: 8,
  },
  props: {
    MuiTab: {
      disableRipple: true,
    },
  },
  mixins: {
    toolbar: {
      minHeight: 48,
    },
  },
})
Example #10
Source File: style-constants.js    From surveillance-forms with MIT License 6 votes vote down vote up 
theme = createMuiTheme({
  typography: {
    // fontFamily: ['Open Sans', 'Arial'], // default is Roboto
    fontFamily: ['Barlow','Roboto', 'proxima-nova', 'Arial']
  },
  palette: {
    primary: {
      main: primaryColor,
      light: primaryColorLight,
      dark: primaryColor,
      contrastText: '#fff',
    },
    secondary: {
      main: secondaryColor,
      light: secondaryColorLight,
      dark: secondaryColor,
      contrastText: '#fff',
    },
    background: {
      default: '#fafafa'
    }
  },
})
Example #11
Source File: theme.js    From smart-contracts with MIT License 6 votes vote down vote up 
theme = createMuiTheme({
  palette: {
    primary: {
      main: '#556cd6',
    },
    secondary: {
      main: '#19857b',
    },
    error: {
      main: red.A400,
    },
    background: {
      default: '#fff',
    },
  },
})
Example #12
Source File: customTheme.js    From reddish with MIT License 6 votes vote down vote up 
customTheme = (darkMode) =>
  createMuiTheme({
    palette: {
      type: darkMode ? 'dark' : 'light',
      primary: {
        main: darkMode ? '#ffb28a' : '#FF5700',
      },
      secondary: {
        main: darkMode ? '#f3b9bb' : '#941a1c',
      },
    },
    overrides: {
      MuiTypography: {
        root: {
          wordBreak: 'break-word',
        },
      },
    },
  })
Example #13
Source File: customTheme.js    From to-view-list with MIT License 6 votes vote down vote up 
customTheme = (darkMode) =>
  createMuiTheme({
    palette: {
      type: darkMode ? 'dark' : 'light',
      primary: {
        main: darkMode ? '#949aaf' : '#4d577a',
      },
      secondary: {
        main: darkMode ? '#d6d2e2' : '#6f6098',
      },
    },
    overrides: {
      MuiTypography: {
        root: {
          wordBreak: 'break-word',
        },
      },
    },
  })
Example #14
Source File: index.js    From react-electron-sqlite-boilerplate with MIT License 6 votes vote down vote up 
theme = createMuiTheme({
  overrides: {
    MuiAppBar: {
      colorPrimary: {
        backgroundColor: grey[800],
      },
    },
    MuiToolbar: {
      dense: {
        minHeight: 0,
        maxHeight: 32,
      },
    },
  },
})
Example #15
Source File: theme.js    From Recess with MIT License 6 votes vote down vote up 
lightTheme = createMuiTheme({
  type: "light",
  palette: {
    primary: {
      main: "#121823",
    },
    secondary: {
      main: "#41506B",
      dark: "#9dd4dbbf",
    },
    error: {
      main: "#FF4D4D",
    },
    text: {
      primary: "#121823",
      secondary: "#41506B",
    },
    background: {
      default: "#EEFDFF",
      paper: "#EEFDFF",
    },
  },
  typography: {
    fontFamily: '"Poppins", sans-serif',
  },
})
Example #16
Source File: theme.js    From Interceptor with MIT License 6 votes vote down vote up 
light_theme = createMuiTheme({
  palette: {
    type: "light",
  },
  typography: {
    "fontFamily": `"Roboto", "Helvetica", "Arial", sans-serif`,
    "fontSize": 14,
    "fontWeightLight": 300,
    "fontWeightRegular": 400,
    "fontWeightMedium": 500
  }
})
Example #17
Source File: theme-dark.js    From management-center with Apache License 2.0 6 votes vote down vote up 
theme = createMuiTheme({
	palette: {
		type: 'dark',
		primary: {
			main: '#556cd6'
			//   main: '#00695f',
			//   main: '#ffc107',
			//   main: 'rgb(44, 19, 56)',
		},
		secondary: {
			main: '#7c88cc'
			//   main: '#009688',
			//   main: '#ffcd38',
		},
		menuItem: {
			color: '#2697ed',
		},
		error: {
			main: red.A400
		},
		breadcrumbItem: {
			fontSize: '12px',
			fontWeight: '500',
			textTransform: 'uppercase'
		},
		breadcrumbLink: {
			color: 'inherit',
			textDecoration: 'none',
			textTransform: 'uppercase',
			fontSize: '12px',
			'&:hover': {
				textDecoration: 'underline'
			}
		}
	}
})
Example #18
Source File: theme.js    From Design-Initiative-Dashboard-frontend with GNU General Public License v3.0 6 votes vote down vote up 
theme = createMuiTheme({
  palette: {
    primary: {
      main: '#4054B2',
    },
    secondary: {
      main: '#19857b',
    },
    error: {
      main: red.A400,
    },
    background: {
      default: '#F7F7F7',
    },
  },
})
Example #19
Source File: theme.jsx    From test-deploy-gatsby-apps with BSD Zero Clause License 6 votes vote down vote up 
theme = responsiveFontSizes(
  createMuiTheme({
    palette: {
      primary: {
        main: "#FFFFFF",
      },
      secondary: {
        main: "#000000",
        light: "rgba(255, 255, 255, 0.6)",
        800: "#606060",
        500: "#c2c2c2",
        400: "#DEDEDE",
        200: "#f5f5f5",
      },
      text: {
        primary: "rgba(0,0,0,1)",
        secondary: "rgba(0,0,0,0.6)",
      },
    },
  })
)
Example #20
Source File: SwapPanel.js    From dmm-web-app with MIT License 6 votes vote down vote up 
theme = createMuiTheme({
  palette: {
    primary: {
      main: '#ffffff'
    },
    secondary: {
      main: '#327ccb'
    },
  },
})
Example #21
Source File: Cards.jsx    From CovidIndiaStats with MIT License 6 votes vote down vote up 
theme = createMuiTheme({
  overrides: {
    MuiCardContent: {
      root: {
        padding: "1px",
      },
    },
  },
})
Example #22
Source File: Dark.js    From Nemesis with GNU General Public License v3.0 6 votes vote down vote up 
dark = createMuiTheme({
  typography: {
    useNextVariants: true,
    fontFamily: "altehaasgroteskregular"
  },
  palette: {
    type: "dark",
    primary: cyan,
    secondary: deepOrange,
    background: {
      paper: "#000000"
    }
  },
  overrides: {
    MuiInput: {
      root: {
        // color: grey[900]
      }
    },
    MuiPaper: {
      root: {
        backgroundImage: `url("data:image/svg+xml,%3Csvg width='32' height='26' viewBox='0 0 32 26' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 0v3.994C14 7.864 10.858 11 7 11c-3.866 0-7-3.138-7-7.006V0h2v4.005C2 6.765 4.24 9 7 9c2.756 0 5-2.236 5-4.995V0h2zm0 26v-5.994C14 16.138 10.866 13 7 13c-3.858 0-7 3.137-7 7.006V26h2v-6.005C2 17.235 4.244 15 7 15c2.76 0 5 2.236 5 4.995V26h2zm2-18.994C16 3.136 19.142 0 23 0c3.866 0 7 3.138 7 7.006v9.988C30 20.864 26.858 24 23 24c-3.866 0-7-3.138-7-7.006V7.006zm2-.01C18 4.235 20.244 2 23 2c2.76 0 5 2.236 5 4.995v10.01C28 19.765 25.756 22 23 22c-2.76 0-5-2.236-5-4.995V6.995z' fill='%234f4f4f' fill-opacity='0.075' fill-rule='evenodd'/%3E%3C/svg%3E")
                          ,radial-gradient(circle at top, rgba(34,39,43,1) 0%, rgba(11,13,14,1) 100%)`
      }
    }
  },
  MuiPaper: {
    root: {
      margin: 10,
      padding: 10
    }
  }
})
Example #23
Source File: MissionCard.jsx    From resilience-app with GNU General Public License v3.0 6 votes vote down vote up 
createCustomTheme = (theme) =>
  createMuiTheme({
    ...theme,
    overrides: {
      ...theme.overrides,
      MuiCardHeader: {
        root: {
          backgroundColor: "whitesmoke",
          height: theme.spacing(3),
        },
        action: {
          marginTop: "-11px",
          color: "rgba(0, 0, 0, 0.54)",
        },
        content: {
          textAlign: "left",
        },
        avatar: {
          marginRight: "8px",
          marginTop: "3px",
        },
      },
      MuiCardContent: {
        root: {
          padding: theme.spacing(1),
          paddingBottom: "0 !important",
        },
      },
      MuiGrid: {
        "grid-xs-true": {
          flexBasis: "auto",
        },
      },
    },
  })
Example #24
Source File: theme.js    From budgie-stream with MIT License 6 votes vote down vote up 
theme = createMuiTheme({
  palette: {
    primary: {
      main: "#2e3440",
    },
    secondary: {
      main: "#5e81ac",
    },
  },
})
Example #25
Source File: theme.js    From eSim-Cloud with GNU General Public License v3.0 6 votes vote down vote up 
theme = createMuiTheme({
  palette: {
    primary: {
      main: '#556cd6'
    },
    secondary: {
      main: '#19857b'
    },
    error: {
      main: red.A400
    },
    background: {
      default: '#fff'
    }
  }
})
Example #26
Source File: theme.js    From radio-logger with GNU General Public License v3.0 6 votes vote down vote up 
theme = createMuiTheme({
  overrides: {
    MuiOutlinedInput: {
      multiline: {
        fontWeight: 'bold',
        fontSize: '20px',
        color: 'purple',
        width: '50vw',
      },
    },
  },
})
Example #27
Source File: index.js    From dineforward with MIT License 6 votes vote down vote up 
theme = createMuiTheme({
  overrides: {
    palette: {
      primary1Color: '#00e5ff',
      primary2Color: '#0097a7',
      canvasColor: '#ffffff',
      textColor: 'rgba(0, 0, 0, 0.79)',
      secondaryTextColor: 'rgba(0, 0, 0, 0.26)',
      alternateTextColor: 'rgba(0, 0, 0, 0.26)',
      shadowColor: '#ffffff',
      accent1Color: 'rgba(250, 250, 250, 0.25)',
      accent2Color: 'rgba(158, 158, 158, 0.06)',
      primary3Color: 'rgba(158, 158, 158, 0.65)',
      accent3Color: 'rgba(224, 224, 224, 0.3)',
    },
    shadows: ['none'],
    typography: {
      fontFamily: 'jaf-bernina-sans, sans-serif',
      fontWeight: '400',
      fontStyle: 'normal',
    },
  },
})
Example #28
Source File: index.jsx    From viv with MIT License 6 votes vote down vote up 
darkTheme = createMuiTheme({
  palette: {
    type: 'dark',
    primary: grey,
    secondary: grey
  },
  props: {
    MuiButtonBase: {
      disableRipple: true
    }
  }
})
Example #29
Source File: index.js    From jobtriage with MIT License 6 votes vote down vote up 
theme = createMuiTheme({
  typography: {
    fontFamily: ['Montserrat', 'sans-serif'].join(','),
  },
  palette: {
    primary: {
      main: '#794BC4',
    },
    secondary: {
      main: '#03DAC6',
    },
    textPrimary: {
      main: 'rgba(0, 0, 0, 0.87)',
    },
    textSecondary: {
      main: 'rgba(0, 0, 0, 0.57)',
    },
    activeBg: {
      main: '#d8d8d8',
    },
    error: {
      main: '#b00020',
    },
    border: {
      main: '#0000001a',
    },
  },
})