如何在 chakra UI 中为 css 变量添加自定义颜色

Question

这是在我的 index.js 中

<ChakraProvider theme={theme}>
<ColorModeScript initialColorMode={theme.config.initialColorMode} />
  <App />
</ChakraProvider>

这是在我的登陆头.jsx文件中

<HStack border="2px">
  <ButtonGroup  variant="ghost"  spacing={4}>
    <Button textColor={useColorModeValue('custom.100','custom.200')} size="md">Save</Button>
    <Button size="md">Cancel</Button>
    <Button size="md">Save</Button>
    <Button size="md">Cancel</Button>
    <Button size="md">Save</Button>
    <Button size="md">Cancel</Button>
  </ButtonGroup>
</HStack>

这是我的 theme.js

 const styles = {
  global: (props) => ({
    body: {
      bg: mode('#6cb6ff', '#003a75')(props),
    },
    
  }),
  colors:{
    custom:{
        100:'#6cb6ff',
        200:'#003a75'
    }
}
};

const config = {
  initialColorMode: 'system',
  useSystemColorMode: true,
};

const theme = extendTheme({ config, styles });
export default theme;

我已按照说明 here 但它仍然不起作用，正如您在此处看到的