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

const TableRow = ({
  highlight = false,
  highlightBg = "primary",
  doStripe = false,
  doHorizontalBorders = false,
  index = 0,
  children = false,
  ...props
}) => {
  const { colorMode } = useColorMode();
  const theme = useTheme();

  let bg = null;
  if (highlight) {
    bg = `${highlightBg}.${alphaMap[colorMode]}`;
  } else if (doStripe && index % 2 !== 0) {
    bg = bgStripe[colorMode];
  }
  const color = highlight ? opposingColor(theme, bg) : null;

  const borderProps =
    doHorizontalBorders && index !== 0 ? rowBorder[colorMode] : {};
  return (

(
    {
      device,
      timeout,
      queryLocation,
      queryType,
      queryVrf,
      queryTarget,
      index,
      resultsComplete,
      setComplete
    },
    ref
  ) => {
    const config = useConfig();
    const theme = useTheme();
    const { isSm } = useMedia();
    const { colorMode } = useColorMode();
    let [{ data, loading, error }, refetch] = useAxios({
      url: "/api/query/",
      method: "post",
      data: {
        query_location: queryLocation,
        query_type: queryType,
        query_vrf: queryVrf,
        query_target: queryTarget
      },
      timeout: timeout,
      useCache: false
    });

    const [isOpen, setOpen] = useState(false);

const Meta = () => {
  const config = useConfig();
  const theme = useTheme();
  const [location, setLocation] = useState({});
  const title = config?.site_title || "hyperglass";
  const description = config?.site_description || "The modern looking glass.";
  const siteName = `${title} - ${description}`;
  const keywords = config?.site_keywords || [
    "hyperglass",
    "looking glass",
    "lg",
    "peer",
    "peering",
    "ipv4",
    "ipv6",
    "transit",
    "community",
    "communities",
    "bgp",

const MainTable = ({ children, ...props }) => {
  const theme = useTheme();
  const { colorMode } = useColorMode();
  return (

const EventCard: React.FC = ({ event }: EventCardProps) => {
    const [timeAgo, setTimeAgo] = useState(format(event.emittedAt, "en_US"));
    const props = useSpring({ opacity: 1, from: { opacity: 0 } });
    const theme = useTheme();

    useEffect(() => {
        const timer = setInterval(() => {
            setTimeAgo(format(event.emittedAt, "en_US"));
        }, 1000);

        return () => {
            window.clearInterval(timer);
        };
    }, []);

    const eventKindToTitle = (eventKind: string): string => {
        eventKind[0].toUpperCase();
        const sPart = eventKind.substring(1).replace(/-/g, " ");
        return eventKind.substring(0, 1).toUpperCase() + sPart;
    };

const Results = ({
  queryLocation,
  queryType,
  queryVrf,
  queryTarget,
  setSubmitting,
  ...props
}) => {
  const config = useConfig();
  const theme = useTheme();
  const { mediaSize } = useMedia();
  const matchedVrf =
    config.vrfs.filter(v => v.id === queryVrf)[0] ??
    config.vrfs.filter(v => v.id === "default")[0];
  const [resultsComplete, setComplete] = useState(null);
  return (
    <>

(
    {
      isLoading = false,
      isDisabled = false,
      isActive = false,
      isFullWidth = false,
      size = "lg",
      loadingText,
      children,
      ...props
    },
    ref
  ) => {
    const _isDisabled = isDisabled || isLoading;
    const { colorMode } = useColorMode();
    const theme = useTheme();
    const btnColor = opposingColor(theme, btnBg[colorMode]);
    const btnColorActive = opposingColor(theme, btnBgActive[colorMode]);
    const btnColorHover = opposingColor(theme, btnBgHover[colorMode]);
    const btnSize = btnSizeMap[size];
    return (

const Debugger = () => {
  const {
    isOpen: configOpen,
    onOpen: onConfigOpen,
    onClose: configClose
  } = useDisclosure();
  const {
    isOpen: themeOpen,
    onOpen: onThemeOpen,
    onClose: themeClose
  } = useDisclosure();
  const config = useConfig();
  const theme = useTheme();
  const bg = { light: "white", dark: "black" };
  const color = { light: "black", dark: "white" };
  const { colorMode } = useColorMode();
  const { mediaSize } = useMedia();
  const borderColor = { light: "gray.100", dark: "gray.600" };
  return (
    <>

export const ColorPalettes = ({ color }) => {
  const theme = useTheme();
  const keys = Object.keys(theme.colors[color]);
  return keys.map(item => (
    
  ));
};

(
    { placeholder = "Select...", isFullWidth, size, children, ...props },
    ref
  ) => {
    const theme = useTheme();
    const { colorMode } = useColorMode();
    const sizeMap = {
      lg: { height: theme.space[12] },
      md: { height: theme.space[10] },
      sm: { height: theme.space[8] }
    };
    const colorSetPrimaryBg = {
      dark: theme.colors.primary[300],
      light: theme.colors.primary[500]
    };
    const colorSetPrimaryColor = opposingColor(
      theme,
      colorSetPrimaryBg[colorMode]
    );
    const bg = {
      dark: theme.colors.whiteAlpha[100],