Property '$colorMode' does not exist on type ...

[kentbull]

The $colorMode property doesn't appear to work correctly with a fresh install of this template. The following error shows up on build:

src/components/ThemeToggleButton.tsx:18:12 - error TS2339: Property '$colorMode' does not exist on type '(MergeWithAs<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, any, IconButtonProps, As> & { ...; }) & { ...; }'.

With the following source:

import { MoonIcon, SunIcon } from '@chakra-ui/icons';
import { IconButton, IconButtonProps, useColorMode } from '@chakra-ui/react';
import styled from '@emotion/styled';

import transientOptions from '../utils/general';

// PROP TYPES
type ThemeToggleButtonProps = Omit<IconButtonProps, 'aria-label'>;

// CONSTS and LETS
const iconSize = 20;

const RoundButton = styled(IconButton, transientOptions)`
  box-shadow: 0 0 100px 20px
    ${({ $colorMode }) => ($colorMode === 'light' ? 'black' : 'white')};
  & svg {
    width: ${iconSize}px;
    height: ${iconSize}px;
  }
`;

function ThemeToggleButton(props: ThemeToggleButtonProps): JSX.Element {
  const { colorMode, toggleColorMode } = useColorMode();

  return (
    <RoundButton
      $colorMode={colorMode}
      onClick={toggleColorMode}
      icon={colorMode === 'light' ? <MoonIcon /> : <SunIcon />}
      aria-label={`Activate ${colorMode === 'light' ? 'dark' : 'light'} mode`}
      isRound
      {...props}
    />
  );
}

export default ThemeToggleButton;

This is after starting a project with npx degit The24thDS/vite-reactts18-chakra-jest-husky verifier-portal today.

[kentbull]

Changing the RoundButton to the following worked for me:

const RoundButton = styled(IconButton, transientOptions)`
    box-shadow: 0 0 100px 20px
      ${colorMode === 'light' ? 'black' : 'white'};
    & svg {
      width: ${iconSize}px;
      height: ${iconSize}px;
    }
  `;