theme-setting

display-setting.component.ts

import {Component, OnInit, Renderer2} from '@angular/core';
import {NgbActiveModal} from '@ng-bootstrap/ng-bootstrap';
import {ThemeService} from 'src/app/services/theme.service';
import { InspaaceStorageService } from 'src/app/services/inspaace-storage.service';
import { InspaaceHttpService } from 'src/app/services/inspaace-http.service';

@Component({
  selector: 'app-display-setting',
  templateUrl: './display-setting.component.html',
  styleUrls: ['./display-setting.component.css']
})
export class DisplaySettingComponent implements OnInit {
  themeName: any
  loggedInUserDetails: any;
  backgroundTheme: any;
  constructor(private activeModal: NgbActiveModal, private themService: ThemeService, private storageService: InspaaceStorageService,
    private inspaaceHttpService: InspaaceHttpService, private renderer: Renderer2) { }

  ngOnInit() {
    this.loggedInUserDetails = this.storageService.get('currentUser');
    this.themeName = this.loggedInUserDetails.themeColor
    this.backgroundTheme = this.loggedInUserDetails.backgroundTheme
  }

  dismiss() {
    this.activeModal.close();
  }

  toggleTheme() {
    switch (this.backgroundTheme) {
      case 'dim-layout':
        this.renderer.addClass(document.body, 'dim-layout');
        this.renderer.removeClass(document.body, 'light-out-layout');
        break;
      case 'light-out-layout':
        this.renderer.addClass(document.body, 'light-out-layout');
        this.renderer.removeClass(document.body, 'dim-layout');
        break;
      default:
        this.renderer.removeClass(document.body, 'dim-layout');
        this.renderer.removeClass(document.body, 'light-out-layout');
        break;
    }
    this.themService.updateTheme(this.themeName);
    this.themService.setActiveThem(this.themeName);
    this.inspaaceHttpService.makeRequestApi('post', 'updateProfile', {
      themeColor: this.themeName,
      backgroundTheme: this.backgroundTheme,
      primaryKey: this.loggedInUserDetails.primaryKey,
    }).subscribe((res) => {
      if (!res.isError) {
        this.storageService.set('currentUser', Object.assign(this.storageService.get('currentUser'), {
          themeColor: this.themeName,
          backgroundTheme: this.backgroundTheme
        }));
      } else {
      }
    }, err => {
      console.log(err);
    });
    this.dismiss()
  }

}

theme.css

:root {
  --primary-color: #fff;
  --background-color: #e5e5e5;
  --text-color: #2d2d2d;
  --stroke: #000000;
}
.badge-theme {
  background-color: var(--background-color);
  color: var(--text-color);
  font-family: Lato;
  padding: 0;
  margin: 0;
}


/* ustom.css in assset folder */

.user-post-text h5 a{
  color: var(--background-color);
}

.header .link-icon.headerIconTheme {
  fill: var(--background-color) !important;
  stroke: var(--background-color) !important;
}

.load-more-comments a{
  color: var(--background-color) !important;
}

.chat-icon-fixed,
.btn-orange,
.btn-share,
.chat-you .chat-lists{
  background: var(--background-color) !important;
}


.light-out-layout .fixed-sidebar ul li:hover a .right-sidebar-icon .cls-2,
.light-out-layout .fixed-sidebar ul li:hover a .right-sidebar-icon .cls-3 {stroke: #333;}
.light-out-layout img.icon-yellow{display: none;}
.light-out-layout img.icon-white{display: inline-block;}
/* .light-out-layout .theme-base-icon{stroke: #fff;}
.light-out-layout .theme-base-icon.theme-base-fill .cls-1{stroke: transparent; fill: var(--background-color);} */
/* commented 2 lines above */
.theme-base-icon{stroke: var(--background-color);}
.theme-base-icon.theme-base-fill .cls-1{stroke: transparent; fill: var(--background-color);}

theme.service.ts

import {Inject, Injectable} from '@angular/core';
import {BehaviorSubject} from 'rxjs';
import {DOCUMENT} from '@angular/common';
import { InspaaceStorageService } from './inspaace-storage.service';

export const themes = {
  blueTheme: {
    '--background-color': '#0098FF',
    '--text-color': '#FFFFFF',
    '--stroke': '#000000'
  },
  redTheme: {
    '--background-color': '#e24b36',
    '--text-color': '#FFFFFF',
    '--stroke': '#000000'
  },
  greenTheme: {
    '--background-color': '#63be6d',
    '--text-color': '#FFFFFF',
    '--stroke': '#000000'
  },
  yellowTheme: {
    '--background-color': '#FAAB1A',
    '--text-color': '#FFFFFF',
    '--stroke': '#000000'
  },
  purpleTheme: {
    '--background-color': '#9465ab',
    '--text-color': '#FFFFFF',
    '--stroke': '#000000'
  }
};



@Injectable({
  providedIn: 'root'
})
export class ThemeService {

  // private themServiceSubscription: Subscription;
  public activeThem = new BehaviorSubject('yellowTheme');

  constructor(@Inject(DOCUMENT) private document: any) {
    this.getActiveTheme().subscribe(themeName => {
      this.updateTheme(themeName);
    });
  }

  setProperty() {
    this.document.body.style.setProperty('--background-color', '#FAAB1A');
  }

  public getActiveTheme() {
    return this.activeThem.asObservable();
  }

  public setActiveThem(name) {
    console.log(name);
    this.activeThem.next(name);
  }


  updateTheme(themeName) {
    const them = themes[themeName];
    for (const key in them) {
      this.document.body.style.setProperty(key, them[key]);
    }
  }

  ngOnDestroy() {
    // if (this.themServiceSubscription) this.themServiceSubscription.unsubscribe();
  }

  // private setTheme(theme: {}) {
  //   Object.keys(theme).forEach(k =>
  //     document.documentElement.style.setProperty(`--${k}`, theme[k])
  //   );
  // }
}