The native theme gets loaded during app start so you can't dynamically add or change styling classes. Maybe the 8.14 dynamic classes can help? I usually have some device or user context entity as page parameter on all pages, would be easy to set the selected theme (enum?) on there. That would also mean putting classes pretty much anywhere, which is tedious and error prone. If you could limit your theme a bit to headers and backgrounds or buttons, that could help.
It is an option, however I hope there is a better alternative. As native styling is JavaScript it would be nice if we could access the current theme from JS actions.
I’ve done something similar in my Native Mobile app. Not 100% identical to your usecase, but i wanted different colour schemes on different pages. All Native pages have the option to have a page class. I placed a class on the page level of each page to represent a different colour. Then in the javascript styling i then used this class as the parent class to wrapper all the other styles.
export const pageRed = {
header: {
container: {
// All ViewStyle properties are allowed
backgroundColor: brand.red,
},
},
statusBar: {
// Android only
backgroundColor: brand.red,
},
}
export const pageGreen = {
header: {
container: {
// All ViewStyle properties are allowed
backgroundColor: brand.green,
},
},
statusBar: {
// Android only
backgroundColor: brand.green,
},
}
Next you’ll need to figure out how to change the page class using a js action potentially. Dynamic classes could also work but this would mean you would only be able to change the style of content placed inside the container. Whereas if you’re able to change the page class this would then allow you to apply the design to the whole page including the status bar and navigation.
something like this would probably help.
being able to set a bolean, and it resulting in putting a glass in the top level of your DOM.
https://forum.mendix.com/link/ideas/2142
https://forum.mendix.com/link/ideas/1548