Skip to content

Instantly share code, notes, and snippets.

@sufiiiyan
Last active May 1, 2020 09:52
Show Gist options
  • Save sufiiiyan/768e39a0dec09b2c21dcb2ee1a6cbf56 to your computer and use it in GitHub Desktop.
Save sufiiiyan/768e39a0dec09b2c21dcb2ee1a6cbf56 to your computer and use it in GitHub Desktop.
theme-setting
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()
}
}
: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);}
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])
// );
// }
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment