From 7255d4f07b5361574ec7d3ad448dc8b2b3e00c61 Mon Sep 17 00:00:00 2001
From: Joas Schilling <coding@schilljs.com>
Date: Mon, 18 Mar 2024 12:15:27 +0100
Subject: [PATCH] fix(conversations): Make avatars dark in dark mode again

Signed-off-by: Joas Schilling <coding@schilljs.com>
Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 img/icon-conversation-federation-dark.svg           |  4 ++--
 img/icon-conversation-group-dark.svg                |  4 ++--
 img/icon-conversation-mail-dark.svg                 |  4 ++--
 img/icon-conversation-password-dark.svg             |  4 ++--
 img/icon-conversation-phone-dark.svg                |  4 ++--
 img/icon-conversation-public-dark.svg               |  4 ++--
 img/icon-conversation-text-dark.svg                 |  4 ++--
 img/icon-conversation-user-dark.svg                 |  4 ++--
 lib/Service/AvatarService.php                       |  2 +-
 src/components/ConversationIcon.vue                 | 13 ++++++++++---
 .../ConversationAvatarEditor.vue                    | 11 ++++++++++-
 .../features/conversation-1/avatar.feature          |  4 ++--
 12 files changed, 39 insertions(+), 23 deletions(-)

diff --git a/img/icon-conversation-federation-dark.svg b/img/icon-conversation-federation-dark.svg
index 6c726794f11..11c24802c01 100644
--- a/img/icon-conversation-federation-dark.svg
+++ b/img/icon-conversation-federation-dark.svg
@@ -1,6 +1,6 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" height="24" width="24" version="1.1">
-	<circle r="18" cx="18" cy="18" fill="#999999"/>
+	<circle r="18" cx="18" cy="18" fill="#3B3B3B"/>
 	<g transform="translate(6.000000, 6.000000)">
-		<path fill="#000" d="M16.36,14C16.44,13.34 16.5,12.68 16.5,12C16.5,11.32 16.44,10.66 16.36,10H19.74C19.9,10.64 20,11.31 20,12C20,12.69 19.9,13.36 19.74,14M14.59,19.56C15.19,18.45 15.65,17.25 15.97,16H18.92C17.96,17.65 16.43,18.93 14.59,19.56M14.34,14H9.66C9.56,13.34 9.5,12.68 9.5,12C9.5,11.32 9.56,10.65 9.66,10H14.34C14.43,10.65 14.5,11.32 14.5,12C14.5,12.68 14.43,13.34 14.34,14M12,19.96C11.17,18.76 10.5,17.43 10.09,16H13.91C13.5,17.43 12.83,18.76 12,19.96M8,8H5.08C6.03,6.34 7.57,5.06 9.4,4.44C8.8,5.55 8.35,6.75 8,8M5.08,16H8C8.35,17.25 8.8,18.45 9.4,19.56C7.57,18.93 6.03,17.65 5.08,16M4.26,14C4.1,13.36 4,12.69 4,12C4,11.31 4.1,10.64 4.26,10H7.64C7.56,10.66 7.5,11.32 7.5,12C7.5,12.68 7.56,13.34 7.64,14M12,4.03C12.83,5.23 13.5,6.57 13.91,8H10.09C10.5,6.57 11.17,5.23 12,4.03M18.92,8H15.97C15.65,6.75 15.19,5.55 14.59,4.44C16.43,5.07 17.96,6.34 18.92,8M12,2C6.47,2 2,6.5 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" />
+		<path fill="#fff" d="M16.36,14C16.44,13.34 16.5,12.68 16.5,12C16.5,11.32 16.44,10.66 16.36,10H19.74C19.9,10.64 20,11.31 20,12C20,12.69 19.9,13.36 19.74,14M14.59,19.56C15.19,18.45 15.65,17.25 15.97,16H18.92C17.96,17.65 16.43,18.93 14.59,19.56M14.34,14H9.66C9.56,13.34 9.5,12.68 9.5,12C9.5,11.32 9.56,10.65 9.66,10H14.34C14.43,10.65 14.5,11.32 14.5,12C14.5,12.68 14.43,13.34 14.34,14M12,19.96C11.17,18.76 10.5,17.43 10.09,16H13.91C13.5,17.43 12.83,18.76 12,19.96M8,8H5.08C6.03,6.34 7.57,5.06 9.4,4.44C8.8,5.55 8.35,6.75 8,8M5.08,16H8C8.35,17.25 8.8,18.45 9.4,19.56C7.57,18.93 6.03,17.65 5.08,16M4.26,14C4.1,13.36 4,12.69 4,12C4,11.31 4.1,10.64 4.26,10H7.64C7.56,10.66 7.5,11.32 7.5,12C7.5,12.68 7.56,13.34 7.64,14M12,4.03C12.83,5.23 13.5,6.57 13.91,8H10.09C10.5,6.57 11.17,5.23 12,4.03M18.92,8H15.97C15.65,6.75 15.19,5.55 14.59,4.44C16.43,5.07 17.96,6.34 18.92,8M12,2C6.47,2 2,6.5 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" />
 	</g>
 </svg>
\ No newline at end of file
diff --git a/img/icon-conversation-group-dark.svg b/img/icon-conversation-group-dark.svg
index 482009f06d9..c61b54be0a6 100644
--- a/img/icon-conversation-group-dark.svg
+++ b/img/icon-conversation-group-dark.svg
@@ -1,6 +1,6 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44" height="22" width="22" version="1.1">
-	<circle r="22" cx="22" cy="22" fill="#999999"/>
+	<circle r="22" cx="22" cy="22" fill="#3B3B3B"/>
 	<g transform="translate(10.000000, 10.000000)">
-		<path fill="#000" d="M16 17V19H2V17S2 13 9 13 16 17 16 17M12.5 7.5A3.5 3.5 0 1 0 9 11A3.5 3.5 0 0 0 12.5 7.5M15.94 13A5.32 5.32 0 0 1 18 17V19H22V17S22 13.37 15.94 13M15 4A3.39 3.39 0 0 0 13.07 4.59A5 5 0 0 1 13.07 10.41A3.39 3.39 0 0 0 15 11A3.5 3.5 0 0 0 15 4Z" />
+		<path fill="#fff" d="M16 17V19H2V17S2 13 9 13 16 17 16 17M12.5 7.5A3.5 3.5 0 1 0 9 11A3.5 3.5 0 0 0 12.5 7.5M15.94 13A5.32 5.32 0 0 1 18 17V19H22V17S22 13.37 15.94 13M15 4A3.39 3.39 0 0 0 13.07 4.59A5 5 0 0 1 13.07 10.41A3.39 3.39 0 0 0 15 11A3.5 3.5 0 0 0 15 4Z" />
 	</g>
 </svg>
diff --git a/img/icon-conversation-mail-dark.svg b/img/icon-conversation-mail-dark.svg
index f07c2fc1e39..30423fe5676 100644
--- a/img/icon-conversation-mail-dark.svg
+++ b/img/icon-conversation-mail-dark.svg
@@ -1,6 +1,6 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44" height="22" width="22" version="1.1">
-	<circle r="22" cx="22" cy="22" fill="#999999"/>
+	<circle r="22" cx="22" cy="22" fill="#3B3B3B"/>
 	<g transform="translate(10.000000, 10.000000)">
-		<path fill="#000" d="M20,8L12,13L4,8V6L12,11L20,6M20,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V6C22,4.89 21.1,4 20,4Z"/>
+		<path fill="#fff" d="M20,8L12,13L4,8V6L12,11L20,6M20,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V6C22,4.89 21.1,4 20,4Z"/>
 	</g>
 </svg>
diff --git a/img/icon-conversation-password-dark.svg b/img/icon-conversation-password-dark.svg
index f7c63a03b4f..459ca3e7f2c 100644
--- a/img/icon-conversation-password-dark.svg
+++ b/img/icon-conversation-password-dark.svg
@@ -1,6 +1,6 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44" height="22" width="22" version="1.1">
-	<circle r="22" cx="22" cy="22" fill="#999999"/>
+	<circle r="22" cx="22" cy="22" fill="#3B3B3B"/>
 	<g transform="translate(10.000000, 10.000000)">
-		<path fill="#000" d="M12,17A2,2 0 0,0 14,15C14,13.89 13.1,13 12,13A2,2 0 0,0 10,15A2,2 0 0,0 12,17M18,8A2,2 0 0,1 20,10V20A2,2 0 0,1 18,22H6A2,2 0 0,1 4,20V10C4,8.89 4.9,8 6,8H7V6A5,5 0 0,1 12,1A5,5 0 0,1 17,6V8H18M12,3A3,3 0 0,0 9,6V8H15V6A3,3 0 0,0 12,3Z"/>
+		<path fill="#fff" d="M12,17A2,2 0 0,0 14,15C14,13.89 13.1,13 12,13A2,2 0 0,0 10,15A2,2 0 0,0 12,17M18,8A2,2 0 0,1 20,10V20A2,2 0 0,1 18,22H6A2,2 0 0,1 4,20V10C4,8.89 4.9,8 6,8H7V6A5,5 0 0,1 12,1A5,5 0 0,1 17,6V8H18M12,3A3,3 0 0,0 9,6V8H15V6A3,3 0 0,0 12,3Z"/>
 	</g>
 </svg>
diff --git a/img/icon-conversation-phone-dark.svg b/img/icon-conversation-phone-dark.svg
index 56e4e8079e4..55061f2bc7e 100644
--- a/img/icon-conversation-phone-dark.svg
+++ b/img/icon-conversation-phone-dark.svg
@@ -1,6 +1,6 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44" height="22" width="22" version="1.1">
-	<circle r="22" cx="22" cy="22" fill="#999999"/>
+	<circle r="22" cx="22" cy="22" fill="#3B3B3B"/>
 	<g transform="translate(10.000000, 10.000000)">
-		<path fill="#000" d="M6.62,10.79C8.06,13.62 10.38,15.94 13.21,17.38L15.41,15.18C15.69,14.9 16.08,14.82 16.43,14.93C17.55,15.3 18.75,15.5 20,15.5A1,1 0 0,1 21,16.5V20A1,1 0 0,1 20,21A17,17 0 0,1 3,4A1,1 0 0,1 4,3H7.5A1,1 0 0,1 8.5,4C8.5,5.25 8.7,6.45 9.07,7.57C9.18,7.92 9.1,8.31 8.82,8.59L6.62,10.79Z"/>
+		<path fill="#fff" d="M6.62,10.79C8.06,13.62 10.38,15.94 13.21,17.38L15.41,15.18C15.69,14.9 16.08,14.82 16.43,14.93C17.55,15.3 18.75,15.5 20,15.5A1,1 0 0,1 21,16.5V20A1,1 0 0,1 20,21A17,17 0 0,1 3,4A1,1 0 0,1 4,3H7.5A1,1 0 0,1 8.5,4C8.5,5.25 8.7,6.45 9.07,7.57C9.18,7.92 9.1,8.31 8.82,8.59L6.62,10.79Z"/>
 	</g>
 </svg>
diff --git a/img/icon-conversation-public-dark.svg b/img/icon-conversation-public-dark.svg
index 02af232224c..be2d729b998 100644
--- a/img/icon-conversation-public-dark.svg
+++ b/img/icon-conversation-public-dark.svg
@@ -1,6 +1,6 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44" height="22" width="22" version="1.1">
-	<circle r="22" cx="22" cy="22" fill="#999999"/>
+	<circle r="22" cx="22" cy="22" fill="#3B3B3B"/>
 	<g transform="translate(10.000000, 10.000000)">
-		<path fill="#000" d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z" />
+		<path fill="#fff" d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z" />
 	</g>
 </svg>
diff --git a/img/icon-conversation-text-dark.svg b/img/icon-conversation-text-dark.svg
index 7f2b9656e7c..8c4b5cf3138 100644
--- a/img/icon-conversation-text-dark.svg
+++ b/img/icon-conversation-text-dark.svg
@@ -1,6 +1,6 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44" height="22" width="22" version="1.1">
-	<circle r="22" cx="22" cy="22" fill="#999999"/>
+	<circle r="22" cx="22" cy="22" fill="#3B3B3B"/>
 	<g transform="translate(10.000000, 10.000000)">
-		<path fill="#000" d="M13,9H18.5L13,3.5V9M6,2H14L20,8V20A2,2 0 0,1 18,22H6C4.89,22 4,21.1 4,20V4C4,2.89 4.89,2 6,2M15,18V16H6V18H15M18,14V12H6V14H18Z"/>
+		<path fill="#fff" d="M13,9H18.5L13,3.5V9M6,2H14L20,8V20A2,2 0 0,1 18,22H6C4.89,22 4,21.1 4,20V4C4,2.89 4.89,2 6,2M15,18V16H6V18H15M18,14V12H6V14H18Z"/>
 	</g>
 </svg>
diff --git a/img/icon-conversation-user-dark.svg b/img/icon-conversation-user-dark.svg
index e561cfb020c..648339843ef 100644
--- a/img/icon-conversation-user-dark.svg
+++ b/img/icon-conversation-user-dark.svg
@@ -1,6 +1,6 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44" height="22" width="22" version="1.1">
-	<circle r="22" cx="22" cy="22" fill="#999999"/>
+	<circle r="22" cx="22" cy="22" fill="#3B3B3B"/>
 	<g transform="translate(10.000000, 10.000000)">
-		<path fill="#000" d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z"/>
+		<path fill="#fff" d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z"/>
 	</g>
 </svg>
diff --git a/lib/Service/AvatarService.php b/lib/Service/AvatarService.php
index 70757074a98..ac0291ac708 100644
--- a/lib/Service/AvatarService.php
+++ b/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(
diff --git a/src/components/ConversationIcon.vue b/src/components/ConversationIcon.vue
index 3209e4dd9db..21e82c1b3b8 100644
--- a/src/components/ConversationIcon.vue
+++ b/src/components/ConversationIcon.vue
@@ -22,7 +22,7 @@
 <template>
 	<div class="conversation-icon"
 		:style="{'--icon-size': `${size}px`}"
-		:class="{'offline': offline}">
+		:class="[themeClass, {'offline': offline}]">
 		<template v-if="!isOneToOne">
 			<div v-if="iconClass"
 				class="avatar icon"
@@ -181,8 +181,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 +219,10 @@ export default {
 			return undefined
 		},
 
+		themeClass() {
+			return `conversation-icon--${isDarkTheme ? 'dark' : 'bright'}`
+		},
+
 		isOneToOne() {
 			return this.item.type === CONVERSATION.TYPE.ONE_TO_ONE
 		},
@@ -267,6 +270,10 @@ export default {
 		}
 	}
 
+	&--dark .avatar.icon {
+		background-color: #3B3B3B;
+	}
+
 	&__type {
 		position: absolute;
 		right: -4px;
diff --git a/src/components/ConversationSettings/ConversationAvatarEditor.vue b/src/components/ConversationSettings/ConversationAvatarEditor.vue
index e8cfdde0321..90e8544674f 100644
--- a/src/components/ConversationSettings/ConversationAvatarEditor.vue
+++ b/src/components/ConversationSettings/ConversationAvatarEditor.vue
@@ -26,7 +26,7 @@
 		<div class="avatar__container">
 			<div v-if="!showCropper" class="avatar__preview">
 				<div v-if="emojiAvatar"
-					class="avatar__preview-emoji"
+					:class="['avatar__preview-emoji', themeClass]"
 					:style="{'background-color': backgroundColor}">
 					{{ emojiAvatar }}
 				</div>
@@ -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"