SVG descendant styles not being applied in dark mode

[jordmccord]

Description

When applying descendant styles to an SVG color prop they change in dark mode.

CodeSandbox/Snack link

/

Steps to reproduce

1. Create styled component using Svg from react-native-svg e.g:

import { styled } from '@gluestack-style/react';

import { Svg } from 'react-native-svg';

const SpinnerSVG = styled(
  Svg,
  {
    color: '$purple800',
    _dark: {
      color: '$darkPurple800',
    },
  },
  {
    componentName: 'SpinnerSvg',
    ancestorStyle: ['_svg'],
    descendantStyle: ['_circle'],
  }
);

export default SpinnerSVG;

2. Use that component in a parent component like Button
3. Style the child component e.g Button.ts blue variant:

...
blue: {
  _spinner: {
    _svg: {
      color: '$blue400',
    },
  },
  _dark: {
    _spinner: {
      _svg: {
        color: '$darkBlue400',
      },
    }
  }
}
...

4. See the SVG color only change in light mode

Light mode changes color

Dark mode reverts to default colour

gluestack-ui Version

@gluestack-style/react@1.0.56, @gluestack-ui/themed@1.1.26

Platform

• Expo
• React Native CLI
• Next
• Web
• Android
• iOS

Other Platform

No response

Additional Information

There is also a TS error saying color prop doesn't exist in dark mode see:

Works fine on web but not on Android or iOS

[ankit-tailor]

Hey @jordmccord, Thanks for reporting the issue. We'll look into it.

[jordmccord]

Hey @ankit-tailor, did you manage to take a look?