how to get the color of loaded Schemes in current mode

[surethink]

Ask us any question

I have loaded in the light and dark schemes, then I want to fill in my svg icon with "{Colors.primaryColor}" that doesn't work, The doc says "This features works hand in hand with our modifiers", in my scenario, It is not uilib component, how can I just get the color in current mode(dark/light). there is another scenario with uilib component: ListItem, I want to set the background color in containerStyle, also need to get the color in current mode. I tried to set "bg-primaryColor", not work too

thank you!

[ethanshar]

Hi @surethink Can you share some code, it'll be easier to understand the issue

Thanks

[surethink]

Hi @surethink Can you share some code, it'll be easier to understand the issue

Thanks

sorry for late reply

step 1:load color schemes

`const lightColorScheme = { primaryColor: '#0186f7', } const darkColorScheme = { primaryColor: Colors.blue30, }

Colors.loadSchemes({ light: lightColorScheme, dark: darkColorScheme })`

step2:I'd like to fill the svg component with the primaryColor in current mode(light or dark), but the code below not work <SvgComp height={22} width={22} fill={Colors.primaryColor} style={{ marginRight: Spacings.s2 }} />

[ethanshar]

@surethink This PR should fix your issue https://github.com/wix/react-native-ui-lib/pull/1309

Notice that the Colors object is not a reactive object. That means that changing it won't trigger a render in any way.

You will still need to re-render you screen when the device scheme changes.

You can do it easily by adding a listener to color scheme change In your Screen constructor you can add the following

Appearance.addChangeListener(({colorScheme}) => {
  this.setState({colorScheme})
});