I am trying out the scheduler in an Ionic 4 / Angular application, so have the scss file linked in via angular.json file, as per the example Ionic example, ie
However, when I load, I just get the dark theme (which is actually what I thought would happen) , and the DomHelper.setTheme does not do the swapping, so how would I include (or load) 2 themes to I can swap at runtime?
Hello.
DomHelper.setTheme works like this:
1. it creates new <link> element which points to the new theme
2. appends it to the DOM, which makes browser to load new theme
3. on success, DomHelper removes old link element, leaving new one in place
Theme name should be just 'light', 'dark' etc, no prefix.
Try to debug this and see which theme.css gets loaded? Is new css loading when you change the theme?
So in order to make embedded theming work, you need to have this element. But since theming is only loading proper styles on the page, you can implement this yourself. You just need a code which would remove old theme css and load new theme css (which is what our themes do).
Im afraid there is no such demo.
AFAIK build tools tend to put all css to one bundle, which is why adding all themes to build doesn't make sense.
I can suggest to try this approach:
1. exclude them from the build, copy to build folder manually (or with an extension of the build script)
2. when app starts add default theme stylesheet to the head element, pointing them to build folder styles. Affter this DomHelper.setTheme should just work