CSS style injection not working

Dear Ionic experts, I have spent several hours trying to get this to work and could not get it working, yet. I also searched the forum and the internet, but still could not find a solution. So I was hoping someone here could help me.

What I want to do is to change the colorscheme of the app during runtime using a css file from a server.

I inject the css file using this code:

head.append($compile("<link class='cssinjectorInjectedCss' data-ng-repeat='stylesheet in injectedStylesheets' data-ng-href='" + $interpolateProvider.startSymbol() + "stylesheet.href" + $interpolateProvider.endSymbol() + "' rel='stylesheet' />")(scope)); // Found here : http://stackoverflow.com/a/11913182/1662766

css files are stored in the application data folder and file urls are added to the injectedStylesheets variable using:

scope.injectedStylesheets.push({href: href});

Loading the css on app start works perfectly!

But when I remove the stylesheet (or one of the stylesheets) or when I change the contents of the css file and try to re-add it to the injectedStylesheets array, nothing changes; i.e. the colors of the app do not change but remain the same.

What am I doing wrong or what am I missing?

To update the GUI to adapt the new styles I tried the following:


I also tried to completely disable caching in the .html template of the view as well as in the state config (using cache: false in the data object of the state)

In addition I tried:


I also tried this:

this.$location.path('/app'); //<-- this is the base-url of the app which is an abstract state; all other states are child states of this state

Unfortunately nothing works.

Can anyone tell me what I can do to completely reload the app, so the CSS get updated!? Would be great! Thank you! Kind regards

Hi @it4process

sorry for asking this, but did you try setting !important flag in your css files for the color overrides?