Improve theme label

5 files changed, 46 insertions, 24 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 c62ea7700..68126281f 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
@@ -15,7 +15,7 @@
 
           <div class="peertube-select-container">
             <select formControlName="default" id="themeDefault" class="form-control">
-              <option i18n value="default">default</option>
+              <option i18n value="default">{{ getDefaultThemeLabel() }}</option>
 
               <option *ngFor="let theme of getAvailableThemes()" [value]="theme">{{ theme }}</option>
             </select>
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 81457bd36..f8f257671 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
@@ -2,7 +2,7 @@ import { pairwise } from 'rxjs/operators'
 import { SelectOptionsItem } from 'src/types/select-options-item.model'
 import { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core'
 import { FormGroup } from '@angular/forms'
-import { MenuService } from '@app/core'
+import { MenuService, ThemeService } from '@app/core'
 import { HTMLServerConfig } from '@shared/models'
 import { ConfigService } from '../shared/config.service'
 
@@ -22,7 +22,8 @@ export class EditBasicConfigurationComponent implements OnInit, OnChanges {
 
   constructor (
     private configService: ConfigService,
-    private menuService: MenuService
+    private menuService: MenuService,
+    private themeService: ThemeService
   ) { }
 
   ngOnInit () {
@@ -49,8 +50,7 @@ export class EditBasicConfigurationComponent implements OnInit, OnChanges {
   }
 
   getAvailableThemes () {
-    return this.serverConfig.theme.registered
-      .map(t => t.name)
+    return this.themeService.getAvailableThemeLabels()
   }
 
   doesTrendingVideosAlgorithmsEnabledInclude (algorithm: string) {
@@ -94,6 +94,10 @@ export class EditBasicConfigurationComponent implements OnInit, OnChanges {
       }))
   }
 
+  getDefaultThemeLabel () {
+    return this.themeService.getDefaultThemeLabel()
+  }
+
   private checkSignupField () {
     const signupControl = this.form.get('signup.enabled')
 
diff --git a/client/src/app/core/theme/theme.service.ts b/client/src/app/core/theme/theme.service.ts
index e88511054..da6f2442a 100644
--- a/client/src/app/core/theme/theme.service.ts
+++ b/client/src/app/core/theme/theme.service.ts
@@ -1,4 +1,5 @@
 import { Injectable } from '@angular/core'
+import { capitalizeFirstLetter } from '@root-helpers/string'
 import { UserLocalStorageKeys } from '@root-helpers/users'
 import { HTMLServerConfig, ServerConfigTheme } from '@shared/models'
 import { environment } from '../../../environments/environment'
@@ -40,6 +41,19 @@ export class ThemeService {
     this.listenUserTheme()
   }
 
+  getDefaultThemeLabel () {
+    if (this.hasDarkTheme()) {
+      return $localize`Light/Orange or Dark`
+    }
+
+    return $localize`Light/Orange`
+  }
+
+  getAvailableThemeLabels () {
+    return this.serverConfig.theme.registered
+               .map(t => capitalizeFirstLetter(t.name))
+  }
+
   private injectThemes (themes: ServerConfigTheme[], fromLocalStorage = false) {
     this.themes = themes
 
@@ -81,10 +95,7 @@ export class ThemeService {
     if (instanceTheme !== 'default') return instanceTheme
 
     // Default to dark theme if available and wanted by the user
-    if (
-      this.themes.find(t => t.name === 'dark') &&
-      window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
-    ) {
+    if (this.hasDarkTheme() && window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
       return 'dark'
     }
 
@@ -193,4 +204,8 @@ export class ThemeService {
   private getTheme (name: string) {
     return this.themes.find(t => t.name === name)
   }
+
+  private hasDarkTheme () {
+    return this.serverConfig.theme.registered.some(t => t.name === 'dark')
+  }
 }
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']