{{ emojiAvatar }}
@@ -141,6 +141,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 +229,10 @@ export default {
return this.conversation.isCustomAvatar
},
+ themeClass() {
+ return `avatar__preview-emoji--${isDarkTheme ? 'dark' : 'bright'}`
+ },
+
showControls() {
return this.editable && (this.showCropper || this.emojiAvatar)
},
@@ -434,6 +439,10 @@ section {
background-color: var(--color-text-maxcontrast);
font-size: 575%;
line-height: 100%;
+
+ &--dark {
+ background-color: #3B3B3B;
+ }
}
}
diff --git a/tests/integration/features/conversation-1/avatar.feature b/tests/integration/features/conversation-1/avatar.feature
index 65fad276cb1..4be4c165b86 100644
--- a/tests/integration/features/conversation-1/avatar.feature
+++ b/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"