Load styles in Ionic dynamically from a file downloaded via http

First, sorry for my English...

I'm trying to develop an app with standalone Angular/Ionic using Capacitor. I would like it to have pre-established styles by default and for them to be declared in my variables file within the theme folder.

At the beginning of loading the app I check whether or not it is configured to redirect to the configuration page in the '/config' path to collect some user values and download its configuration file:

private async ionViewDidEnter(): Promise<void> {
Promise.all([
this._services._storage.getItem('configClient', true),
this._services._storage.getItem('news', true),
this._services._storage.getItem('chg_pin', true),
this._services._storage.getItem('user', true),
this._services._storage.getItem('remember', true),
])
.then(async (responses) => {
// Mostrar pagina de configuración o no si es la primera vez que se conecta.
if(responses[0] == null) {
this._services._router.navigate(['/config']);
}else {
//Carga de configuracion y estilos del cliente si ya se ha conectado alguna vez
await this._services._configuration.getStorageClientConfig();

}
})
.catch((e) => {
console.error('ErrorInitLogin', e.message);
})
.finally(() => {
this._services.splashscreen.hide();
});
}


If you do not have previous configuration:

public async sendConfig(configForm): Promise<void> {
if(this.configForm.invalid) return;
await this._services._loading.showLoading(this._services._translate.instant('pages.configuration.sending_data'), 0);
this._services._configuration.initClientConfig()
.then(() => {
this._services._loading.dismiss();
this._services._menu.swipeGesture(true, 'menu-ctx');
this._services._router.navigate(['login']);
})
.catch(() => {
this._services._loading.dismiss();
this._services._toast.showToast(this._services._translate.instant('pages.configuration.error_sending_data'), 'bottom', 'danger');
});
}


Then I call a configuration service that downloads a configuration file for that user from an ftp server.

public initClientConfig(): Promise<boolean> {
return new Promise((resolve, reject) => {
// Recuperar Configuración desde servidor
this.getConfig()
.then((response) => {
// Establecer Servidores
this.setAppServer();
//Inicializar Modulos
this.setAppModules();
resolve(true);
});
});
}


The service downloads the file as follows:

public getConfig(): Promise<ConfiguracionCliente> {
return new Promise((resolve) => {
this._http.send(
this.currentClient.url,
'GET',
{},
[
{
"x-auth-header": "**********************************"
}
]
)
.then(async (response: ConfiguracionCliente) => {
this.clientConfig = response;
if(this.clientConfig && !GenericMethods.isNullOrEmpty(this.clientConfig.build)) {
this._storage.setItem('configClient', this.clientConfig, true);
this._theme.initClientTheme(this.clientConfig);
if(this.clientConfig.servers?.length > 0) {
this._server.servers = this.clientConfig.servers;
}
if(this.clientConfig.modulos?.length > 0) {
this._modules.arrayModules = this.clientConfig.modulos;
}
if(!GenericMethods.isNullOrEmpty(this._app.appInfo.version) && (this._app.appInfo.version < this.clientConfig.version)) {
this.showPermissions = true;
const version = await this._modal.create({
component: ModalVersion,
id: 'version',
initialBreakpoint: 1,
breakpoints: [0, 1],
backdropDismiss: false
});
await version.present();
}
}
resolve(this.clientConfig);
})
.catch((e) => {
console.error('ErrorGetClientConfig: ', e.message);
this.getStorageClientConfig()
.then((response) => {
if(response) {
resolve(this.clientConfig);
}else {
resolve(null);
}
})
});
})
}


From that file I get the name of the client, its logo, servers, modules and a property with the styles as follows

{
"version": "3.0.0",
"build": 81,
"usuario": "NombreUsuario",
"logo": "https://url_que_apunta_al_logo",
"servers": [
{...},
{...}
],
"modules": [
{...},
{...}
],
"theme": {
"primary": "#FF6600 !important",
"primary-rgb": "255,102,0 !important",
"primary-contrast": "#ffffff !important",
"primary-contrast-rgb": "0,0,0 !important",
"primary-shade": "#e05a00 !important",
"primary-tint": "#ff751a !important",

"secondary": "#FF8D00 !important",
"secondary-rgb": "255,141,0 !important",
"secondary-contrast": "#ffffff !important",
"secondary-contrast-rgb": "0,0,0 !important",
"secondary-shade": "#e07c00 !important",
"secondary-tint": "#ff981a !important",

"tertiary": "#FFC299 !important",
"tertiary-rgb": "255,194,153 !important",
"tertiary-contrast": "#ffffff !important",
"tertiary-contrast-rgb": "0,0,0 !important",
"tertiary-shade": "#e0ab87 !important",
"tertiary-tint": "#ffc8a3 !important",

"success": "#439467 !important",
"success-rgb": "67,148,103 !important",
"success-contrast": "#ffffff !important",
"success-contrast-rgb": "255,255,255 !important",
"success-shade": "#3b825b !important",
"success-tint": "#569f76 !important",

"warning": "#FF8D00 !important",
"warning-rgb": "255,141,0 !important",
"warning-contrast": "#000000 !important",
"warning-contrast-rgb": "0,0,0 !important",
"warning-shade": "#e07c00 !important",
"warning-tint": "#ff981a !important",

"danger": "#CE352C !important",
"danger-rgb": "206,53,44 !important",
"danger-contrast": "#ffffff !important",
"danger-contrast-rgb": "255,255,255 !important",
"danger-shade": "#b52f27 !important",
"danger-tint": "#d34941 !important",

"dark": "#222222 !important",
"dark-rgb": "34,34,34 !important",
"dark-contrast": "#ffffff !important",
"dark-contrast-rgb": "255,255,255 !important",
"dark-shade": "#1e1e1e !important",
"dark-tint": "#383838 !important",

"medium": "#999999 !important",
"medium-rgb": "153,153,153 !important",
"medium-contrast": "#000000 !important",
"medium-contrast-rgb": "0,0,0 !important",
"medium-shade": "#878787 !important",
"medium-tint": "#a3a3a3 !important",

"light": "#f7f7f7 !important",
"light-rgb": "247,247,247 !important",
"light-contrast": "#000000 !important",
"light-contrast-rgb": "0,0,0 !important",
"light-shade": "#d9d9d9 !important",
"light-tint": "#f8f8f8 !important",

"header": "#e05a00 !important",
"header-rgb": "224,90,0 !important",
"header-contrast": "#ffffff !important",
"header-contrast-rgb": "255,255,255 !important",
"header-shade": "#c54f00 !important",
"header-tint": "#e36b1a !important"
}
}


The configuration service, once the file is downloaded, calls the theme service to start the theme configuration with the values brought from the downloaded file as follows:

public initClientTheme(clientConfig: ConfiguracionCliente): Promise<boolean> {
return new Promise((resolve) => {
if(clientConfig && clientConfig.theme) {
this.nameEmpresa = clientConfig.empresa;
this.logo = clientConfig.logo;
this.temaCliente = clientConfig.theme;
this.ngZone.run(() => {
Object.keys(this.temaCliente).forEach((key) => {
this.render.setStyle(document.documentElement, `--ion-color-${key}`, this.temaCliente[key]);
});
});
resolve(true);
}else {
console.error('ErrorInitClientTheme');
resolve(false);
}
console.log(`--ion-color-primary: ${JSON.stringify(document.documentElement.style)}`);
});
}


The fact is that in that last 'console.log(--ion-color-primary: ${JSON.stringify(document.documentElement.style)})' it prints the values of the :root with the variables and values brought from the configuration file, but it is not rendered with the new colors, but with the previous ones...

Any ideas on how to dynamically change the styles of the application based on the downloaded file and how to make it persistent so that those styles are loaded whenever the app is reopened once configured to start?

Thanks guys!!!

I would like to know if any of you can think of how I can download that configuration file and with it configure my application based on the logged in user, placing their styles and making them persistent whenever the application is opened.

Continue reading...