Improve theme label

2 files changed, 18 insertions, 15 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 b739e881b..1a24641a2 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
@@ -5,10 +5,10 @@
 
     <div class="peertube-select-container">
       <select formControlName="theme" id="theme" class="form-control">
-        <option i18n value="instance-default">Instance default theme ({{ getDefaultThemeLabel() }})</option>
-        <option i18n value="default">{{ defaultThemeLabel }}</option>
+        <option i18n value="instance-default">{{ instanceName }} default theme ({{ getDefaultInstanceThemeLabel() }})</option>
+        <option i18n value="default">{{ getDefaultThemeLabel() }}</option>
 
-        <option *ngFor="let theme of availableThemes" [value]="theme">{{ capitalizeFirstLetter(theme) }}</option>
+        <option *ngFor="let theme of getAvailableThemes()" [value]="theme">{{ theme }}</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 932db498a..24ad54b1d 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
@@ -1,8 +1,7 @@
 import { Subject, Subscription } from 'rxjs'
 import { Component, Input, OnDestroy, OnInit } from '@angular/core'
-import { AuthService, Notifier, ServerService, UserService } from '@app/core'
+import { AuthService, Notifier, ServerService, ThemeService, UserService } from '@app/core'
 import { FormReactive, FormValidatorService } from '@app/shared/shared-forms'
-import { capitalizeFirstLetter } from '@root-helpers/string'
 import { HTMLServerConfig, User, UserUpdateMe } from '@shared/models'
 
 @Component({
@@ -18,8 +17,6 @@ export class UserInterfaceSettingsComponent extends FormReactive implements OnIn
 
   formValuesWatcher: Subscription
 
-  defaultThemeLabel = $localize`Light/Orange`
-
   private serverConfig: HTMLServerConfig
 
   constructor (
@@ -27,14 +24,14 @@ export class UserInterfaceSettingsComponent extends FormReactive implements OnIn
     private authService: AuthService,
     private notifier: Notifier,
     private userService: UserService,
+    private themeService: ThemeService,
     private serverService: ServerService
   ) {
     super()
   }
 
-  get availableThemes () {
-    return this.serverConfig.theme.registered
-               .map(t => t.name)
+  get instanceName () {
+    return this.serverConfig.instance.name
   }
 
   ngOnInit () {
@@ -61,17 +58,23 @@ export class UserInterfaceSettingsComponent extends FormReactive implements OnIn
   }
 
   getDefaultThemeLabel () {
+    return this.themeService.getDefaultThemeLabel()
+  }
+
+  getAvailableThemes () {
+    return this.themeService.getAvailableThemeLabels()
+  }
+
+  getDefaultInstanceThemeLabel () {
     const theme = this.serverConfig.theme.default
 
-    if (theme === 'default') return this.defaultThemeLabel
+    if (theme === 'default') {
+      return this.getDefaultThemeLabel()
+    }
 
     return theme
   }
 
-  capitalizeFirstLetter (str: string) {
-    return capitalizeFirstLetter(str)
-  }
-
   updateInterfaceSettings () {
     const theme = this.form.value['theme']