blob: 17d33b4e50aea9ed31302629575d2e64a9e11950 (
plain) (
tree)
|
|
import { Injectable } from '@angular/core'
import { peertubeLocalStorage } from '@app/shared/misc/peertube-local-storage'
@Injectable()
export class ThemeService {
private theme = document.querySelector('body')
private darkTheme = false
private previousTheme = {}
constructor () {
// initialise the alternative theme with dark theme colors
this.previousTheme['mainBackgroundColor'] = '#111111'
this.previousTheme['mainForegroundColor'] = '#fff'
this.previousTheme['submenuColor'] = 'rgb(32,32,32)'
this.previousTheme['inputColor'] = 'gray'
this.previousTheme['inputPlaceholderColor'] = '#fff'
this.darkTheme = (peertubeLocalStorage.getItem('theme') === 'dark')
console.log(this.darkTheme)
if (this.darkTheme) this.toggleDarkTheme(false)
}
toggleDarkTheme (setLocalStorage = true) {
// switch properties
this.switchProperty('mainBackgroundColor')
this.switchProperty('mainForegroundColor')
this.switchProperty('submenuColor')
this.switchProperty('inputColor')
this.switchProperty('inputPlaceholderColor')
if (setLocalStorage) {
this.darkTheme = !this.darkTheme
peertubeLocalStorage.setItem('theme', (this.darkTheme) ? 'dark' : 'default')
}
}
private switchProperty (property, newValue?) {
const propertyOldvalue = window.getComputedStyle(this.theme).getPropertyValue('--' + property)
this.theme.style.setProperty('--' + property, (newValue) ? newValue : this.previousTheme[property])
this.previousTheme[property] = propertyOldvalue
}
}
|