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

   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     console.log(this.darkTheme)
  20     if (this.darkTheme) this.toggleDarkTheme(false)
  21   }
  22
  23   toggleDarkTheme (setLocalStorage = true) {
  24     // switch properties
  25     this.switchProperty('mainBackgroundColor')
  26     this.switchProperty('mainForegroundColor')
  27     this.switchProperty('submenuColor')
  28     this.switchProperty('inputColor')
  29     this.switchProperty('inputPlaceholderColor')
  30
  31     if (setLocalStorage) {
  32       this.darkTheme = !this.darkTheme
  33       peertubeLocalStorage.setItem('theme', (this.darkTheme) ? 'dark' : 'default')
  34     }
  35   }
  36
  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
  41   }
  42 }