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

Ionic Framework Ionic Angular
1

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 (https://myserver.com/custom-styles.css) 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 ?

Thanks.

2

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)
my-variables.css:


: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:

<head>
  <!-- ... -->
  <link href="https://myserver.com/my-variables.css" rel="stylesheet">
</head>

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