How to set theme in local storage?

Question

i created a method that change the theme of my app.

I tried to pass a theme variable to localstorage but without success, no effects.

I'd like to save the result of condition in local storage, so if i change route i can see the same theme setted before.

  @HostBinding('class.light-theme') lightTheme: boolean = false;
  @HostBinding('class.dark-theme') darkTheme: boolean = true;
  theme: string = 'Dark';

  toggleTheme(): void {

    if (this.theme === 'Light') {
      this.lightTheme = false;
      this.darkTheme = true;
      this.theme = 'Dark';
    } else {
      this.darkTheme = false;
      this.lightTheme = true;
      this.theme = 'Light';
    }
  }
}

Possible duplicate of [Local storage in Angular 2](https://stackoverflow.com/questions/40589730/local-storage-in-angular-2) — zronn, Jun 25 '19 at 08:56

score 1 · Accepted Answer · answered Jun 25 '19 at 09:01

1

This should work:

  theme: string = localStorage.getItem('theme');
  @HostBinding('class.light-theme') lightTheme: boolean = this.theme === 'Light';
  @HostBinding('class.dark-theme') darkTheme: boolean = this.theme === 'Dark';

  toggleTheme(): void {

    if (this.theme === 'Light') {
      this.lightTheme = false;
      this.darkTheme = true;
      this.theme = 'Dark';
    } else {
      this.darkTheme = false;
      this.lightTheme = true;
      this.theme = 'Light';
    }
    localStorage.setItem('theme', this.theme);
  }
}

You probably should inject localStorage via dependency injection but thats other subject.

answered Jun 25 '19 at 09:01

Xesenix

2,418
15
30

How to set light theme as default? If i don't set a defualt theme, i can't see any theme – mantegnous Jun 25 '19 at 09:14
`theme: string = localStorage.getItem('theme') || 'Light';` this should work if theme is undefined it will use whatever is on right side of `||` – Xesenix Jun 25 '19 at 11:16

score 0 · Answer 2 · answered Jun 25 '19 at 08:55

0

You can use it like this --> localStorage.setItem('name', item); https://developer.mozilla.org/de/docs/Web/API/Window/localStorage

answered Jun 25 '19 at 08:55

frobi

23
6

score 0 · Answer 3 · answered Jun 25 '19 at 08:59

0

You can also use angular-storage npm page to store data.

store.set('number', 2)

https://www.npmjs.com/package/angular-storage

It's simple to use and read.

Major banifit is that u can store object, number etc

answered Jun 25 '19 at 08:59

Hassan Ali

994
6
22

How to set theme in local storage?

3 Answers3