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

size = "48px",
    max = 100,
    min = 0,
    isIndeterminate,
    thickness = 0.2,
    value = 0,
    angle = 0,
    capIsRound,
    children,
    trackColor = "gray",
    color = "blue",
    ...rest
  }: CircularProgressProps,
  ref: React.Ref,
) {
  const { colorMode } = useColorMode();

  const _trackColor = { light: `${trackColor}.100`, dark: "whiteAlpha.300" };
  const _color = { light: `${color}.500`, dark: `${color}.200` };

  const {
    rootProps,
    indicatorCircleProps,
    svgProps,
    trackCircleProps,
  } = getComputedProps({
    min,
    max,
    value,
    size,
    angle,
    thickness,

const Kbd = React.forwardRef(function Kbd(
  props: BoxProps,
  ref: React.Ref,
) {
  const { colorMode } = useColorMode();
  const bg = { light: "gray.100", dark: "whiteAlpha.50" };
  return (

const FormErrorMessage = forwardRef(function FormErrorMessage(
  props: FormErrorMessageProps,
  ref: React.Ref,
) {
  const { colorMode } = useColorMode();
  const formControl = useFormControl(props);

  const color = {
    light: "red.500",
    dark: "red.300",
  };

  if (!formControl.isInvalid) {
    return null;
  }

  return (

const InputAddon = forwardRef(function InputAddon(
  { placement = "left", size = "md", ...props }: InputAddonProps,
  ref: React.Ref,
) {
  const { colorMode } = useColorMode();
  const bg = { dark: "whiteAlpha.300", light: "gray.100" };
  const _placement = {
    left: {
      mr: "-1px",
      roundedRight: 0,
      borderRightColor: "transparent",
    },
    right: {
      order: 1,
      roundedLeft: 0,
      borderLeftColor: "transparent",
    },
  };

  type Placements = keyof typeof _placement;

export function useAlertIconStyle({
  variant,
  color,
}: Required) {
  const { colorMode } = useColorMode();
  if (["left-accent", "top-accent", "subtle"].includes(variant)) {
    let result = {
      light: { color: `${color}.500` },
      dark: { color: `${color}.200` },
    };

    return result[colorMode];
  }
}

isFullWidth,
    size = "md",
    isDisabled,
    isInvalid,
    onChange,
    onBlur,
    onFocus,
    isIndeterminate,
    children,
    iconColor,
    iconSize = "10px",
    ...rest
  }: CheckboxProps,
  ref: React.Ref,
) {
  const { colorMode } = useColorMode();
  const styleProps = checkboxStyles({ color: variantColor, size, colorMode });

  /**
   *
   * TODO: Improve API to be more declarative
   * 
   *   
   *   Welcome home
   * 
   */

  return (

const FormErrorMessage = forwardRef(function FormErrorMessage(
  props: FormErrorMessageProps,
  ref: React.Ref,
) {
  const { colorMode } = useColorMode();
  const formControl = useFormControl(props);

  const color = {
    light: "red.500",
    dark: "red.300",
  };

  if (!formControl.isInvalid) {
    return null;
  }

  return (

const FormHelperText = forwardRef(function FormHelperText<
  P,
  T extends HTMLElement
>(props: TextProps, ref: React.Ref) {
  const { colorMode } = useColorMode();
  const formControl = useFormControl(props);
  const color = { light: "gray.500", dark: "whiteAlpha.600" };

  return (

export const AvatarBadge = React.forwardRef(function AvatarBadge(
  props: BoxProps,
  ref: React.Ref,
) {
  const { colorMode } = useColorMode();
  const borderColor = { light: "white", dark: "gray.800" };

  return (