diff options
author | Rigel Kent <sendmemail@rigelk.eu> | 2018-09-06 12:00:53 +0200 |
---|---|---|
committer | Rigel Kent <sendmemail@rigelk.eu> | 2018-09-06 12:00:53 +0200 |
commit | 1a00c5619f11c5faecd384b011e037a8ed5fde46 (patch) | |
tree | 82d2830d5a25089d825711c225766711dc08c99f /client/src/app/core/theme | |
parent | 1c66c35c55eed2ffbbf97ec463a3539c35952ec3 (diff) | |
download | PeerTube-1a00c5619f11c5faecd384b011e037a8ed5fde46.tar.gz PeerTube-1a00c5619f11c5faecd384b011e037a8ed5fde46.tar.zst PeerTube-1a00c5619f11c5faecd384b011e037a8ed5fde46.zip |
refactor theme toggle into a service
Diffstat (limited to 'client/src/app/core/theme')
-rw-r--r-- | client/src/app/core/theme/index.ts | 1 | ||||
-rw-r--r-- | client/src/app/core/theme/theme.service.ts | 31 |
2 files changed, 32 insertions, 0 deletions
diff --git a/client/src/app/core/theme/index.ts b/client/src/app/core/theme/index.ts new file mode 100644 index 000000000..713f4747b --- /dev/null +++ b/client/src/app/core/theme/index.ts | |||
@@ -0,0 +1 @@ | |||
export * from './theme.service' | |||
diff --git a/client/src/app/core/theme/theme.service.ts b/client/src/app/core/theme/theme.service.ts new file mode 100644 index 000000000..d8e02e2e5 --- /dev/null +++ b/client/src/app/core/theme/theme.service.ts | |||
@@ -0,0 +1,31 @@ | |||
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 | } | ||