1 files changed, 25 insertions, 2 deletions

diff --git a/client/src/app/shared/shared-account-avatar/account-avatar.component.ts b/client/src/app/shared/shared-account-avatar/account-avatar.component.ts
index 02a0a18bf..76b696566 100644
--- a/client/src/app/shared/shared-account-avatar/account-avatar.component.ts
+++ b/client/src/app/shared/shared-account-avatar/account-avatar.component.ts
@@ -12,7 +12,7 @@ export class AccountAvatarComponent {
     avatar?: { url?: string, path: string }
     url: string
   }
-  @Input() size: '25' | '34' | '36' | '40' | '120' = '36'
+  @Input() size: '25' | '32' | '34' | '36' | '40' | '120' = '36'
 
   // Use an external link
   @Input() href: string
@@ -23,6 +23,8 @@ export class AccountAvatarComponent {
     this._title = value
   }
 
+  defaultAvatarUrl = Account.GET_DEFAULT_AVATAR_URL()
+
   private _title: string
 
   get title () {
@@ -30,10 +32,31 @@ export class AccountAvatarComponent {
   }
 
   get class () {
-    return `avatar avatar-${this.size}`
+    return `avatar avatar-${this.size}` + (this.avatarUrl ? '' : ` initial ${this.getColorTheme()}`)
   }
 
   get avatarUrl () {
     return Account.GET_ACTOR_AVATAR_URL(this.account)
   }
+
+  get initial () {
+    return this.account?.name.slice(0, 1)
+  }
+
+  private getColorTheme () {
+    const themes = {
+      abc: 'blue',
+      def: 'green',
+      ghi: 'purple',
+      jkl: 'gray',
+      mno: 'yellow',
+      pqr: 'orange',
+      stv: 'red',
+      wxyz: 'dark-blue'
+    }
+
+    const theme = Object.keys(themes).find(chars => chars.includes(this.initial))
+
+    return themes[theme]
+  }
 }