Color
Customize Theme Colors
To change the color of the theme, you can either apply color directly to src\theme\palette.tsx
or define a new variable in src\assets\scss\_themes-vars.module.scss
and replace it in palette.tsx
For instance, if you want to change the color that theme.palette.primary.light
is being used in a theme, then update the following in src\themes\palette.tsx
import defaultColor from 'assets/scss/_themes-vars.module.scss';
/**
* Color intention that you want to used in your theme
*/
export default function Palette(mode: ThemeMode, presetColor: PresetColor) {
let colors: ColorProps;
switch (presetColor) {
case 'theme1':
colors = theme1;
...
...
};
return createTheme({
palette: {
mode,
common: {
black: colors.darkPaper
},
...
}
});
}
import defaultColor from 'assets/scss/_themes-vars.module.scss';
/**
* Color intention that you want to used in your theme
*/
export default function Palette(mode: ThemeMode, presetColor: PresetColor) {
let colors: ColorProps;
switch (presetColor) {
case 'theme1':
colors = theme1;
...
...
};
return createTheme({
palette: {
mode,
common: {
black: colors.darkPaper
},
...
}
});
}
Was this helpful?