Theme/Style Configuration
Defines core of theme. How theme is being set using Material-UI.
Customize Berry with your theme. You can change the colors, the typography, and much more. Material-UI provides flexibility to change the style of the project in a single place and on top of it, we made it more centralize and consistent by proper file structure.

Theme configuration

The whole theme can be configured from the folder ..\src\themes . Theme initialization starts in index.js, where palette, typography, and component's overridable style exist.
JavaScript
Typescript
index.js
1
import { createTheme } from '@material-ui/core/styles';
2
3
// assets
4
import colors from 'assets/scss/_themes-vars.module.scss';
5
import theme1 from 'assets/scss/_theme1.module.scss';
6
import theme2 from 'assets/scss/_theme2.module.scss';
7
import theme3 from 'assets/scss/_theme3.module.scss';
8
import theme4 from 'assets/scss/_theme4.module.scss';
9
import theme5 from 'assets/scss/_theme5.module.scss';
10
import theme6 from 'assets/scss/_theme6.module.scss';
11
12
// project imports
13
import componentStyleOverrides from './compStyleOverride';
14
import themePalette from './palette';
15
import themeTypography from './typography';
16
import customShadows from './shadows';
17
18
/**
19
* Represent theme style and structure as per Material-UI
20
* @param {JsonObject} customization customization parameter object
21
*/
22
export function theme(config) {
23
let color;
24
switch (config.presetColor) {
25
case 'theme1':
26
color = theme1;
27
break;
28
case 'theme2':
29
color = theme2;
30
break;
31
case 'theme3':
32
color = theme3;
33
break;
34
case 'theme4':
35
color = theme4;
36
break;
37
case 'theme5':
38
color = theme5;
39
break;
40
case 'theme6':
41
color = theme6;
42
break;
43
case 'default':
44
default:
45
color = colors;
46
}
47
48
const themeOption = {
49
...
50
paper: '',
51
...
52
};
53
54
switch (config.navType) {
55
case 'dark':
56
themeOption.paper = color.darkLevel2;
57
...
58
break;
59
case 'light':
60
default:
61
themeOption.paper = color.paper;
62
...
63
break;
64
}
65
66
return createTheme({
67
direction: config.rtlLayout ? 'rtl' : 'ltr',
68
palette: themePalette(themeOption),
69
mixins: {
70
toolbar: {
71
minHeight: '48px',
72
padding: '16px',
73
'@media (min-width: 600px)': {
74
minHeight: '48px'
75
}
76
}
77
},
78
breakpoints: {
79
values: {
80
xs: 0,
81
sm: 600,
82
md: 960,
83
lg: 1280,
84
xl: 1920
85
}
86
},
87
typography: themeTypography(themeOption),
88
customShadows: customShadows(config.navType, themeOption),
89
components: componentStyleOverrides(themeOption)
90
});
91
}
92
93
export default theme;
Copied!
1
import { createTheme } from '@material-ui/core/styles';
2
3
// assets
4
import colors from 'assets/scss/_themes-vars.module.scss';
5
import theme1 from 'assets/scss/_theme1.module.scss';
6
import theme2 from 'assets/scss/_theme2.module.scss';
7
import theme3 from 'assets/scss/_theme3.module.scss';
8
import theme4 from 'assets/scss/_theme4.module.scss';
9
import theme5 from 'assets/scss/_theme5.module.scss';
10
import theme6 from 'assets/scss/_theme6.module.scss';
11
12
// project imports
13
import componentStyleOverrides from './compStyleOverride';
14
import themePalette from './palette';
15
import themeTypography from './typography';
16
import customShadows from './shadows';
17
import { ColorProps, CustomizationStateProps } from 'types';
18
19
/**
20
* Represent theme style and structure as per Material-UI
21
* @param {JsonObject} customization customization parameter object
22
*/
23
24
export const theme = (customization: CustomizationStateProps) => {
25
let color: ColorProps;
26
switch (customization.presetColor) {
27
case 'theme1':
28
color = theme1;
29
break;
30
case 'theme2':
31
color = theme2;
32
break;
33
case 'theme3':
34
color = theme3;
35
break;
36
case 'theme4':
37
color = theme4;
38
break;
39
case 'theme5':
40
color = theme5;
41
break;
42
case 'theme6':
43
color = theme6;
44
break;
45
case 'default':
46
default:
47
color = colors;
48
}
49
50
const themeOption = {
51
...
52
paper: '',
53
...
54
};
55
56
switch (customization.navType) {
57
case 'dark':
58
themeOption.paper = color.darkLevel2;
59
...
60
break;
61
case 'light':
62
default:
63
themeOption.paper = color.paper;
64
...
65
break;
66
}
67
68
return createTheme({
69
direction: customization.rtlLayout ? 'rtl' : 'ltr',
70
palette: themePalette(themeOption),
71
mixins: {
72
toolbar: {
73
minHeight: '48px',
74
padding: '16px',
75
'@media (min-width: 600px)': {
76
minHeight: '48px'
77
}
78
}
79
},
80
breakpoints: {
81
values: {
82
xs: 0,
83
sm: 600,
84
md: 960,
85
lg: 1280,
86
xl: 1920
87
}
88
},
89
typography: themeTypography(themeOption),
90
customShadows: customShadows(customization.navType, themeOption),
91
components: componentStyleOverrides(themeOption)
92
});
93
};
94
95
export default theme;
Copied!
As you can see colors for the theme came from the central location import value from '../assets/scss/_themes-vars.module.scss';
:themes-vars.module.scss
1
// paper & background
2
$paper: #ffffff;
3
4
// primary
5
$primaryLight: #e3f2fd;
6
...
7
8
// secondary
9
$secondaryLight: #ede7f6;
10
...
11
12
// success Colors
13
$successLight: #b9f6ca;
14
...
15
16
// error
17
$errorLight: #ef9a9a;
18
...
19
20
// orange
21
$orangeLight: #fbe9e7;
22
...
23
24
// warning
25
$warningLight: #fff8e1;
26
...
27
28
// grey
29
$grey50: #fafafa;
30
...
31
32
//-----------------------|| DARK THEME VARIANTS ||-----------------------//
33
34
// paper & background
35
$darkBackground: #1a223f; // level 3
36
$darkPaper: #111936; // level 4
37
38
// dark 800 & 900
39
$darkLevel1: #29314f; // level 1
40
$darkLevel2: #212946; // level 2
41
42
// primary dark
43
$darkPrimaryLight: #e3f2fd;
44
...
45
46
// secondary dark
47
$darkSecondaryLight: #d1c4e9;
48
...
49
50
// text variants
51
$darkTextTitle: #d7dcec;
52
...
53
54
//-----------------------|| JAVASCRIPT ||-----------------------//
55
56
:export {
57
// paper & background
58
paper: $paper;
59
60
// primary
61
primaryLight: $primaryLight;
62
primary200: $primary200;
63
primaryMain: $primaryMain;
64
primaryDark: $primaryDark;
65
primary800: $primary800;
66
67
// secondary
68
secondaryLight: $secondaryLight;
69
secondary200: $secondary200;
70
secondaryMain: $secondaryMain;
71
secondaryDark: $secondaryDark;
72
secondary800: $secondary800;
73
74
// success
75
successLight: $successLight;
76
success200: $success200;
77
successMain: $successMain;
78
successDark: $successDark;
79
80
// error
81
errorLight: $errorLight;
82
errorMain: $errorMain;
83
errorDark: $errorDark;
84
85
// orange
86
orangeLight: $orangeLight;
87
orangeMain: $orangeMain;
88
orangeDark: $orangeDark;
89
90
// warning
91
warningLight: $warningLight;
92
warningMain: $warningMain;
93
warningDark: $warningDark;
94
95
// grey
96
grey50: $grey50;
97
grey100: $grey100;
98
grey200: $grey200;
99
grey300: $grey300;
100
grey500: $grey500;
101
grey600: $grey600;
102
grey700: $grey700;
103
grey900: $grey900;
104
105
//-----------------------|| DARK THEME VARIANTS ||-----------------------//
106
107
// paper & background
108
darkPaper: $darkPaper;
109
darkBackground: $darkBackground;
110
111
// dark 800 & 900
112
darkLevel1: $darkLevel1;
113
darkLevel2: $darkLevel2;
114
115
// text variants
116
darkTextTitle: $darkTextTitle;
117
darkTextPrimary: $darkTextPrimary;
118
darkTextSecondary: $darkTextSecondary;
119
120
// primary dark
121
darkPrimaryLight: $darkPrimaryLight;
122
darkPrimaryMain: $darkPrimaryMain;
123
darkPrimaryDark: $darkPrimaryDark;
124
darkPrimary200: $darkPrimary200;
125
darkPrimary800: $darkPrimary800;
126
127
// secondary dark
128
darkSecondaryLight: $darkSecondaryLight;
129
darkSecondaryMain: $darkSecondaryMain;
130
darkSecondaryDark: $darkSecondaryDark;
131
darkSecondary200: $darkSecondary200;
132
darkSecondary800: $darkSecondary800;
133
}
Copied!
You can check other settings like theme typography, palette, and components style override in the same folder. ..src\themes

How to customize it?

You might come across questions like how to change a theme's primary color? How to change textbox or other components which can apply to an entire theme?

Customize Theme Colors

To change the color of the theme, you can either apply color directly to ..src\theme\palatte.js or defines a new variable in ..src\assets\scss\_themes-vars.module.scss and replace it in palatte.js
For instance, if you want to change color where theme.palette.primary.light is being used in a theme then, update following in ..src\themes\palatte.js
palatter.js
1
import value from '../assets/scss/_themes-vars.module.scss';
2
3
/**
4
* Color intention that you want to used in your theme
5
*/
6
export function themePalatte(theme) {
7
return {
8
...
9
primary: {
10
light: '#fff000', // change this to your desired color
11
...
12
},
13
...
14
...
15
16
};
17
}
Copied!

Customize Theme Typography

You can customize the typography used in the theme as well from the central place.
For instance, If you want to change font-weight of the typography h5 to 900. To do that, open ..src\themes\typography.js and update as below:
typography.js
1
/**
2
* Typography used in theme
3
*/
4
export function themeTypography(theme) {
5
return {
6
...
7
h5: {
8
...
9
fontWeight: 900 // changed this to make it 900 from 500
10
},
11
...
12
};
13
}
Copied!
This will apply to all places where you used Typography variants as h5
<Typography variant="h5"...>

Customize MUI Component style

We have provided a central location to override any default style of any component. All the overrides styles exist in src\themes\compStyleOverride.js
compStyleOverride.js
1
import value from '../assets/scss/_themes-vars.module.scss';
2
3
/**
4
* MUI Componets whose styles are overrided as per theme
5
*/
6
export function componentStyleOverrides(theme) {
7
return {
8
MuiButton: {
9
styleOverrides: {
10
root: {
11
fontWeight: 500,
12
textTransform: 'capitalize',
13
borderRadius: '4px'
14
}
15
}
16
},
17
...
18
...
19
MuiDialog: {
20
styleOverrides: {
21
paper: {
22
padding: '12px 0 12px 0'
23
}
24
}
25
}
26
};
27
}
Copied!
You can add default property for any MUI component and it will be applied everywhere. We emitted lines to view it better in the above code block but you can see many controls' styles override in the same file. Feel free to change it as per your need.
Last modified 11d ago