1 import { Injectable } from '@angular/core'
2 import { peertubeLocalStorage } from '@app/shared/misc/peertube-local-storage'
5 export class ThemeService {
6 private theme = document.querySelector('body')
7 private darkTheme = false
8 private previousTheme = {}
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'
18 this.darkTheme = (peertubeLocalStorage.getItem('theme') === 'dark')
19 console.log(this.darkTheme)
20 if (this.darkTheme) this.toggleDarkTheme(false)
23 toggleDarkTheme (setLocalStorage = true) {
25 this.switchProperty('mainBackgroundColor')
26 this.switchProperty('mainForegroundColor')
27 this.switchProperty('submenuColor')
28 this.switchProperty('inputColor')
29 this.switchProperty('inputPlaceholderColor')
31 if (setLocalStorage) {
32 this.darkTheme = !this.darkTheme
33 peertubeLocalStorage.setItem('theme', (this.darkTheme) ? 'dark' : 'default')
37 private switchProperty (property, newValue?) {
38 const propertyOldvalue = window.getComputedStyle(this.theme).getPropertyValue('--' + property)
39 this.theme.style.setProperty('--' + property, (newValue) ? newValue : this.previousTheme[property])
40 this.previousTheme[property] = propertyOldvalue