Merge pull request #34022 from nextcloud/fix/dark-avatar-user-list

Fix avatar icons in user list when using dark theme

4 files changed, 37 insertions, 12 deletions

diff --git a/apps/settings/src/components/UserList.vue b/apps/settings/src/components/UserList.vue
index d64868651e6..723673de076 100644
--- a/apps/settings/src/components/UserList.vue
+++ b/apps/settings/src/components/UserList.vue
@@ -212,7 +212,8 @@
 			:settings="settings"
 			:show-config="showConfig"
 			:sub-admins-groups="subAdminsGroups"
-			:user="user" />
+			:user="user"
+			:is-dark-theme="isDarkTheme" />
 		<InfiniteLoading ref="infiniteLoading" @infinite="infiniteHandler">
 			<div slot="spinner">
 				<div class="users-icon-loading icon-loading" />
@@ -378,6 +379,10 @@ export default {
 				},
 			]
 		},
+		isDarkTheme() {
+			return window.getComputedStyle(this.$el)
+				.getPropertyValue('--background-invert-if-dark') === 'invert(100%)'
+		},
 	},
 	watch: {
 		// watch url change and group select
diff --git a/apps/settings/src/components/UserList/UserRow.vue b/apps/settings/src/components/UserList/UserRow.vue
index 820a90fb1e3..3254c17d4ce 100644
--- a/apps/settings/src/components/UserList/UserRow.vue
+++ b/apps/settings/src/components/UserList/UserRow.vue
@@ -28,7 +28,7 @@
 		<div :class="{'icon-loading-small': loading.delete || loading.disable || loading.wipe}"
 			class="avatar">
 			<img v-if="!loading.delete && !loading.disable && !loading.wipe"
-				:src="generateAvatar(user.id)"
+				:src="generateAvatar(user.id, isDarkTheme)"
 				alt=""
 				height="32"
 				width="32">
@@ -54,6 +54,7 @@
 		:sub-admins-groups="subAdminsGroups"
 		:user-actions="userActions"
 		:user="user"
+		:is-dark-theme="isDarkTheme"
 		:class="{'row--menu-opened': openedMenu}" />
 	<div v-else
 		:class="{
@@ -65,7 +66,7 @@
 		<div :class="{'icon-loading-small': loading.delete || loading.disable || loading.wipe}"
 			class="avatar">
 			<img v-if="!loading.delete && !loading.disable && !loading.wipe"
-				:src="generateAvatar(user.id)"
+				:src="generateAvatar(user.id, isDarkTheme)"
 				alt=""
 				height="32"
 				width="32">
@@ -295,6 +296,10 @@ export default {
 			type: Array,
 			default: () => [],
 		},
+		isDarkTheme: {
+			type: Boolean,
+			required: true,
+		},
 	},
 	data() {
 		return {
diff --git a/apps/settings/src/components/UserList/UserRowSimple.vue b/apps/settings/src/components/UserList/UserRowSimple.vue
index 105994e2f75..95d2b203d34 100644
--- a/apps/settings/src/components/UserList/UserRowSimple.vue
+++ b/apps/settings/src/components/UserList/UserRowSimple.vue
@@ -7,7 +7,7 @@
 				alt=""
 				width="32"
 				height="32"
-				:src="generateAvatar(user.id)" />
+				:src="generateAvatar(user.id, isDarkTheme)" />
 		</div>
 		<!-- dirty hack to ellipsis on two lines -->
 		<div class="name">
@@ -130,6 +130,10 @@ export default {
 			type: Object,
 			required: true,
 		},
+		isDarkTheme: {
+			type: Boolean,
+			required: true,
+		},
 	},
 	computed: {
 		userGroupsLabels() {
diff --git a/apps/settings/src/mixins/UserRowMixin.js b/apps/settings/src/mixins/UserRowMixin.js
index 6342419e9da..23ed7a1ffab 100644
--- a/apps/settings/src/mixins/UserRowMixin.js
+++ b/apps/settings/src/mixins/UserRowMixin.js
@@ -158,16 +158,27 @@ export default {
 		 * Generate avatar url
 		 *
 		 * @param {string} user The user name
+		 * @param {bool} isDarkTheme Whether the avatar should be the dark version
 		 * @return {string}
 		 */
-		generateAvatar(user) {
-			return generateUrl(
-				'/avatar/{user}/64?v={version}',
-				{
-					user,
-					version: oc_userconfig.avatar.version,
-				}
-			)
+		generateAvatar(user, isDarkTheme) {
+			if (isDarkTheme) {
+				return generateUrl(
+					'/avatar/{user}/64/dark?v={version}',
+					{
+						user,
+						version: oc_userconfig.avatar.version,
+					}
+				)
+			} else {
+				return generateUrl(
+					'/avatar/{user}/64?v={version}',
+					{
+						user,
+						version: oc_userconfig.avatar.version,
+					}
+				)
+			}
 		},
 	},
 }