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

Typescript

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
      },
      ...
    }
  });
}

Javascript

import defaultColor from 'assets/scss/_themes-vars.module.scss';

/**
 * Color intention that you want to used in your theme
 */
export default function Palette(mode, presetColor) {
  let colors: ColorProps;
  switch (presetColor) {
    case 'theme1':
      colors = theme1;
        ...
        ...
    };
    
  return createTheme({
    palette: {
      mode,
      common: {
        black: colors.darkPaper
      },
      ...
    }
  });
}

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
      },
      ...
    }
  });
}