Fix

src/client/app/admin/views/drive.vue

@@ -153,7 +153,7 @@ export default Vue.extend({
 
 		thumbnail(file: any): any {
 			return {
-				'background-color': file.properties.avgColor && file.properties.avgColor.length == 3 ? `rgb(${file.properties.avgColor.join(',')})` : 'transparent',
+				'background-color': file.properties.avgColor || 'transparent',
 				'background-image': `url(${file.thumbnailUrl})`
 			};
 		},

src/client/app/common/views/components/avatar.vue

@@ -55,12 +55,7 @@ export default Vue.extend({
 		},
 		icon(): any {
 			return {
-				backgroundColor: this.user.avatarColor ? this.lightmode
+				backgroundColor: this.user.avatarColor,
-					? this.user.avatarColor
-					: this.user.avatarColor.startsWith('rgb(')
-						? this.user.avatarColor
-						: null
-					: null,
 				backgroundImage: this.lightmode ? null : `url(${this.url})`,
 				borderRadius: this.$store.state.settings.circleIcons ? '100%' : null
 			};

src/client/app/common/views/components/drive-file-thumbnail.vue

@@ -111,9 +111,7 @@ export default Vue.extend({
 				: false;
 		},
 		background(): string {
-			return this.file.properties.avgColor && this.file.properties.avgColor.length == 3
+			return this.file.properties.avgColor || 'transparent';
-				? `rgb(${this.file.properties.avgColor.join(',')})`
-				: 'transparent';
 		}
 	},
 	mounted() {
@@ -122,10 +120,10 @@ export default Vue.extend({
 	},
 	methods: {
 		onThumbnailLoaded() {
-			if (this.file.properties.avgColor && this.file.properties.avgColor.length == 3) {
+			if (this.file.properties.avgColor) {
 				anime({
 					targets: this.$refs.thumbnail,
-					backgroundColor: `rgba(${this.file.properties.avgColor.join(',')}, 0)`,
+					backgroundColor: this.file.properties.avgColor.replace('255)', '0)'),
 					duration: 100,
 					easing: 'linear'
 				});

src/client/app/common/views/components/media-image.vue

@@ -52,7 +52,7 @@ export default Vue.extend({
 			}
 
 			return {
-				'background-color': this.image.properties.avgColor && this.image.properties.avgColor.length == 3 ? `rgb(${this.image.properties.avgColor.join(',')})` : 'transparent',
+				'background-color': this.image.properties.avgColor || 'transparent',
 				'background-image': url
 			};
 		}

src/client/app/common/views/components/messaging-room.message.vue

@@ -11,7 +11,7 @@
 				<div class="file" v-if="message.file">
 					<a :href="message.file.url" target="_blank" :title="message.file.name">
 						<img v-if="message.file.type.split('/')[0] == 'image'" :src="message.file.url" :alt="message.file.name"
-							:style="{ backgroundColor: message.file.properties.avgColor && message.file.properties.avgColor.length == 3 ? `rgb(${message.file.properties.avgColor.join(',')})` : 'transparent' }"/>
+							:style="{ backgroundColor: message.file.properties.avgColor || 'transparent' }"/>
 						<p v-else>{{ message.file.name }}</p>
 					</a>
 				</div>

src/client/app/common/views/components/settings/profile.vue

@@ -165,7 +165,7 @@ export default Vue.extend({
 		bannerStyle(): any {
 			if (this.$store.state.i.bannerUrl == null) return {};
 			return {
-				backgroundColor: this.$store.state.i.bannerColor ? this.$store.state.i.bannerColor : null,
+				backgroundColor: this.$store.state.i.bannerColor,
 				backgroundImage: `url(${ this.$store.state.i.bannerUrl })`
 			};
 		},

src/client/app/common/views/deck/deck.user-column.vue

@@ -88,7 +88,7 @@ export default Vue.extend({
 			if (this.user == null) return {};
 			if (this.user.bannerUrl == null) return {};
 			return {
-				backgroundColor: this.user.bannerColor && this.user.bannerColor.length == 3 ? `rgb(${ this.user.bannerColor.join(',') })` : null,
+				backgroundColor: this.user.bannerColor,
 				backgroundImage: `url(${ this.user.bannerUrl })`
 			};
 		},

src/client/app/common/views/pages/follow.vue

@@ -57,7 +57,7 @@ export default Vue.extend({
 		bannerStyle(): any {
 			if (this.user.bannerUrl == null) return {};
 			return {
-				backgroundColor: this.user.bannerColor && this.user.bannerColor.length == 3 ? `rgb(${ this.user.bannerColor.join(',') })` : null,
+				backgroundColor: this.user.bannerColor,
 				backgroundImage: `url(${ this.user.bannerUrl })`
 			};
 		}

src/client/app/desktop/views/components/drive.file.vue

@@ -139,10 +139,10 @@ export default Vue.extend({
 		},
 
 		onThumbnailLoaded() {
-			if (this.file.properties.avgColor && this.file.properties.avgColor.length == 3) {
+			if (this.file.properties.avgColor) {
 				anime({
 					targets: this.$refs.thumbnail,
-					backgroundColor: `rgba(${this.file.properties.avgColor.join(',')}, 0)`,
+					backgroundColor: this.file.properties.avgColor.replace('255)', '0)'),
 					duration: 100,
 					easing: 'linear'
 				});

src/client/app/desktop/views/home/user/user.header.vue

@@ -65,7 +65,7 @@ export default Vue.extend({
 		style(): any {
 			if (this.user.bannerUrl == null) return {};
 			return {
-				backgroundColor: this.user.bannerColor && this.user.bannerColor.length == 3 ? `rgb(${ this.user.bannerColor.join(',') })` : null,
+				backgroundColor: this.user.bannerColor,
 				backgroundImage: `url(${ this.user.bannerUrl })`
 			};
 		},

src/client/app/mobile/views/components/drive.file-detail.vue

@@ -85,8 +85,8 @@ export default Vue.extend({
 		},
 
 		style(): any {
-			return this.file.properties.avgColor && this.file.properties.avgColor.length == 3 ? {
+			return this.file.properties.avgColor ? {
-				'background-color': `rgb(${ this.file.properties.avgColor.join(',') })`
+				'background-color': this.file.properties.avgColor
 			} : {};
 		},
 

src/client/app/mobile/views/pages/user/index.vue

@@ -114,7 +114,7 @@ export default Vue.extend({
 		style(): any {
 			if (this.user.bannerUrl == null) return {};
 			return {
-				backgroundColor: this.user.bannerColor && this.user.bannerColor.length == 3 ? `rgb(${ this.user.bannerColor.join(',') })` : null,
+				backgroundColor: this.user.bannerColor,
 				backgroundImage: `url(${ this.user.bannerUrl })`
 			};
 		}

src/services/drive/add-file.ts

@@ -356,7 +356,7 @@ export default async function(
 
 				logger.debug(`average color is calculated: ${r}, ${g}, ${b}`);
 
-				const value = info.isOpaque ? `rgb(${r},${g},${b})` : `rgba(${r},${g},${b},255)`;
+				const value = info.isOpaque ? `rgba(${r},${g},${b},0)` : `rgba(${r},${g},${b},255)`;
 
 				properties['avgColor'] = value;
 			} catch (e) { }