2 files changed, 5 insertions, 5 deletions

diff --git a/client/src/app/shared/shared-user-settings/user-interface-settings.component.html b/client/src/app/shared/shared-user-settings/user-interface-settings.component.html
index 1a24641a2..1e6e55e98 100644
--- a/client/src/app/shared/shared-user-settings/user-interface-settings.component.html
+++ b/client/src/app/shared/shared-user-settings/user-interface-settings.component.html
@@ -8,7 +8,7 @@
         <option i18n value="instance-default">{{ instanceName }} default theme ({{ getDefaultInstanceThemeLabel() }})</option>
         <option i18n value="default">{{ getDefaultThemeLabel() }}</option>
 
-        <option *ngFor="let theme of getAvailableThemes()" [value]="theme">{{ theme }}</option>
+        <option *ngFor="let theme of availableThemes" [value]="theme.id">{{ theme.label }}</option>
       </select>
     </div>
   </div>
diff --git a/client/src/app/shared/shared-user-settings/user-interface-settings.component.ts b/client/src/app/shared/shared-user-settings/user-interface-settings.component.ts
index 24ad54b1d..13e2e5424 100644
--- a/client/src/app/shared/shared-user-settings/user-interface-settings.component.ts
+++ b/client/src/app/shared/shared-user-settings/user-interface-settings.component.ts
@@ -3,6 +3,7 @@ import { Component, Input, OnDestroy, OnInit } from '@angular/core'
 import { AuthService, Notifier, ServerService, ThemeService, UserService } from '@app/core'
 import { FormReactive, FormValidatorService } from '@app/shared/shared-forms'
 import { HTMLServerConfig, User, UserUpdateMe } from '@shared/models'
+import { SelectOptionsItem } from 'src/types'
 
 @Component({
   selector: 'my-user-interface-settings',
@@ -15,6 +16,7 @@ export class UserInterfaceSettingsComponent extends FormReactive implements OnIn
   @Input() notifyOnUpdate = true
   @Input() userInformationLoaded: Subject<any>
 
+  availableThemes: SelectOptionsItem[]
   formValuesWatcher: Subscription
 
   private serverConfig: HTMLServerConfig
@@ -37,6 +39,8 @@ export class UserInterfaceSettingsComponent extends FormReactive implements OnIn
   ngOnInit () {
     this.serverConfig = this.serverService.getHTMLConfig()
 
+    this.availableThemes = this.themeService.buildAvailableThemes()
+
     this.buildForm({
       theme: null
     })
@@ -61,10 +65,6 @@ export class UserInterfaceSettingsComponent extends FormReactive implements OnIn
     return this.themeService.getDefaultThemeLabel()
   }
 
-  getAvailableThemes () {
-    return this.themeService.getAvailableThemeLabels()
-  }
-
   getDefaultInstanceThemeLabel () {
     const theme = this.serverConfig.theme.default