Open jordmccord opened 3 months ago
When applying descendant styles to an SVG color prop they change in dark mode.
/
react-native-svg
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', }, } } } ...
Light mode changes color
Dark mode reverts to default colour
@gluestack-style/react@1.0.56, @gluestack-ui/themed@1.1.26
No response
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
Hey @jordmccord, Thanks for reporting the issue. We'll look into it.
Hey @ankit-tailor, did you manage to take a look?
Description
When applying descendant styles to an SVG color prop they change in dark mode.
CodeSandbox/Snack link
/
Steps to reproduce
react-native-svg
e.g:import { Svg } from 'react-native-svg';
const SpinnerSVG = styled( Svg, { color: '$purple800', _dark: { color: '$darkPurple800', }, }, { componentName: 'SpinnerSvg', ancestorStyle: ['_svg'], descendantStyle: ['_circle'], } );
export default SpinnerSVG;
gluestack-ui Version
@gluestack-style/react@1.0.56, @gluestack-ui/themed@1.1.26
Platform
Other Platform
No response
Additional Information
There is also a TS error saying color prop doesn't exist in dark mode see:![Screenshot 2024-05-22 at 10 59 05](https://github.com/gluestack/gluestack-ui/assets/7591840/ba28522d-5fac-4fea-b88f-c1fc7417a43c)
Works fine on web but not on Android or iOS