How can I get a color css variables from Theme to pass as props?

[gvocale]

I need to pass a color variable as prop to a component:

// theme.ts
export default makeTheme({
  alertIcons: {
    success: {
      fill: 'textInverse',
      stroke: 'success',
    },
  },
})

<CustomIcon colorFill={getColor('alertsIcons.success.fill'} colorStroke={getColor('alertsIcons.success.stroke')}/>

Is there a way to get the color variable out of a theme in similar fashion?

[lachlanjc]

Yep, absolutely! You can use the useThemeUI() hook, like this:

const { theme } = useThemeUI()
return <CustomIcon colorFill={theme.alertsIcons.success.fill} colorStroke={theme.alertsIcons.success.stroke} />