]>
Commit | Line | Data |
---|---|---|
1 | import { Injectable } from '@angular/core' | |
2 | import { peertubeLocalStorage } from '@app/shared/misc/peertube-local-storage' | |
3 | ||
4 | @Injectable() | |
5 | export class ThemeService { | |
6 | private theme = document.querySelector('body') | |
7 | private darkTheme = false | |
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' | |
17 | ||
18 | this.darkTheme = (peertubeLocalStorage.getItem('theme') === 'dark') | |
19 | if (this.darkTheme) this.toggleDarkTheme(false) | |
20 | } | |
21 | ||
22 | toggleDarkTheme (setLocalStorage = true) { | |
23 | // switch properties | |
24 | this.switchProperty('mainBackgroundColor') | |
25 | this.switchProperty('mainForegroundColor') | |
26 | this.switchProperty('submenuColor') | |
27 | this.switchProperty('inputColor') | |
28 | this.switchProperty('inputPlaceholderColor') | |
29 | ||
30 | if (setLocalStorage) { | |
31 | this.darkTheme = !this.darkTheme | |
32 | peertubeLocalStorage.setItem('theme', (this.darkTheme) ? 'dark' : 'default') | |
33 | } | |
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 | } |