]>
Commit | Line | Data |
---|---|---|
1a00c561 | 1 | import { Injectable } from '@angular/core' |
e3f7f600 | 2 | import { peertubeLocalStorage } from '@app/shared/misc/peertube-local-storage' |
1a00c561 RK |
3 | |
4 | @Injectable() | |
5 | export class ThemeService { | |
6 | private theme = document.querySelector('body') | |
e3f7f600 | 7 | private darkTheme = false |
1a00c561 RK |
8 | private previousTheme = {} |
9 | ||
10 | constructor () { | |
11 | // initialise the alternative theme with dark theme colors | |
12 | this.previousTheme['mainBackgroundColor'] = '#111111' | |
13 | this.previousTheme['mainForegroundColor'] = '#fff' | |
14 | this.previousTheme['submenuColor'] = 'rgb(32,32,32)' | |
15 | this.previousTheme['inputColor'] = 'gray' | |
16 | this.previousTheme['inputPlaceholderColor'] = '#fff' | |
e3f7f600 RK |
17 | |
18 | this.darkTheme = (peertubeLocalStorage.getItem('theme') === 'dark') | |
e3f7f600 | 19 | if (this.darkTheme) this.toggleDarkTheme(false) |
1a00c561 RK |
20 | } |
21 | ||
e3f7f600 | 22 | toggleDarkTheme (setLocalStorage = true) { |
1a00c561 RK |
23 | // switch properties |
24 | this.switchProperty('mainBackgroundColor') | |
25 | this.switchProperty('mainForegroundColor') | |
26 | this.switchProperty('submenuColor') | |
27 | this.switchProperty('inputColor') | |
28 | this.switchProperty('inputPlaceholderColor') | |
e3f7f600 RK |
29 | |
30 | if (setLocalStorage) { | |
31 | this.darkTheme = !this.darkTheme | |
32 | peertubeLocalStorage.setItem('theme', (this.darkTheme) ? 'dark' : 'default') | |
33 | } | |
1a00c561 RK |
34 | } |
35 | ||
36 | private switchProperty (property, newValue?) { | |
37 | const propertyOldvalue = window.getComputedStyle(this.theme).getPropertyValue('--' + property) | |
38 | this.theme.style.setProperty('--' + property, (newValue) ? newValue : this.previousTheme[property]) | |
39 | this.previousTheme[property] = propertyOldvalue | |
40 | } | |
41 | } |