so I am currently working with the stitches styling library and the radix-ui library. I am using the theme feature (darkTheme/lightTheme).

It all works perfectly in updating all but one of the radix-ui components.

The Dropdown.Content doesn't get updated right and I don't understand why. I am currently passing in a $backgroundColor to the styles and instead of it changing depending on the theme, it sticks to the color from the default theme.

This is the code from my styles.ts file:

export const DropdownContent = styled(DropdownMenu.Content, {
  background: '$backgroundColor',
  border: '2px solid $borderColor',
)},

This is a snippet from my stitches.config.ts file:

export const {
  styled,
  css,
  globalCss,
  keyframes,
  theme,
  createTheme,
  config,
} = createStitches({
  theme: {
    colors: {
      backgroundColor: '#ffffff',
      borderColor: '#E5E8EB',
    },
    space: {},
    fonts: {},
  },
  media: {},
  utils: {},
});

export const darkTheme = createTheme({
  colors: {
    backgroundColor: '#141416',
    borderColor: '#353945',
  }
});