PNSPS-frontend-MaterialUI/src/themes/palette.js

// material-ui
import { createTheme } from '@mui/material/styles';

// third-party
import { presetPalettes } from '@ant-design/colors';

// project import
import ThemeOption from './theme';

// ==============================|| DEFAULT THEME - PALETTE  ||============================== //

const Palette = (mode) => {
  const colors = presetPalettes;

  const greyPrimary = [
    '#ffffff',
    '#fafafa',
    '#f5f5f5',
    '#f0f0f0',
    '#d9d9d9',
    '#bfbfbf',
    '#8c8c8c',
    '#595959',
    '#262626',
    '#141414',
    '#000000'
  ];
  const greyAscent = ['#fafafa', '#bfbfbf', '#434343', '#1f1f1f'];
  const greyConstant = ['#fafafb', '#e6ebf1'];

  colors.grey = [...greyPrimary, ...greyAscent, ...greyConstant];

  const paletteColor = ThemeOption(colors);

  return createTheme({
    palette: {
      mode,
      common: {
        black: '#000',
        white: '#fff'
      },
      ...paletteColor,
      text: {
        primary: paletteColor.grey[700],
        secondary: paletteColor.grey[500],
        disabled: paletteColor.grey[400]
      },
      action: {
        disabled: paletteColor.grey[300]
      },
      divider: paletteColor.grey[200],
      background: {
        paper: paletteColor.grey[0],
        default: paletteColor.grey.A50
      },
      gray: {
        main: '#777',
        light: '#777',
        dark: '#777',
        contrastText: '#FFF',
      },
      white: {
        main: '#fff',
        light: '#fff',
        dark: '#eee',
        contrastText: '#222',
      },
      ochre: {
        main: '#E3D026',
        light: '#E9DB5D',
        dark: '#A29415',
        contrastText: '#242105',
      },
      red: {
        main: '#f05b5b',
        light: '#ff5e5e',
        dark: '#c91616',
        contrastText: '#fff',
      },
      pink: {
        main: '#ed138a',
        light: '#ff5e5e',
        dark: '#ba1c73',
        contrastText: '#fff',
      },
      orange: {
        main: '#ed9740',
        light: '#ff5e5e',
        dark: '#b0671e',
        contrastText: '#fff',
      },
      iAmSmart: {
        main: '#2B7366',
        light: '#ff5e5e',
        dark: '#b0671e',
        contrastText: '#fff',
      },
      backgroundColor: {
        default: '#F2F2F2'
      }
    }
  });
};

export default Palette;