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: { [ id: string ]: string } = {}
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 if (this.darkTheme) this.toggleDarkTheme(false)
22 toggleDarkTheme (setLocalStorage = true) {
24 this.switchProperty('mainBackgroundColor')
25 this.switchProperty('mainForegroundColor')
26 this.switchProperty('submenuColor')
27 this.switchProperty('inputColor')
28 this.switchProperty('inputPlaceholderColor')
30 if (setLocalStorage) {
31 this.darkTheme = !this.darkTheme
32 peertubeLocalStorage.setItem('theme', (this.darkTheme) ? 'dark' : 'default')
36 private switchProperty (property: string, newValue?: string) {
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