customtheme-chakra-ui-example

const customTheme = {
  fonts: {
    body: "system-ui, sans-serif",
    heading: "Georgia, serif",
    mono: "Menlo, monospace",
  },
  colors: {
    transparent: "transparent",
    black: "#000",
    white: "#ffffff",
    primary: "#5e81f4", // azul oscuro
    //blue: "#5e81f4",
    secondary: "#1c1c3d", //
    avatar: "#f6f8ff",
    gray: {
      50: "#f5f5f9",
      100: "#a2a2c3",
      900: "#1a202c",
    },
    whiteTab: {
      100: "#ffffff",
      200: "#ffffff",
      300: "#ffffff",
      400: "#ffffff",
      500: "#ffffff",
      600: "#000", //color de fuente cuando está activo
      700: "#ffffff",
      800: "#ffffff",
      900: "#5e81f4",
    },
  },
  fontSizes: {
    xs: "12px",
    sm: "14px",
    md: "16px",
    lg: "18px",
    xl: "20px",
    "2xl": "24px",
    "3xl": "28px",
    "4xl": "36px",
    "5xl": "48px",
    "6xl": "64px",
  },
  fontWeights: {
    normal: 400,
    medium: 500,
    bold: 700,
  },
  lineHeights: {
    normal: "normal",
    none: "1",
    shorter: "1.25",
    short: "1.375",
    base: "1.5",
    tall: "1.625",
    taller: "2",
  },
  letterSpacings: {
    tighter: "-0.05em",
    tight: "-0.025em",
    normal: "0",
    wide: "0.025em",
    wider: "0.05em",
    widest: "0.1em",
  },
  icons: {
    ...customIcons,
  }
};