[NATIVE] Switch theme depending on users preference

0
Hi everyone!  We are converting our Hybrid Phone app to a native app and in the current app, the user has the option to choose between two themes. In our Hybrid app we use the CssClassSwitcher widget for this, and when the user selects the other theme, a class is added to the layout and in that class I have specified the different colors for that specific theme. Works like a charm.  Now we want to build this in native and I don't know what's the best or easiest (most fool-proof) way to do this. Does anyone have a suggestion?  Our project is currently in Mendix 8.13.1    Thanks a lot! 
asked
3 answers
3

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. 

answered
2

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.

answered
-1

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

answered