How to use the @chakra-ui/core.theme.colors function in @chakra-ui/core

import { theme } from '@chakra-ui/core';

export default {
  ...theme,
  colors: {
    ...theme.colors,
    brand: {
      50: '#edfdf4',
      100: '#e2fbed',
      200: '#c2ebd4',
      300: '#9fddb9',
      400: '#7ccf9e',
      500: '#58c184',
      600: '#3ea76a',
      700: '#2e8251',
      800: '#1f5d3a',
      900: '#0f3921',
      1000: '#001506',
    },
  },
};

import React from "react";
import { theme as chakraTheme } from "@chakra-ui/core";

const colors = chakraTheme.colors;

const fonts = {
  default: `'Inter', sans-serif`,
  var: `'Inter var', sans-serif`
};

const breakpoints = ["40em", "52em", "64em"];

const theme = {
  ...chakraTheme,
  colors,
  fonts,
  breakpoints,
  icons: {
    ...chakraTheme.icons,
    karyakarsa: {

import { theme } from '@chakra-ui/core'

const publisherTheme = {
  ...theme,
  colors: {
    ...theme.colors,
    text: '#2D3748',
    primary: '#1eb4f3',
    muted: '#999',
    headings: '#1eb4f3',
    links: '#1eb4f3',
    navLink: '#f5ee08',
    headerBg: '#1eb4f3',
    footerBg: theme.colors.gray['900'],
    footerText: theme.colors.gray['400'],
    buttonBg: '#1eb4f3',
    buttonText: '#eee',
    optinText: '#555',
    optinBg: '#EDF2F7',
  },
}

export default publisherTheme

import { theme } from '@chakra-ui/core'

const publisherTheme = {
  ...theme,
  colors: {
    ...theme.colors,
    text: '#2D3748',
    primary: '#1eb4f3',
    muted: '#999',
    headings: '#1eb4f3',
    links: '#1eb4f3',
    navLink: '#f5ee08',
    headerBg: '#1eb4f3',
    footerBg: theme.colors.gray['900'],
    footerText: theme.colors.gray['400'],
    buttonBg: '#1eb4f3',
    buttonText: '#eee',
    optinText: '#555',
    optinBg: '#EDF2F7',
  },
}