client/src/app/core/theme/theme.service.ts


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
42

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')
    console.log(this.darkTheme)
    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
  }
}