Clearer theme select labels

4 files changed, 26 insertions, 3 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 0d0ddc0f2..b739e881b 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</option>
-        <option i18n value="default">peertube default</option>
+        <option i18n value="instance-default">Instance default theme ({{ getDefaultThemeLabel() }})</option>
+        <option i18n value="default">{{ defaultThemeLabel }}</option>
 
-        <option *ngFor="let theme of availableThemes" [value]="theme">{{ theme }}</option>
+        <option *ngFor="let theme of availableThemes" [value]="theme">{{ capitalizeFirstLetter(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 d04a2c348..932db498a 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
@@ -2,6 +2,7 @@ import { Subject, Subscription } from 'rxjs'
 import { Component, Input, OnDestroy, OnInit } from '@angular/core'
 import { AuthService, Notifier, ServerService, 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({
@@ -17,6 +18,8 @@ export class UserInterfaceSettingsComponent extends FormReactive implements OnIn
 
   formValuesWatcher: Subscription
 
+  defaultThemeLabel = $localize`Light/Orange`
+
   private serverConfig: HTMLServerConfig
 
   constructor (
@@ -57,6 +60,18 @@ export class UserInterfaceSettingsComponent extends FormReactive implements OnIn
     this.formValuesWatcher?.unsubscribe()
   }
 
+  getDefaultThemeLabel () {
+    const theme = this.serverConfig.theme.default
+
+    if (theme === 'default') return this.defaultThemeLabel
+
+    return theme
+  }
+
+  capitalizeFirstLetter (str: string) {
+    return capitalizeFirstLetter(str)
+  }
+
   updateInterfaceSettings () {
     const theme = this.form.value['theme']
 
diff --git a/client/src/root-helpers/index.ts b/client/src/root-helpers/index.ts
index 3b95b4b99..0492924fd 100644
--- a/client/src/root-helpers/index.ts
+++ b/client/src/root-helpers/index.ts
@@ -4,5 +4,6 @@ export * from './images'
 export * from './local-storage-utils'
 export * from './peertube-web-storage'
 export * from './plugins-manager'
+export * from './string'
 export * from './utils'
 export * from './video'
diff --git a/client/src/root-helpers/string.ts b/client/src/root-helpers/string.ts
new file mode 100644
index 000000000..f81587494
--- /dev/null
+++ b/client/src/root-helpers/string.ts
@@ -0,0 +1,7 @@
+function capitalizeFirstLetter (str: string) {
+  return str.charAt(0).toUpperCase() + str.slice(1)
+}
+
+export {
+  capitalizeFirstLetter
+}