fix(conversations): Make avatars dark in dark mode again

Signed-off-by: Joas Schilling <coding@schilljs.com>

lib/Service/AvatarService.php

@@ -43,7 +43,7 @@
 
 class AvatarService {
 	public const THEMING_PLACEHOLDER = '{{THEMING}}';
-	public const THEMING_DARK_BACKGROUND = '999999';
+	public const THEMING_DARK_BACKGROUND = '3B3B3B';
 	public const THEMING_BRIGHT_BACKGROUND = '6B6B6B';
 
 	public function __construct(

src/components/ConversationIcon.vue

@@ -26,15 +26,16 @@
 		<template v-if="!isOneToOne">
 			<div v-if="iconClass"
 				class="avatar icon"
-				:class="iconClass" />
+				:class="iconClass + ' ' + iconThemeClass" />
 			<!-- img is used here instead of NcAvatar to explicitly set key required to avoid glitching in virtual scrolling  -->
 			<img v-else
 				:key="avatarUrl"
 				:src="avatarUrl"
 				:width="size"
 				:height="size"
 				:alt="item.displayName"
-				class="avatar icon">
+				class="avatar icon"
+				:class="iconThemeClass">
 			<span v-if="!hideUserStatus && conversationType"
 				class="conversation-icon__type"
 				role="img"
@@ -181,8 +182,7 @@ export default {
 				// Also used in new conversation / invitation handler dialog
 				const isFed = this.item.remoteServer && 'icon-conversation-federation'
 				const type = this.item.type === CONVERSATION.TYPE.PUBLIC ? 'icon-conversation-public' : 'icon-conversation-group'
-				const theme = isDarkTheme ? 'dark' : 'bright'
-				return `${isFed || type} icon--dummy icon--${theme}`
+				return `${isFed || type} icon--dummy`
 			}
 
 			if (!supportsAvatar) {
@@ -220,6 +220,11 @@ export default {
 			return undefined
 		},
 
+		iconThemeClass() {
+			const theme = isDarkTheme ? 'dark' : 'bright'
+			return `icon--${theme}`
+		},
+
 		isOneToOne() {
 			return this.item.type === CONVERSATION.TYPE.ONE_TO_ONE
 		},
@@ -257,6 +262,9 @@ export default {
 		line-height: var(--icon-size);
 		background-size: calc(var(--icon-size) / 2);
 		background-color: var(--color-text-maxcontrast-default);
+		&.icon--dark {
+			background-color: #3B3B3B;
+		}
 
 		&--dummy {
 			background-size: var(--icon-size);

src/components/ConversationSettings/ConversationAvatarEditor.vue

@@ -26,7 +26,8 @@
 		<div class="avatar__container">
 			<div v-if="!showCropper" class="avatar__preview">
 				<div v-if="emojiAvatar"
-					class="avatar__preview-emoji"
+					class="avatar__preview-emoji icon--"
+					:class="'icon--' + theme"
 					:style="{'background-color': backgroundColor}">
 					{{ emojiAvatar }}
 				</div>
@@ -141,6 +142,7 @@ import NcEmojiPicker from '@nextcloud/vue/dist/Components/NcEmojiPicker.js'
 import ConversationIcon from '../ConversationIcon.vue'
 
 import { AVATAR } from '../../constants.js'
+import { isDarkTheme } from '../../utils/isDarkTheme.js'
 
 // eslint-disable-next-line n/no-extraneous-import
 import 'cropperjs/dist/cropper.css'
@@ -228,6 +230,10 @@ export default {
 			return this.conversation.isCustomAvatar
 		},
 
+		theme() {
+			return isDarkTheme ? 'dark' : 'bright'
+		},
+
 		showControls() {
 			return this.editable && (this.showCropper || this.emojiAvatar)
 		},
@@ -434,6 +440,10 @@ section {
 			background-color: var(--color-text-maxcontrast);
 			font-size: 575%;
 			line-height: 100%;
+
+			&.icon--dark {
+				background-color: #3B3B3B;
+			}
 		}
 	}
 

tests/integration/features/conversation-1/avatar.feature

@@ -150,7 +150,7 @@ Feature: conversation/avatar
     Then user "participant1" sets emoji "🍏" with color "null" as avatar of room "room" with 200 (v1)
     And the avatar svg of room "room" contains the string "🍏"
     And the avatar svg of room "room" contains the string "6B6B6B"
-    And the avatar svg of room "room" not contains the string "999999"
+    And the avatar svg of room "room" not contains the string "3B3B3B"
     And the dark avatar svg of room "room" contains the string "🍏"
     And the dark avatar svg of room "room" not contains the string "6B6B6B"
-    And the dark avatar svg of room "room" contains the string "999999"
+    And the dark avatar svg of room "room" contains the string "3B3B3B"