blob: a6eef089843017bb889e5ef4b55f579597df0d78 (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
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')
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
}
}
|