Access nested colors?

I looked for a similar issue, but couldn’t find one, realizing I may not know exactly how to ask this question, but here goes:

Is there a way to access nested colors defined in theme.js? E.g., if I have a theme like:

initialColorMode: 'default',
  useCustomProperties: true,
  colors: {
    text: "#000",
    background: "#fff",
    base: {
       primary: "#..",
       secondary: "#.."
    },
    accent: { ... },
    modes: {
      saturated: {
         base: {
             primary: "#...",
             secondary: "#..."
         }, ...
    }
}

is there a way in the sx prop to refer to these nested values so that I can flip the colorMode switch and the nested values of the mode get chosen?

I’ve had no luck with:

<div
      sx={{
        backgroundColor: 'base.primary',
      }}
    >

but using useThemeUI like:

  const context = useThemeUI()
  const {
    theme
  } = context

// then...
   <div
      sx={{
        backgroundColor: theme.colors.base.primary,
        padding: '20px 0',
        width: '100%'
      }}
    >

works, but doesn’t this marry the component to the default colorMode?

[jxnblk]

The useThemeUI hook had a bug where the color mode was not reflected in context.theme, but that should have been fixed in #226

Generally, the first approach with backgroundColor: 'base.primary' should work, but you might’ve found a bug. I’ll look into this to see if I can reproduce it

[jxnblk]

Closing as duplicate of #224