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:
```js
...
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

• [X] Expo
• [ ] React Native CLI
• [ ] Next
• [ ] Web
• [X] Android
• [X] 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?