Last active
May 1, 2020 09:52
-
-
Save sufiiiyan/768e39a0dec09b2c21dcb2ee1a6cbf56 to your computer and use it in GitHub Desktop.
theme-setting
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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() | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
: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);} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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