Change theme and color schema onload Apollo 14

[fensefernando]

Hi!

I tried to save theme and color schema on localStorage.setItem when change it. I use app.config component in other component.

My code in other component is:

constructor(private formBuilder: FormBuilder,
private route: ActivatedRoute,
private router: Router,
private layoutService: HomeLayoutService,
private config: AppConfigComponent,
) { }

ngOnInit(): void {
if (localStorage.getItem('style')) {
let style = JSON.parse(localStorage.getItem('style')!);
this.config.changeColorScheme(style.colorScheme);
this.config.changeTheme(style.theme);
}
}


But not found. Any idea or suggestion for this objective.

[cetincakiroglu]

Hi,

If you need something that updates your theme by changing the config object in layout.service. You need to implement your own logic by managing subjects and subscriptions.

You can change your theme with changeTheme function in app.config.component. You need to change theme css links in the index.html, that's why you don't see any changes you're just changing the config object in the layout.service

Example code below

In app.layout.service

Code: Select all

  onConfigUpdate() {
        this.configUpdate.next(this.config);
        localStorage.setItem('config', JSON.stringify(this.config)) // sets config to local storage every time it changes.
    }

In app.config.component.ts

Code: Select all

    
    constructor(public layoutService: LayoutService, public menuService: MenuService) { 
        this.layoutService.configUpdate.next(this.config)
        let config = JSON.parse(localStorage.getItem('config')!); // I saved whole config object in this case
        this.changeTheme(config.theme)
    }