Dynamic Styles

[8BallBomBom]

I've been playing with dynamic styles recently to allow an app to change between light and dark colour schemes without restarting. What i've noticed though is you can't dynamically change the screenBackgroundColor which can result in weird effects.

Here is what i'm dealing with.

The app runs in light mode by default and the screen background colour is set as white. When changing to dark mode the screen background remains white but as the view itself has a black background you can't tell that the actual screens background colour is still white as the views background renders over that. But say you open the keyboard? you'll actually see the screens background colour flash up for a second. Basically creating an undesired effect when dark mode uses a different background colour.

Would it be possible to have the option as dynamic?

[listenzz]

已支持动态更新 screenBackgroundColor

[8BallBomBom]

screenBackgroundColor wasn't in the dynamic options list and doesn't seem to be working as a dynamic option, possible option that was meant to be supported? bug?

[listenzz]

在的，文档未更新。

garden.updateOptions({
    screenBackgroundColor: '#F8F8F8',
})

[8BallBomBom]

Ahhhhhh my bad didn't realise you added it to the supported list, absolutely amazing, thank you 👍🏻

I do have another question, is there any way to have the top bar right buttons tint colour set globally as an override? I'm trying to have a higher order component essentially deal with all the theming in one place.

As far as i can tell if a screen uses the top right buttons then it would have to re-define the top buttons when they are gonna change colour?

[8BallBomBom]

Also found a bug with the top left and right buttons. When changing topBarColor from white to black the buttons touch effect doesn't work anymore unless i change the theme back to white or re-render the screen.

Seems to only happen when the button touch colour is the same after each background colour change. Both white and black backgrounds make the buttons have the dark grey like touch effect colour. But if i change to a different background colour like something bright then the touch effect colour becomes light white and then it works fine when the background colours are changed.

Could screen record to show, just a minor detail really 😃

[listenzz]

Ahhhhhh my bad didn't realise you added it to the supported list, absolutely amazing, thank you 👍🏻

I do have another question, is there any way to have the top bar right buttons tint colour set globally as an override? I'm trying to have a higher order component essentially deal with all the theming in one place.

As far as i can tell if a screen uses the top right buttons then it would have to re-define the top buttons when they are gonna change colour?

更改按钮颜色，topBarTintColor 无法满足你的需求吗？

garden.updateOptions({
  topBarTintColor: '#00FF00',
})

[listenzz]

可以单独改变 button 的颜色，不需要重新定义整个 button

garden.setRightBarButtonItem({
      tintColor: '#FF0000',
 })

[listenzz]

Also found a bug with the top left and right buttons. When changing topBarColor from white to black the buttons touch effect doesn't work anymore unless i change the theme back to white or re-render the screen.

Seems to only happen when the button touch colour is the same after each background colour change. Both white and black backgrounds make the buttons have the dark grey like touch effect colour. But if i change to a different background colour like something bright then the touch effect colour becomes light white and then it works fine when the background colours are changed.

Could screen record to show, just a minor detail really 😃

可以录个屏

[8BallBomBom]

topBarTintColor seems to change the button colour rather than the actual button press effect colour. Also only changes the left button colour rather than also the right buttons. Will try and record something showing the press effect issue.

[8BallBomBom]

Just realised after recording, the button effect is changing but it seems to be changing to the wrong colour. Sorry i am a little blind.

Will try and get the right button updating working and report back, thanks for that 👍🏻 Question is how would you apply garden.setRightBarButtonItem to multiple buttons? or would that cover all of them?

[8BallBomBom]

Found another issue as well in relation to the header buttons changing colour. If i have more than 1 right button then when changing from dark mode to light mode they won't change colour. Even if i'm updating the topBarTintColor but if i only have 1 right button then it does indeed change colour. Is that a bug or is there another way to update multiple buttons without recreating them?

[8BallBomBom]

Alright so i solved that issue by using garden.setRightBarButtonItems and just only using the tintColor property per defined button for the update process.

As for the button press effect, that is still an issue but mostly just ignored it for now.