Inject external CSS from URL to change the style of the app

Hello everyone !

I’m facing an issue here !

In my project, we would like to change the CSS of an application for example the colors without creating a new version.

The idea is to load the CSS from a server ( when the application can connect to internet and use the local css when it’s offline.

Do you have a lead or even better, a solution to this problem ?


As it turns out it is possible and to be honest I’m shocked.
What I did was
1 - create a .css file that replaces the colors of application (basically a copy of the variables.scss file)

:root {
  /** primary **/
  --ion-color-primary: #ff0000 !important;
  --ion-color-primary-rgb: 255,0,0 !important;
  --ion-color-primary-contrast: #ffffff !important;
  --ion-color-primary-contrast-rgb: 255,255,255 !important;
  --ion-color-primary-shade: #e00000 !important;
  --ion-color-primary-tint: #ff1a1a !important;

2 - Upload that file to the server (duh)
3 - Link the file in the index.html:

  <!-- ... -->
  <link href="" rel="stylesheet">

And that is it! no need to do anything else. Can someone explain if it may cause any problems?

P.S: I didn’t test in production