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

   1 import { Injectable } from '@angular/core'
   2
   3 @Injectable()
   4 export class ThemeService {
   5   private theme = document.querySelector('body')
   6   private previousTheme = {}
   7
   8   constructor () {
   9     // initialise the alternative theme with dark theme colors
  10     this.previousTheme['mainBackgroundColor'] = '#111111'
  11     this.previousTheme['mainForegroundColor'] = '#fff'
  12     this.previousTheme['submenuColor'] = 'rgb(32,32,32)'
  13     this.previousTheme['inputColor'] = 'gray'
  14     this.previousTheme['inputPlaceholderColor'] = '#fff'
  15   }
  16
  17   toggleDarkTheme () {
  18     // switch properties
  19     this.switchProperty('mainBackgroundColor')
  20     this.switchProperty('mainForegroundColor')
  21     this.switchProperty('submenuColor')
  22     this.switchProperty('inputColor')
  23     this.switchProperty('inputPlaceholderColor')
  24   }
  25
  26   private switchProperty (property, newValue?) {
  27     const propertyOldvalue = window.getComputedStyle(this.theme).getPropertyValue('--' + property)
  28     this.theme.style.setProperty('--' + property, (newValue) ? newValue : this.previousTheme[property])
  29     this.previousTheme[property] = propertyOldvalue
  30   }
  31 }