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     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 }