Ionic discards changes in global css variable after closing the app-CodePudding

I want to enable my users to set certain global colors when using the app. Therefor I have created a 'dynamicVariables.css' file:


:root {
--my-color: violet;
}

It is imported in 'global.scss' file:

@import "./theme/dynamicVariables.css";

Also, I've added a colorpicker on one page and I can set the --my-color variable fine from there.

  onColorChange(data: any) {
    document.documentElement.style.setProperty('--my-color', data);
  }

Just when closing the app on my device (I've deployed it with ionic capacitor run android), it resets the css variable, because when I run it again the color is back to its default value.

I'm pretty sure, I have a general misconception here and would be grateful for some clarification. I'm generally new to web development and would be grateful for any help.

Thanks in advance.

CodePudding user response：

just like how Mustafa explained in comments, you need to make these changes outside app "runtime" and in the device's memory, that would stay there even after the app (whether web or native) is closed. for example you can use ionic storage and save your data with keys and values same as your css keys, and load it up whenever the app opens.

CodePudding user response：

Thanks to the responds, I was able to solve the problem with the help of Ionic Storage.

First, I created a Storage Service:

import { Storage } from '@ionic/storage-angular';
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})

export class StorageService {
  private _storage: Storage | null = null;

  constructor(private storage: Storage) {
  }

  async init() {
    const storage = await this.storage.create();
    this._storage = storage;
  }

  public set(key: string, value: any) {
    this._storage?.set(key, value);
  }

  public get(key: string) {
    return this._storage?.get(key);
  }
}

When starting the app, I run the following code in the app.component.ts

  async ngOnInit() {
    await this.storageService.init();
    
    let storedPathologicalColor = await this.storageService.get('--my-color');

    if (storedPathologicalColor == null)
      document.documentElement.style.setProperty('--my-color', getComputedStyle(document.documentElement).getPropertyValue('--my-color'))
    else
      document.documentElement.style.setProperty('--my-color', storedPathologicalColor);
  }

It is important to init() the service from outside. When setting a new css variable, I also set a new key/value pair to the Storage.

Thanks again.