TS: ChakraTheme typings cause some errors

🐛 Bug report

When using the ChakraTheme type, colors aren’t correctly typechecked.

💥 Steps to reproduce

import { ChakraTheme, useTheme } from "@chakra-ui/react";

export default function MyComponent() {
  const theme = useTheme<ChakraTheme>();
  console.log(theme.colors.purple[100]); // type error
  // ...

TS7053: Element implicitly has an 'any' type because expression of type '100' can't be used to index type
'RecursiveProperty<string | Record<string, Partial<ColorHues>>>'.   Property '100' does not exist on type
'RecursiveProperty<string | Record<string, Partial<ColorHues>>>'.

💻 Link to reproduction

I tried to create a reproduction, but the error did not show up in CodeSandbox…

🌍 System information

Software	Version(s)
Chakra UI	1.6.2
Browser	Chrome 90.0.4430.212
Operating System	Windows 10

[TimKolberger]

The type ChakraTheme is an interface, which describes how a Chakra UI theme looks like. It does not reflect the types for the default theme or your custom theme.

The error your are reporting is coming from the loose object structure we allow in the ChakraTheme. You could create a custom theme which only has this colors setup:

const myVeryCustomTheme: ChakraTheme = {
  colors: {
    purple: 'rebeccapurple'
  }
  //...
}

With this theme in place this would fail: theme.colors.purple[100].

Use the type Theme for the default theme typings or create your own type for your custom theme:

import { Theme, useTheme } from '@chakra-ui/react'

export default function MyComponent() {
  const theme = useTheme<Theme>();
  console.log(theme.colors.purple[100]); 
  // ...

or with a custom theme:

import { extendTheme, useTheme } from '@chakra-ui/react'

const customTheme = extendTheme({ /*...*/ }) // use this in <ChakraProvider theme={customTheme} />
type CustomTheme = typeof customTheme

export default function MyComponent() {
  const theme = useTheme<CustomTheme>();
  console.log(theme.colors.purple[100]); 
  // ...

[Inayat-C]

Am I missing something? As per the above instructions I’m trying to get access to my custom theme typings but it doesn’t seem to work?