(theme) add message deleted colors

Author: antoine92190

src/ChatWindow/ChatMessage.vue

@@ -41,7 +41,7 @@
 					</div>
 
 					<div v-if="message.deleted">
-						{{ textMessages.MESSAGE_DELETED }}
+						<span>{{ textMessages.MESSAGE_DELETED }}</span>
 					</div>
 
 					<div v-else-if="!message.file">
@@ -281,10 +281,10 @@ export default {
 }
 
 .message-deleted {
-	color: #757e85 !important;
+	color: var(--chat-color-message-deleted) !important;
 	font-size: 13px !important;
 	font-style: italic !important;
-	background: #dadfe2 !important;
+	background: var(--chat-bg-color-message-deleted) !important;
 }
 
 .image-container {

src/themes/index.js

@@ -10,6 +10,8 @@ export const defaultThemeColors = {
 		messagesBg: '#f8f9fa',
 		messageBg: '#fff',
 		messageMeBg: '#ccf2cf',
+		messageDeletedBg: '#dadfe2',
+		messageDeletedColor: '#757e85',
 		messageUsernameColor: '#9ca6af',
 		messageTimestampColor: '#828c94',
 		messageTextColor: '#0a0a0a',
@@ -46,7 +48,9 @@ export const defaultThemeColors = {
 		menuBgHover: '#1C1D21',
 		messagesBg: '#1C1D21',
 		messageBg: '#9ea8b5',
-		messageMeBg: '#5b6f85',
+		messageMeBg: '#46586b',
+		messageDeletedBg: '#353b40',
+		messageDeletedColor: '#dadfe2',
 		messageUsernameColor: '#ebedf2',
 		messageTimestampColor: '#ebedf2',
 		messageTextColor: '#fff',
@@ -66,7 +70,7 @@ export const defaultThemeColors = {
 			send: '#fff',
 			sendDisabled: '#9ca6af',
 			emoji: '#fff',
-			document: '#1976d2',
+			document: '#fff',
 			pencil: '#1976d2',
 			pencilEdited: '#9e9e9e',
 			trash: '#f44336',
@@ -86,6 +90,8 @@ export const cssThemeVars = ({
 	messagesBg,
 	messageBg,
 	messageMeBg,
+	messageDeletedBg,
+	messageDeletedColor,
 	messageUsernameColor,
 	messageTimestampColor,
 	messageTextColor,
@@ -103,6 +109,8 @@ export const cssThemeVars = ({
 		'--chat-bg-color-content': messagesBg,
 		'--chat-bg-color-message': messageBg,
 		'--chat-bg-color-message-me': messageMeBg,
+		'--chat-bg-color-message-deleted': messageDeletedBg,
+		'--chat-color-message-deleted': messageDeletedColor,
 		'--chat-color-message-username': messageUsernameColor,
 		'--chat-color-message-timestamp': messageTimestampColor,
 		'--chat-color-message-text': messageTextColor,