Color

Customize Theme Colors

To change the color of the theme, you can customize the theme preset files in src/themes/theme/ (e.g., default.ts, theme1.ts, etc.) or update how they are constructed in src/themes/palette.tsx.

For instance, if you want to change the color that theme.palette.primary.light uses in a theme, then update the primary color values inside the respective preset files in src/themes/theme/ under the light or dark mode properties.

Typescript

src\themes\palette.tsx

// project imports
import { extendPaletteWithChannels } from 'utils/colorUtils';

//assets
import defaultColor from './theme/default';

/**
 * Color intention that you want to used in your theme
 */
export function buildPalette(presetColor: PresetColor) {
  let colors;
  switch (presetColor) {
    case 'theme1':
      colors = theme1;
      break;
        ...
        ...
    };
    
  const extendedLight = extendPaletteWithChannels(colors.light);
  const extendedCommon = extendPaletteWithChannels(commonColor);

  return {
     light: {
      mode: 'light' as PaletteMode,
      ...extendedCommon,
      ...extendedLight
      },
      ...
    }
  };
}

Javascript

// project imports
import { extendPaletteWithChannels } from 'utils/colorUtils';

//assets
import defaultColor from './theme/default';

/**
 * Color intention that you want to used in your theme
 */
export function buildPalette(presetColor) {
  let colors;
  switch (presetColor) {
    case 'theme1':
      colors = theme1;
      break;
        ...
        ...
    };
    
  const extendedLight = extendPaletteWithChannels(colors.light);
  const extendedCommon = extendPaletteWithChannels(commonColor);

  return {
     light: {
      mode: 'light',
      ...extendedCommon,
      ...extendedLight
      },
      ...
    }
  };
}