palette.ts 2.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182
  1. // material-ui
  2. import { alpha, createTheme } from "@mui/material/styles";
  3. // third-party
  4. import { presetDarkPalettes, presetPalettes, PalettesProps } from "@ant-design/colors";
  5. // project import
  6. import ThemeOption from "./theme";
  7. // types
  8. import { PaletteThemeProps } from "@/types/theme";
  9. import { PresetColor, ThemeMode } from "@/types/config";
  10. // ==============================|| DEFAULT THEME - PALETTE ||============================== //
  11. const Palette = (mode: ThemeMode, presetColor: PresetColor) => {
  12. const colors: PalettesProps = mode === "dark" ? presetDarkPalettes : presetPalettes;
  13. let greyPrimary = [
  14. "#ffffff",
  15. "#fafafa",
  16. "#f5f5f5",
  17. "#f0f0f0",
  18. "#d9d9d9",
  19. "#bfbfbf",
  20. "#8c8c8c",
  21. "#595959",
  22. "#262626",
  23. "#141414",
  24. "#000000"
  25. ];
  26. let greyAscent = ["#fafafa", "#bfbfbf", "#434343", "#1f1f1f"];
  27. let greyConstant = ["#fafafb", "#e6ebf1"];
  28. if (mode === "dark") {
  29. greyPrimary = [
  30. "#000000",
  31. "#141414",
  32. "#1e1e1e",
  33. "#595959",
  34. "#8c8c8c",
  35. "#bfbfbf",
  36. "#d9d9d9",
  37. "#f0f0f0",
  38. "#f5f5f5",
  39. "#fafafa",
  40. "#ffffff"
  41. ];
  42. // greyPrimary.reverse();
  43. greyAscent = ["#fafafa", "#bfbfbf", "#434343", "#1f1f1f"];
  44. greyConstant = ["#121212", "#d3d8db"];
  45. }
  46. colors.grey = [...greyPrimary, ...greyAscent, ...greyConstant];
  47. const paletteColor: PaletteThemeProps = ThemeOption(colors, presetColor, mode);
  48. return createTheme({
  49. palette: {
  50. mode,
  51. common: {
  52. black: "#000",
  53. white: "#fff"
  54. },
  55. ...paletteColor,
  56. text: {
  57. primary: mode === "dark" ? alpha(paletteColor.grey[900]!, 0.87) : paletteColor.grey[700],
  58. secondary: mode === "dark" ? alpha(paletteColor.grey[900]!, 0.45) : paletteColor.grey[500],
  59. disabled: mode === "dark" ? alpha(paletteColor.grey[900]!, 0.1) : paletteColor.grey[400]
  60. },
  61. action: {
  62. disabled: paletteColor.grey[300]
  63. },
  64. divider: mode === "dark" ? alpha(paletteColor.grey[900]!, 0.05) : paletteColor.grey[200],
  65. background: {
  66. paper: mode === "dark" ? paletteColor.grey[100] : paletteColor.grey[0],
  67. default: paletteColor.grey.A50
  68. }
  69. }
  70. });
  71. };
  72. export default Palette;