From 8e4247c2ac8152b1a8c74188d481e5df40b8bf5d Mon Sep 17 00:00:00 2001
From: Alexandre Vryghem <alexandre@atmire.com>
Date: Fri, 21 Apr 2023 00:06:02 +0200
Subject: [PATCH] 101577: Themed ThumbnailComponent

---
 .../edit-bitstream-page.component.html        |  2 +-
 ...-search-result-grid-element.component.html |  8 ++--
 ...-search-result-grid-element.component.html |  8 ++--
 ...-search-result-grid-element.component.html |  8 ++--
 .../journal-issue.component.html              |  2 +-
 .../journal-volume.component.html             |  2 +-
 .../item-pages/journal/journal.component.html |  2 +-
 ...-search-result-grid-element.component.html |  8 ++--
 ...-search-result-grid-element.component.html |  8 ++--
 ...-search-result-grid-element.component.html |  8 ++--
 .../org-unit/org-unit.component.html          |  4 +-
 .../item-pages/person/person.component.html   |  4 +-
 .../item-pages/project/project.component.html |  4 +-
 ...ult-list-submission-element.component.html |  2 +-
 .../full-file-section.component.html          |  4 +-
 .../publication/publication.component.html    |  2 +-
 .../untyped-item/untyped-item.component.html  |  2 +-
 .../item-detail-preview.component.html        |  2 +-
 .../collection-grid-element.component.html    |  8 ++--
 .../community-grid-element.component.html     |  8 ++--
 ...-search-result-grid-element.component.html |  8 ++--
 ...-search-result-grid-element.component.html |  8 ++--
 ...-search-result-grid-element.component.html |  8 ++--
 src/app/shared/shared.module.ts               |  2 +
 .../file/section-upload-file.component.html   |  4 +-
 .../thumbnail/themed-thumbnail.component.ts   | 44 +++++++++++++++++++
 26 files changed, 108 insertions(+), 62 deletions(-)
 create mode 100644 src/app/thumbnail/themed-thumbnail.component.ts

diff --git a/src/app/bitstream-page/edit-bitstream-page/edit-bitstream-page.component.html b/src/app/bitstream-page/edit-bitstream-page/edit-bitstream-page.component.html
index 4d3b948a58..769cc57ce2 100644
--- a/src/app/bitstream-page/edit-bitstream-page/edit-bitstream-page.component.html
+++ b/src/app/bitstream-page/edit-bitstream-page/edit-bitstream-page.component.html
@@ -2,7 +2,7 @@
   <div class="container" *ngVar="(bitstreamFormatsRD$ | async) as formatsRD">
     <div class="row" *ngIf="bitstreamRD?.hasSucceeded && formatsRD?.hasSucceeded">
       <div class="col-md-2">
-        <ds-thumbnail [thumbnail]="bitstreamRD?.payload"></ds-thumbnail>
+        <ds-themed-thumbnail [thumbnail]="bitstreamRD?.payload"></ds-themed-thumbnail>
       </div>
       <div class="col-md-10">
         <div class="container">
diff --git a/src/app/entity-groups/journal-entities/item-grid-elements/search-result-grid-elements/journal-issue/journal-issue-search-result-grid-element.component.html b/src/app/entity-groups/journal-entities/item-grid-elements/search-result-grid-elements/journal-issue/journal-issue-search-result-grid-element.component.html
index 028876b3d0..6113605802 100644
--- a/src/app/entity-groups/journal-entities/item-grid-elements/search-result-grid-elements/journal-issue/journal-issue-search-result-grid-element.component.html
+++ b/src/app/entity-groups/journal-entities/item-grid-elements/search-result-grid-elements/journal-issue/journal-issue-search-result-grid-element.component.html
@@ -8,14 +8,14 @@
        rel="noopener noreferrer" [routerLink]="[itemPageRoute]"
        class="card-img-top full-width">
       <div>
-        <ds-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
-        </ds-thumbnail>
+        <ds-themed-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
+        </ds-themed-thumbnail>
       </div>
     </a>
     <span *ngIf="linkType == linkTypes.None" class="card-img-top full-width">
             <div>
-                <ds-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
-                </ds-thumbnail>
+                <ds-themed-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
+                </ds-themed-thumbnail>
             </div>
         </span>
     <div class="card-body">
diff --git a/src/app/entity-groups/journal-entities/item-grid-elements/search-result-grid-elements/journal-volume/journal-volume-search-result-grid-element.component.html b/src/app/entity-groups/journal-entities/item-grid-elements/search-result-grid-elements/journal-volume/journal-volume-search-result-grid-element.component.html
index 65ff75a731..242230e375 100644
--- a/src/app/entity-groups/journal-entities/item-grid-elements/search-result-grid-elements/journal-volume/journal-volume-search-result-grid-element.component.html
+++ b/src/app/entity-groups/journal-entities/item-grid-elements/search-result-grid-elements/journal-volume/journal-volume-search-result-grid-element.component.html
@@ -8,14 +8,14 @@
        rel="noopener noreferrer" [routerLink]="[itemPageRoute]"
        class="card-img-top full-width">
       <div>
-        <ds-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
-        </ds-thumbnail>
+        <ds-themed-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
+        </ds-themed-thumbnail>
       </div>
     </a>
     <span *ngIf="linkType == linkTypes.None" class="card-img-top full-width">
                 <div>
-                    <ds-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
-                    </ds-thumbnail>
+                    <ds-themed-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
+                    </ds-themed-thumbnail>
                 </div>
             </span>
     <div class="card-body">
diff --git a/src/app/entity-groups/journal-entities/item-grid-elements/search-result-grid-elements/journal/journal-search-result-grid-element.component.html b/src/app/entity-groups/journal-entities/item-grid-elements/search-result-grid-elements/journal/journal-search-result-grid-element.component.html
index 0c5824c6d6..dd6370f7da 100644
--- a/src/app/entity-groups/journal-entities/item-grid-elements/search-result-grid-elements/journal/journal-search-result-grid-element.component.html
+++ b/src/app/entity-groups/journal-entities/item-grid-elements/search-result-grid-elements/journal/journal-search-result-grid-element.component.html
@@ -8,14 +8,14 @@
        rel="noopener noreferrer" [routerLink]="[itemPageRoute]"
        class="card-img-top full-width">
       <div>
-        <ds-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
-        </ds-thumbnail>
+        <ds-themed-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
+        </ds-themed-thumbnail>
       </div>
     </a>
     <span *ngIf="linkType == linkTypes.None" class="card-img-top full-width">
             <div>
-                <ds-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
-                </ds-thumbnail>
+                <ds-themed-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
+                </ds-themed-thumbnail>
             </div>
         </span>
     <div class="card-body">
diff --git a/src/app/entity-groups/journal-entities/item-pages/journal-issue/journal-issue.component.html b/src/app/entity-groups/journal-entities/item-pages/journal-issue/journal-issue.component.html
index 5847be7dd2..46f9452478 100644
--- a/src/app/entity-groups/journal-entities/item-pages/journal-issue/journal-issue.component.html
+++ b/src/app/entity-groups/journal-entities/item-pages/journal-issue/journal-issue.component.html
@@ -9,7 +9,7 @@
 <div class="row">
   <div class="col-xs-12 col-md-4">
     <ds-metadata-field-wrapper [hideIfNoTextContent]="false">
-      <ds-thumbnail [thumbnail]="object?.thumbnail | async"></ds-thumbnail>
+      <ds-themed-thumbnail [thumbnail]="object?.thumbnail | async"></ds-themed-thumbnail>
     </ds-metadata-field-wrapper>
     <ds-generic-item-page-field [item]="object"
       [fields]="['publicationvolume.volumeNumber']"
diff --git a/src/app/entity-groups/journal-entities/item-pages/journal-volume/journal-volume.component.html b/src/app/entity-groups/journal-entities/item-pages/journal-volume/journal-volume.component.html
index a0a25766ef..37b870a6ae 100644
--- a/src/app/entity-groups/journal-entities/item-pages/journal-volume/journal-volume.component.html
+++ b/src/app/entity-groups/journal-entities/item-pages/journal-volume/journal-volume.component.html
@@ -9,7 +9,7 @@
 <div class="row">
   <div class="col-xs-12 col-md-4">
     <ds-metadata-field-wrapper [hideIfNoTextContent]="false">
-      <ds-thumbnail [thumbnail]="object?.thumbnail | async"></ds-thumbnail>
+      <ds-themed-thumbnail [thumbnail]="object?.thumbnail | async"></ds-themed-thumbnail>
     </ds-metadata-field-wrapper>
     <ds-generic-item-page-field [item]="object"
       [fields]="['publicationvolume.volumeNumber']"
diff --git a/src/app/entity-groups/journal-entities/item-pages/journal/journal.component.html b/src/app/entity-groups/journal-entities/item-pages/journal/journal.component.html
index af3ac85959..0f289727e5 100644
--- a/src/app/entity-groups/journal-entities/item-pages/journal/journal.component.html
+++ b/src/app/entity-groups/journal-entities/item-pages/journal/journal.component.html
@@ -9,7 +9,7 @@
 <div class="row">
   <div class="col-xs-12 col-md-4">
     <ds-metadata-field-wrapper [hideIfNoTextContent]="false">
-      <ds-thumbnail [thumbnail]="object?.thumbnail | async"></ds-thumbnail>
+      <ds-themed-thumbnail [thumbnail]="object?.thumbnail | async"></ds-themed-thumbnail>
     </ds-metadata-field-wrapper>
     <ds-generic-item-page-field class="item-page-fields" [item]="object"
       [fields]="['creativeworkseries.issn']"
diff --git a/src/app/entity-groups/research-entities/item-grid-elements/search-result-grid-elements/org-unit/org-unit-search-result-grid-element.component.html b/src/app/entity-groups/research-entities/item-grid-elements/search-result-grid-elements/org-unit/org-unit-search-result-grid-element.component.html
index edb9e9b46a..0133186c66 100644
--- a/src/app/entity-groups/research-entities/item-grid-elements/search-result-grid-elements/org-unit/org-unit-search-result-grid-element.component.html
+++ b/src/app/entity-groups/research-entities/item-grid-elements/search-result-grid-elements/org-unit/org-unit-search-result-grid-element.component.html
@@ -8,14 +8,14 @@
        rel="noopener noreferrer" [routerLink]="[itemPageRoute]"
        class="card-img-top full-width">
       <div>
-        <ds-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
-        </ds-thumbnail>
+        <ds-themed-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
+        </ds-themed-thumbnail>
       </div>
     </a>
     <span *ngIf="linkType == linkTypes.None" class="card-img-top full-width">
             <div>
-                <ds-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
-                </ds-thumbnail>
+                <ds-themed-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
+                </ds-themed-thumbnail>
             </div>
         </span>
     <div class="card-body">
diff --git a/src/app/entity-groups/research-entities/item-grid-elements/search-result-grid-elements/person/person-search-result-grid-element.component.html b/src/app/entity-groups/research-entities/item-grid-elements/search-result-grid-elements/person/person-search-result-grid-element.component.html
index 680a9909bc..c812685f3c 100644
--- a/src/app/entity-groups/research-entities/item-grid-elements/search-result-grid-elements/person/person-search-result-grid-element.component.html
+++ b/src/app/entity-groups/research-entities/item-grid-elements/search-result-grid-elements/person/person-search-result-grid-element.component.html
@@ -8,14 +8,14 @@
        rel="noopener noreferrer" [routerLink]="[itemPageRoute]"
        class="card-img-top full-width">
       <div>
-        <ds-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
-        </ds-thumbnail>
+        <ds-themed-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
+        </ds-themed-thumbnail>
       </div>
     </a>
     <span *ngIf="linkType == linkTypes.None" class="card-img-top full-width">
             <div>
-                <ds-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
-                </ds-thumbnail>
+                <ds-themed-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
+                </ds-themed-thumbnail>
             </div>
         </span>
     <div class="card-body">
diff --git a/src/app/entity-groups/research-entities/item-grid-elements/search-result-grid-elements/project/project-search-result-grid-element.component.html b/src/app/entity-groups/research-entities/item-grid-elements/search-result-grid-elements/project/project-search-result-grid-element.component.html
index 204f8fc8cb..eda01bc711 100644
--- a/src/app/entity-groups/research-entities/item-grid-elements/search-result-grid-elements/project/project-search-result-grid-element.component.html
+++ b/src/app/entity-groups/research-entities/item-grid-elements/search-result-grid-elements/project/project-search-result-grid-element.component.html
@@ -8,14 +8,14 @@
        rel="noopener noreferrer" [routerLink]="[itemPageRoute]"
        class="card-img-top full-width">
       <div>
-        <ds-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
-        </ds-thumbnail>
+        <ds-themed-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
+        </ds-themed-thumbnail>
       </div>
     </a>
     <span *ngIf="linkType == linkTypes.None" class="card-img-top full-width">
       <div>
-        <ds-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
-        </ds-thumbnail>
+        <ds-themed-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
+        </ds-themed-thumbnail>
       </div>
     </span>
     <div class="card-body">
diff --git a/src/app/entity-groups/research-entities/item-pages/org-unit/org-unit.component.html b/src/app/entity-groups/research-entities/item-pages/org-unit/org-unit.component.html
index c9ea8fb549..feac07627b 100644
--- a/src/app/entity-groups/research-entities/item-pages/org-unit/org-unit.component.html
+++ b/src/app/entity-groups/research-entities/item-pages/org-unit/org-unit.component.html
@@ -9,12 +9,12 @@
 <div class="row">
   <div class="col-xs-12 col-md-4">
     <ds-metadata-field-wrapper [hideIfNoTextContent]="false">
-      <ds-thumbnail [thumbnail]="object?.thumbnail | async"
+      <ds-themed-thumbnail [thumbnail]="object?.thumbnail | async"
                     [defaultImage]="'assets/images/orgunit-placeholder.svg'"
                     [alt]="'thumbnail.orgunit.alt'"
                     [placeholder]="'thumbnail.orgunit.placeholder'"
       >
-      </ds-thumbnail>
+      </ds-themed-thumbnail>
     </ds-metadata-field-wrapper>
     <ds-generic-item-page-field [item]="object"
       [fields]="['organization.foundingDate']"
diff --git a/src/app/entity-groups/research-entities/item-pages/person/person.component.html b/src/app/entity-groups/research-entities/item-pages/person/person.component.html
index 5c2fd227fd..5f01674490 100644
--- a/src/app/entity-groups/research-entities/item-pages/person/person.component.html
+++ b/src/app/entity-groups/research-entities/item-pages/person/person.component.html
@@ -9,11 +9,11 @@
 <div class="row">
   <div class="col-xs-12 col-md-4">
     <ds-metadata-field-wrapper [hideIfNoTextContent]="false">
-      <ds-thumbnail [thumbnail]="object?.thumbnail | async"
+      <ds-themed-thumbnail [thumbnail]="object?.thumbnail | async"
                     [defaultImage]="'assets/images/person-placeholder.svg'"
                     [alt]="'thumbnail.person.alt'"
                     [placeholder]="'thumbnail.person.placeholder'">
-      </ds-thumbnail>
+      </ds-themed-thumbnail>
     </ds-metadata-field-wrapper>
     <ds-generic-item-page-field [item]="object"
       [fields]="['person.email']"
diff --git a/src/app/entity-groups/research-entities/item-pages/project/project.component.html b/src/app/entity-groups/research-entities/item-pages/project/project.component.html
index 8f2ff6adcd..f109545aec 100644
--- a/src/app/entity-groups/research-entities/item-pages/project/project.component.html
+++ b/src/app/entity-groups/research-entities/item-pages/project/project.component.html
@@ -9,12 +9,12 @@
 <div class="row">
   <div class="col-xs-12 col-md-4">
     <ds-metadata-field-wrapper [hideIfNoTextContent]="false">
-      <ds-thumbnail
+      <ds-themed-thumbnail
         [thumbnail]="object?.thumbnail | async"
         [defaultImage]="'assets/images/project-placeholder.svg'"
         [alt]="'thumbnail.project.alt'"
         [placeholder]="'thumbnail.project.placeholder'">
-      </ds-thumbnail>
+      </ds-themed-thumbnail>
     </ds-metadata-field-wrapper>
     <!--<ds-generic-item-page-field [item]="object"-->
       <!--[fields]="['project.identifier.status']"-->
diff --git a/src/app/entity-groups/research-entities/submission/item-list-elements/org-unit/org-unit-search-result-list-submission-element.component.html b/src/app/entity-groups/research-entities/submission/item-list-elements/org-unit/org-unit-search-result-list-submission-element.component.html
index 13787bb925..1db9b85769 100644
--- a/src/app/entity-groups/research-entities/submission/item-list-elements/org-unit/org-unit-search-result-list-submission-element.component.html
+++ b/src/app/entity-groups/research-entities/submission/item-list-elements/org-unit/org-unit-search-result-list-submission-element.component.html
@@ -1,6 +1,6 @@
 <div class="d-flex">
 <!--    <div class="person-thumbnail pr-2">-->
-<!--        <ds-thumbnail [thumbnail]="dso?.thumbnail | async" [defaultImage]="'assets/images/orgunit-placeholder.svg'"></ds-thumbnail>-->
+<!--        <ds-themed-thumbnail [thumbnail]="dso?.thumbnail | async" [defaultImage]="'assets/images/orgunit-placeholder.svg'"></ds-themed-thumbnail>-->
 <!--    </div>-->
     <div class="flex-grow-1">
         <ds-org-unit-input-suggestions *ngIf="useNameVariants" [suggestions]="allSuggestions" [(ngModel)]="selectedName" (clickSuggestion)="select($event)"
diff --git a/src/app/item-page/full/field-components/file-section/full-file-section.component.html b/src/app/item-page/full/field-components/file-section/full-file-section.component.html
index 33acd6650b..fbc2649ace 100644
--- a/src/app/item-page/full/field-components/file-section/full-file-section.component.html
+++ b/src/app/item-page/full/field-components/file-section/full-file-section.component.html
@@ -13,7 +13,7 @@
 
                 <div class="file-section row mb-3" *ngFor="let file of originals?.page;">
                     <div class="col-3">
-                        <ds-thumbnail [thumbnail]="(file.thumbnail | async)?.payload"></ds-thumbnail>
+                        <ds-themed-thumbnail [thumbnail]="(file.thumbnail | async)?.payload"></ds-themed-thumbnail>
                     </div>
                     <div class="col-7">
                         <dl class="row">
@@ -55,7 +55,7 @@
 
                 <div class="file-section row" *ngFor="let file of licenses?.page;">
                     <div class="col-3">
-                        <ds-thumbnail [thumbnail]="(file.thumbnail | async)?.payload"></ds-thumbnail>
+                        <ds-themed-thumbnail [thumbnail]="(file.thumbnail | async)?.payload"></ds-themed-thumbnail>
                     </div>
                     <div class="col-7">
                         <dl class="row">
diff --git a/src/app/item-page/simple/item-types/publication/publication.component.html b/src/app/item-page/simple/item-types/publication/publication.component.html
index bace9fcd0a..eee5c16a28 100644
--- a/src/app/item-page/simple/item-types/publication/publication.component.html
+++ b/src/app/item-page/simple/item-types/publication/publication.component.html
@@ -19,7 +19,7 @@
   <div class="col-xs-12 col-md-4">
     <ng-container *ngIf="!mediaViewer.image">
       <ds-metadata-field-wrapper [hideIfNoTextContent]="false">
-        <ds-thumbnail [thumbnail]="object?.thumbnail | async"></ds-thumbnail>
+        <ds-themed-thumbnail [thumbnail]="object?.thumbnail | async"></ds-themed-thumbnail>
       </ds-metadata-field-wrapper>
     </ng-container>
     <ng-container *ngIf="mediaViewer.image">
diff --git a/src/app/item-page/simple/item-types/untyped-item/untyped-item.component.html b/src/app/item-page/simple/item-types/untyped-item/untyped-item.component.html
index 04794717f1..232ee29483 100644
--- a/src/app/item-page/simple/item-types/untyped-item/untyped-item.component.html
+++ b/src/app/item-page/simple/item-types/untyped-item/untyped-item.component.html
@@ -22,7 +22,7 @@
   <div class="col-xs-12 col-md-4">
     <ng-container *ngIf="!mediaViewer.image">
       <ds-metadata-field-wrapper [hideIfNoTextContent]="false">
-        <ds-thumbnail [thumbnail]="object?.thumbnail | async"></ds-thumbnail>
+        <ds-themed-thumbnail [thumbnail]="object?.thumbnail | async"></ds-themed-thumbnail>
       </ds-metadata-field-wrapper>
     </ng-container>
     <ng-container *ngIf="mediaViewer.image">
diff --git a/src/app/shared/object-detail/my-dspace-result-detail-element/item-detail-preview/item-detail-preview.component.html b/src/app/shared/object-detail/my-dspace-result-detail-element/item-detail-preview/item-detail-preview.component.html
index 61e2955deb..8a32f10788 100644
--- a/src/app/shared/object-detail/my-dspace-result-detail-element/item-detail-preview/item-detail-preview.component.html
+++ b/src/app/shared/object-detail/my-dspace-result-detail-element/item-detail-preview/item-detail-preview.component.html
@@ -10,7 +10,7 @@
     <div class="row mb-1">
       <div class="col-xs-12 col-md-4">
         <ds-metadata-field-wrapper [hideIfNoTextContent]="false">
-          <ds-thumbnail [thumbnail]="item?.thumbnail | async"></ds-thumbnail>
+          <ds-themed-thumbnail [thumbnail]="item?.thumbnail | async"></ds-themed-thumbnail>
         </ds-metadata-field-wrapper>
         <ng-container *ngVar="(getFiles() | async) as bitstreams">
           <ds-metadata-field-wrapper [label]="('item.page.files' | translate)">
diff --git a/src/app/shared/object-grid/collection-grid-element/collection-grid-element.component.html b/src/app/shared/object-grid/collection-grid-element/collection-grid-element.component.html
index d47e897edc..9904fe7c55 100644
--- a/src/app/shared/object-grid/collection-grid-element/collection-grid-element.component.html
+++ b/src/app/shared/object-grid/collection-grid-element/collection-grid-element.component.html
@@ -1,11 +1,11 @@
 <div class="card">
   <a *ngIf="linkType != linkTypes.None" [target]="(linkType == linkTypes.ExternalLink) ? '_blank' : '_self'" rel="noopener noreferrer" [routerLink]="['/collections/', object.id]" class="card-img-top">
-    <ds-thumbnail [thumbnail]="(object.logo | async)?.payload" [limitWidth]="false">
-    </ds-thumbnail>
+    <ds-themed-thumbnail [thumbnail]="(object.logo | async)?.payload" [limitWidth]="false">
+    </ds-themed-thumbnail>
   </a>
   <span *ngIf="linkType == linkTypes.None" class="card-img-top">
-    <ds-thumbnail [thumbnail]="(object.logo | async)?.payload" [limitWidth]="false">
-    </ds-thumbnail>
+    <ds-themed-thumbnail [thumbnail]="(object.logo | async)?.payload" [limitWidth]="false">
+    </ds-themed-thumbnail>
   </span>
   <div class="card-body">
     <h4 class="card-title">{{object.name}}</h4>
diff --git a/src/app/shared/object-grid/community-grid-element/community-grid-element.component.html b/src/app/shared/object-grid/community-grid-element/community-grid-element.component.html
index 63097c4f57..4e08910fcc 100644
--- a/src/app/shared/object-grid/community-grid-element/community-grid-element.component.html
+++ b/src/app/shared/object-grid/community-grid-element/community-grid-element.component.html
@@ -1,11 +1,11 @@
 <div class="card">
   <a *ngIf="linkType != linkTypes.None" [target]="(linkType == linkTypes.ExternalLink) ? '_blank' : '_self'" rel="noopener noreferrer" [routerLink]="['/communities/', object.id]" class="card-img-top">
-    <ds-thumbnail [thumbnail]="(object.logo | async)?.payload" [limitWidth]="false">
-    </ds-thumbnail>
+    <ds-themed-thumbnail [thumbnail]="(object.logo | async)?.payload" [limitWidth]="false">
+    </ds-themed-thumbnail>
   </a>
   <span *ngIf="linkType == linkTypes.None" class="card-img-top">
-    <ds-thumbnail [thumbnail]="(object.logo | async)?.payload" [limitWidth]="false">
-    </ds-thumbnail>
+    <ds-themed-thumbnail [thumbnail]="(object.logo | async)?.payload" [limitWidth]="false">
+    </ds-themed-thumbnail>
   </span>
   <div class="card-body">
     <h4 class="card-title">{{object.name}}</h4>
diff --git a/src/app/shared/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.html b/src/app/shared/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.html
index 739fa6c7a8..126442e8f5 100644
--- a/src/app/shared/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.html
+++ b/src/app/shared/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.html
@@ -1,11 +1,11 @@
 <div class="card">
   <a *ngIf="linkType != linkTypes.None" [target]="(linkType == linkTypes.ExternalLink) ? '_blank' : '_self'" rel="noopener noreferrer" [routerLink]="['/collections/', dso.id]" class="card-img-top">
-    <ds-thumbnail [thumbnail]="(dso.logo | async)?.payload" [limitWidth]="false">
-    </ds-thumbnail>
+    <ds-themed-thumbnail [thumbnail]="(dso.logo | async)?.payload" [limitWidth]="false">
+    </ds-themed-thumbnail>
   </a>
   <span *ngIf="linkType == linkTypes.None" class="card-img-top">
-    <ds-thumbnail [thumbnail]="(dso.logo | async)?.payload" [limitWidth]="false">
-    </ds-thumbnail>
+    <ds-themed-thumbnail [thumbnail]="(dso.logo | async)?.payload" [limitWidth]="false">
+    </ds-themed-thumbnail>
   </span>
   <div class="card-body">
     <ds-type-badge *ngIf="showLabel" [object]="dso"></ds-type-badge>
diff --git a/src/app/shared/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.html b/src/app/shared/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.html
index d8c253c8a9..96f2312089 100644
--- a/src/app/shared/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.html
+++ b/src/app/shared/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.html
@@ -1,11 +1,11 @@
 <div class="card">
     <a *ngIf="linkType != linkTypes.None" [target]="(linkType == linkTypes.ExternalLink) ? '_blank' : '_self'" rel="noopener noreferrer" [routerLink]="['/communities/', dso.id]" class="card-img-top">
-        <ds-thumbnail [thumbnail]="(dso.logo | async)?.payload" [limitWidth]="false">
-        </ds-thumbnail>
+        <ds-themed-thumbnail [thumbnail]="(dso.logo | async)?.payload" [limitWidth]="false">
+        </ds-themed-thumbnail>
     </a>
     <span *ngIf="linkType == linkTypes.None" class="card-img-top">
-    <ds-thumbnail [thumbnail]="(dso.logo | async)?.payload" [limitWidth]="false">
-    </ds-thumbnail>
+    <ds-themed-thumbnail [thumbnail]="(dso.logo | async)?.payload" [limitWidth]="false">
+    </ds-themed-thumbnail>
   </span>
     <div class="card-body">
         <ds-type-badge *ngIf="showLabel" [object]="dso"></ds-type-badge>
diff --git a/src/app/shared/object-grid/search-result-grid-element/item-search-result/item/item-search-result-grid-element.component.html b/src/app/shared/object-grid/search-result-grid-element/item-search-result/item/item-search-result-grid-element.component.html
index d2454b28e6..a7c805f2da 100644
--- a/src/app/shared/object-grid/search-result-grid-element/item-search-result/item/item-search-result-grid-element.component.html
+++ b/src/app/shared/object-grid/search-result-grid-element/item-search-result/item/item-search-result-grid-element.component.html
@@ -6,14 +6,14 @@
       <a *ngIf="linkType != linkTypes.None" [target]="(linkType == linkTypes.ExternalLink) ? '_blank' : '_self'" rel="noopener noreferrer" [routerLink]="[itemPageRoute]"
          class="card-img-top full-width">
           <div>
-              <ds-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
-              </ds-thumbnail>
+              <ds-themed-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
+              </ds-themed-thumbnail>
           </div>
       </a>
       <span *ngIf="linkType == linkTypes.None" class="card-img-top full-width">
           <div>
-              <ds-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
-              </ds-thumbnail>
+              <ds-themed-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
+              </ds-themed-thumbnail>
           </div>
       </span>
       <div class="card-body">
diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts
index 715ee66a99..2c3426da13 100644
--- a/src/app/shared/shared.module.ts
+++ b/src/app/shared/shared.module.ts
@@ -43,6 +43,7 @@ import { ErrorComponent } from './error/error.component';
 import { LoadingComponent } from './loading/loading.component';
 import { PaginationComponent } from './pagination/pagination.component';
 import { ThumbnailComponent } from '../thumbnail/thumbnail.component';
+import { ThemedThumbnailComponent } from '../thumbnail/themed-thumbnail.component';
 import { SearchFormComponent } from './search-form/search-form.component';
 import { SearchResultGridElementComponent } from './object-grid/search-result-grid-element/search-result-grid-element.component';
 import { ViewModeSwitchComponent } from './view-mode-switch/view-mode-switch.component';
@@ -249,6 +250,7 @@ const COMPONENTS = [
   SidebarFilterComponent,
   SidebarFilterSelectedOptionComponent,
   ThumbnailComponent,
+  ThemedThumbnailComponent,
   UploaderComponent,
   FileDropzoneNoUploaderComponent,
   ItemListPreviewComponent,
diff --git a/src/app/submission/sections/upload/file/section-upload-file.component.html b/src/app/submission/sections/upload/file/section-upload-file.component.html
index 1bfc52529b..5f8fe3b9ee 100644
--- a/src/app/submission/sections/upload/file/section-upload-file.component.html
+++ b/src/app/submission/sections/upload/file/section-upload-file.component.html
@@ -1,8 +1,8 @@
 <ng-container *ngIf="fileData">
   <div class="row">
     <div class="col-md-2">
-      <!--ds-thumbnail [thumbnail]="bitstreamsList[bitstreamKey].url | async"></ds-thumbnail-->
-      <ds-thumbnail [thumbnail]="fileData?.thumbnail"></ds-thumbnail>
+      <!--ds-themed-thumbnail [thumbnail]="bitstreamsList[bitstreamKey].url | async"></ds-themed-thumbnail-->
+      <ds-themed-thumbnail [thumbnail]="fileData?.thumbnail"></ds-themed-thumbnail>
     </div>
     <div class="col-md-10">
       <div class="float-left w-75">
diff --git a/src/app/thumbnail/themed-thumbnail.component.ts b/src/app/thumbnail/themed-thumbnail.component.ts
new file mode 100644
index 0000000000..2a8d809104
--- /dev/null
+++ b/src/app/thumbnail/themed-thumbnail.component.ts
@@ -0,0 +1,44 @@
+import { ThemedComponent } from '../shared/theme-support/themed.component';
+import { Component, Input } from '@angular/core';
+import { ThumbnailComponent } from './thumbnail.component';
+import { Bitstream } from '../core/shared/bitstream.model';
+import { RemoteData } from '../core/data/remote-data';
+
+@Component({
+  selector: 'ds-themed-thumbnail',
+  styleUrls: [],
+  templateUrl: '../shared/theme-support/themed.component.html',
+})
+export class ThemedThumbnailComponent extends ThemedComponent<ThumbnailComponent> {
+
+  @Input() thumbnail: Bitstream | RemoteData<Bitstream>;
+
+  @Input() defaultImage?: string | null;
+
+  @Input() alt?: string;
+
+  @Input() placeholder?: string;
+
+  @Input() limitWidth?: boolean;
+
+  protected inAndOutputNames: (keyof ThumbnailComponent & keyof this)[] = [
+    'thumbnail',
+    'defaultImage',
+    'alt',
+    'placeholder',
+    'limitWidth',
+  ];
+
+  protected getComponentName(): string {
+    return 'ThumbnailComponent';
+  }
+
+  protected importThemedComponent(themeName: string): Promise<any> {
+    return import(`../../themes/${themeName}/app/thumbnail/thumbnail.component`);
+  }
+
+  protected importUnthemedComponent(): Promise<any> {
+    return import('./thumbnail.component');
+  }
+
+}