How to use @chakra-ui/theme - 10 common examples

const useInputStyle = (props: any) => {
  const theme = useTheme();
  const { colorMode } = useColorMode();

  const _props = { ...props, theme, colorMode };

  return {
    width: props.isFullWidth ? "100%" : undefined,
    ...baseProps,
    ...sizeProps(_props),
    ...variantProps(_props),
    // pb: "1px"
  };
};

showBorder,
    borderColor,
    ...props
  }: AvatarProps,
  ref: React.Ref,
) {
  const avatarStyleProps = useAvatarStyle({
    name,
    size,
    showBorder,
    borderColor,
  });
  // const hasLoaded = useHasImageLoaded({ src: src || "" });
  const hasLoaded = false;

  const theme = useTheme();
  const sizeKey = avatarSizes[size];
  const _size = theme.sizes[sizeKey];
  const fontSize = `calc(${_size} / 2.5)`;

  const renderChildren = () => {
    if (src && hasLoaded) {
      return (
        
      );

const Icon = React.forwardRef(function Icon<p>(
  {
    size = "1em",
    name,
    color = "currentColor",
    role = "presentation",
    focusable = "false",
    ...rest
  }: IconProps</p><p>,
  ref: React.Ref,
) {
  const { icons } = useTheme();

  // Fallback in case you pass the wrong name
  const iconFallback = icons["question-outline"];
  let path: JSX.Element = ;
  let viewBox = "0 0 24 24";

  if (name) {
    path = icons[name] == null ? iconFallback.path : icons[name].path;

    viewBox =
      (icons[name] == null ? iconFallback.viewBox : icons[name].viewBox) ||
      "0 0 24 24";
  }

  return (
    </p>

const Comp = (props: any, ref: React.Ref) => {
    const theme = useTheme();
    const componentTheme = theme[__themeKey as keyof Theme];

    let styleProps: Record = {};

    // constraints. We'll only allow variant, variantColor and size to be theme-aware
    const themeable = ["__size", "__variant", "__variantColor"];

    for (const key of themeable) {
      // Get the component style for any of the themeable props
      const themedStyle =
        componentTheme &&
        componentTheme[key] &&
        componentTheme[key][(props as any)[key]];

      styleProps = {
        ...styleProps,

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 (