April 09, 2021

Create A Custom MUI Theme

Hola. 👋🏾

The default Material UI (MUI) theme comes with a lot of feaures right out of the box. However, I highly recommend that you customize it for your own brand purposes. In the colors, typography and index "files" below are examples (some more complex than others) of how I've created a custom theme before.

theme/colors.js

1export const black = '#000000'
2export const white = '#FFFFFF'
3export const disabled = 'rgba(0,0,0,0.5)'
4
5export const blue = '#0000FF'
6export const red = '#F22A07'
7export const yellow = '#FDF30B'
8
9export const success = {
10 main: '#66FF33',
11 dark: '#009933',
12 light: 'rgba(102,255,51,0.5)',
13}

theme/typography.js

1import * as colors from './colors'
2
3export const h1 = {
4 fontFamily: 'Open Sans, sans-serif',
5 fontWeight: 600,
6 fontSize: 36,
7 color: colors.blue,
8 textTransform: 'initial',
9}
10
11const p = ({ inverse = false, color = colors.black }) => ({
12 fontFamily: 'Open Sans, sans-serif',
13 fontWeight: inverse ? 400 : 300,
14 fontSize: 12,
15 color: inverse ? colors.text.white : color,
16 transform: 'sentence',
17})

theme/index.js

1import { createMuiTheme, responsiveFontSizes } from '@material-ui/core/styles'
2
3let theme = createMuiTheme({
4 palette: {
5 primary: { main: colors.blue },
6 success: {
7 main: colors.success.main,
8 dark: colors.success.dark,
9 light: colors.success.light,
10 },
11 error: { main: colors.red },
12 info: { main: colors.yellow },
13 text: {
14 primary: colors.black,
15 secondary: colors.white,
16 disabled: colors.disabled,
17 },
18 },
19 typography: {
20 h1: typography.h1,
21 body1: typography.p(),
22 },
23})
24theme = responsiveFontSizes(theme)
25
26export {
27 colors,
28 theme,
29 typography,
30}

See you next time. 🙃