diff --git a/apps/files/css/files.scss b/apps/files/css/files.scss
index 194d1542de9ff..e6d982e5c7a38 100644
--- a/apps/files/css/files.scss
+++ b/apps/files/css/files.scss
@@ -348,18 +348,19 @@ table td.filename .thumbnail-wrapper.icon-loading-small {
 	}
 }
 table td.filename .thumbnail {
-	display: inline-block;
-	width: 32px;
-	height: 32px;
-	background-size: contain;
-	background-position: center;
-	background-repeat: no-repeat;
-	margin-left: 9px;
-	margin-top: 9px;
-	border-radius: var(--border-radius);
-	cursor: pointer;
-	position: absolute;
-	z-index: 4;
+    display: inline-block;
+    width: 32px;
+    height: 32px;
+    background-size: contain;
+    background-position: center;
+    background-repeat: no-repeat;
+    margin-left: 9px;
+    margin-top: 9px;
+    border-radius: var(--border-radius);
+    cursor: pointer;
+    position: absolute;
+    z-index: 4;
+    
 }
 table td.filename p.name .thumbnail {
 	cursor: default;
diff --git a/apps/files/src/views/ReferenceFileWidget.vue b/apps/files/src/views/ReferenceFileWidget.vue
index 896105f02070d..b3e7db3e49096 100644
--- a/apps/files/src/views/ReferenceFileWidget.vue
+++ b/apps/files/src/views/ReferenceFileWidget.vue
@@ -55,7 +55,7 @@
 		:href="richObject.link"
 		target="_blank"
 		@click="navigate">
-		<span class="widget-file__image" :class="filePreviewClass" :style="filePreviewStyle">
+		<span class="widget-file__image" :class="filePreviewClass" :style="{ backgroundColor: primaryColor }">
 			<template v-if="!previewUrl">
 				<FolderIcon v-if="isFolder" :size="88" />
 				<FileIcon v-else :size="88" />
@@ -141,6 +141,7 @@ export default defineComponent({
 		return {
 			previewUrl: null as string | null,
 			failedViewer: false,
+			primaryColor: 'var(--primary-color)'
 		}
 	},
 
@@ -276,6 +277,7 @@ export default defineComponent({
 			display: flex;
 			align-items: center;
 			justify-content: center;
+			color: var(--primary-color);
 		}
 	}