Is it possible to apply a theme globally based on element type?

Website, docs & demos
1

I realize I can set the theme globally like this:

mobiscroll4.settings = { theme: 'auto', themeVariant: 'light', lang: js_locale, dateFormat: js_dateformat };

And I can specify a theme in the control initialization code like this:

$('#businessreport').mobiscroll4().listview({
        swipe: false,
        enhance: true,
        theme: 'ios'
    });

But what I’m finding is that I like the ios theme style for certain components but not for others so I’d like to be able to say for example, apply the ios theme to all listview, navigation and eventcalendar components globally, but apply the mobiscroll theme to all buttons and popups globally.

And in fact, I’m finding it difficult to allow mobiscroll to apply themes automatically because the ios theme in particular quite often doesn’t work well with the rest of my site, in particular a white background (the buttons pretty much disappear leaving only the button text, and disabled buttons are all grey including the text making them impossible to read).

So what would be the easiest way to say, never use ios styling on buttons or popups, but everything else is fine, and always use ios styling on listview, nav and calendar controls but use ‘auto’ for all other controls. Is this possible?

2

Hi @Vincent_Wansink :wave:

The solution would be to set the ios theme globally and override it at the component level if you want to add other themes to specific components.

3

What if I wanted to override the theme on a form component, which is auto-initialized, like mbsc-segmented? How can I apply the iOS theme to that component specifically when my global theme is set to windows? (using mobiscroll version 4)

4

Hello @Vincent_Wansink,

In this case I would suggest to define the themes on a component level instead of a using global theme and initialize your form (with the form components inside) manually as well. This way you can prevent mixing the themes.