ChakraUI theme colors not working with boxShadow React

Question

In my react project I am trying to apply a box-shadow to my input focus state using a custom color from my ChakraUI theme. I noticed the theme color is not being applied.

          input: {
            fontSize: 'desktop.body',
            _focus: {
              borderColor: 'theme.dark.background',
              boxShadow: '0 0 0 1px theme.dark.background',
            },
          },

I noticed if I set for example: boxShadow: '0 0 0 1px red', the style works as expected with the red color.

How can I get my theme color to apply to the box-shadow? Any advice would be great thanks

Answer 1

boxShadow: '0 0 0 1px var(--chakra-colors-dark-background)',