5 files changed, 11 insertions, 12 deletions

diff --git a/client/src/app/+admin/config/edit-custom-config/edit-basic-configuration.component.html b/client/src/app/+admin/config/edit-custom-config/edit-basic-configuration.component.html
index 315cd1749..7dfe5f5f9 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-basic-configuration.component.html
+++ b/client/src/app/+admin/config/edit-custom-config/edit-basic-configuration.component.html
@@ -17,7 +17,7 @@
             <select formControlName="default" id="themeDefault" class="form-control">
               <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/+admin/config/edit-custom-config/edit-basic-configuration.component.ts b/client/src/app/+admin/config/edit-custom-config/edit-basic-configuration.component.ts
index f8f257671..56227d11c 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-basic-configuration.component.ts
+++ b/client/src/app/+admin/config/edit-custom-config/edit-basic-configuration.component.ts
@@ -19,6 +19,7 @@ export class EditBasicConfigurationComponent implements OnInit, OnChanges {
 
   signupAlertMessage: string
   defaultLandingPageOptions: SelectOptionsItem[] = []
+  availableThemes: SelectOptionsItem[]
 
   constructor (
     private configService: ConfigService,
@@ -29,6 +30,8 @@ export class EditBasicConfigurationComponent implements OnInit, OnChanges {
   ngOnInit () {
     this.buildLandingPageOptions()
     this.checkSignupField()
+
+    this.availableThemes = this.themeService.buildAvailableThemes()
   }
 
   ngOnChanges (changes: SimpleChanges) {
@@ -49,10 +52,6 @@ export class EditBasicConfigurationComponent implements OnInit, OnChanges {
     return this.configService.videoQuotaDailyOptions
   }
 
-  getAvailableThemes () {
-    return this.themeService.getAvailableThemeLabels()
-  }
-
   doesTrendingVideosAlgorithmsEnabledInclude (algorithm: string) {
     const enabled = this.form.value['trending']['videos']['algorithms']['enabled']
     if (!Array.isArray(enabled)) return false
diff --git a/client/src/app/core/theme/theme.service.ts b/client/src/app/core/theme/theme.service.ts
index da6f2442a..40939ecb8 100644
--- a/client/src/app/core/theme/theme.service.ts
+++ b/client/src/app/core/theme/theme.service.ts
@@ -49,9 +49,9 @@ export class ThemeService {
     return $localize`Light/Orange`
   }
 
-  getAvailableThemeLabels () {
+  buildAvailableThemes () {
     return this.serverConfig.theme.registered
-               .map(t => capitalizeFirstLetter(t.name))
+               .map(t => ({ id: t.name, label: capitalizeFirstLetter(t.name) }))
   }
 
   private injectThemes (themes: ServerConfigTheme[], fromLocalStorage = false) {
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