diff options
Diffstat (limited to 'client/src/app/core')
-rw-r--r-- | client/src/app/core/core.module.ts | 2 | ||||
-rw-r--r-- | client/src/app/core/index.ts | 1 | ||||
-rw-r--r-- | client/src/app/core/theme/index.ts | 1 | ||||
-rw-r--r-- | client/src/app/core/theme/theme.service.ts | 31 |
4 files changed, 35 insertions, 0 deletions
diff --git a/client/src/app/core/core.module.ts b/client/src/app/core/core.module.ts index 30ac10119..d4917f902 100644 --- a/client/src/app/core/core.module.ts +++ b/client/src/app/core/core.module.ts | |||
@@ -14,6 +14,7 @@ import { ConfirmComponent, ConfirmService } from './confirm' | |||
14 | import { throwIfAlreadyLoaded } from './module-import-guard' | 14 | import { throwIfAlreadyLoaded } from './module-import-guard' |
15 | import { LoginGuard, RedirectService, UserRightGuard } from './routing' | 15 | import { LoginGuard, RedirectService, UserRightGuard } from './routing' |
16 | import { ServerService } from './server' | 16 | import { ServerService } from './server' |
17 | import { ThemeService } from './theme' | ||
17 | 18 | ||
18 | @NgModule({ | 19 | @NgModule({ |
19 | imports: [ | 20 | imports: [ |
@@ -45,6 +46,7 @@ import { ServerService } from './server' | |||
45 | AuthService, | 46 | AuthService, |
46 | ConfirmService, | 47 | ConfirmService, |
47 | ServerService, | 48 | ServerService, |
49 | ThemeService, | ||
48 | LoginGuard, | 50 | LoginGuard, |
49 | UserRightGuard, | 51 | UserRightGuard, |
50 | RedirectService | 52 | RedirectService |
diff --git a/client/src/app/core/index.ts b/client/src/app/core/index.ts index 3c01e05aa..521afc29c 100644 --- a/client/src/app/core/index.ts +++ b/client/src/app/core/index.ts | |||
@@ -2,4 +2,5 @@ export * from './auth' | |||
2 | export * from './server' | 2 | export * from './server' |
3 | export * from './confirm' | 3 | export * from './confirm' |
4 | export * from './routing' | 4 | export * from './routing' |
5 | export * from './theme' | ||
5 | export * from './core.module' | 6 | export * from './core.module' |
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 | } | ||