(theme) add message bg and colors

Author: antoine92190

src/ChatWindow/ChatMessage.vue

@@ -37,7 +37,7 @@
 						v-if="roomUsers.length > 2 && message.sender_id !== 'me'"
 						class="text-username"
 					>
-						{{ message.username }}
+						<span>{{ message.username }}</span>
 					</div>
 
 					<div v-if="message.deleted">
@@ -243,8 +243,8 @@ export default {
 }
 
 .message-card {
-	background: #fff;
-	color: var(--chat-color-dark);
+	background: var(--chat-bg-color-message);
+	color: var(--chat-color-message-text);
 	border-radius: 4px;
 	font-size: 14px;
 	padding: 8px 8px 3px;
@@ -269,7 +269,7 @@ export default {
 }
 
 .message-current {
-	background: #ccf2cf !important;
+	background: var(--chat-bg-color-message-me) !important;
 
 	&.slide-up {
 		animation: slide-up 0.3s ease-out forwards;
@@ -329,14 +329,14 @@ export default {
 
 .text-username {
 	font-size: 13px;
-	color: #9ca6af;
+	color: var(--chat-color-message-username);
 	margin-bottom: 2px;
 }
 
 .text-timestamp {
 	font-size: 10px;
 	font-weight: 300;
-	color: #828c94;
+	color: var(--chat-color-message-timestamp);
 	text-align: right;
 }
 

src/themes/index.js

@@ -8,7 +8,11 @@ export const defaultThemeColors = {
 		menuBg: '#fff',
 		menuBgHover: '#f6f6f6',
 		messagesBg: '#f8f9fa',
-		textColorDark: '#0a0a0a',
+		messageBg: '#fff',
+		messageMeBg: '#ccf2cf',
+		messageUsernameColor: '#9ca6af',
+		messageTimestampColor: '#828c94',
+		messageTextColor: '#0a0a0a',
 		textColor: '#0a0a0a',
 		inputBg: '#fff',
 		spinnerColor: '#333',
@@ -41,7 +45,11 @@ export const defaultThemeColors = {
 		menuBg: '#26272e',
 		menuBgHover: '#1C1D21',
 		messagesBg: '#1C1D21',
-		textColorDark: '#0a0a0a',
+		messageBg: '#9ea8b5',
+		messageMeBg: '#5b6f85',
+		messageUsernameColor: '#ebedf2',
+		messageTimestampColor: '#ebedf2',
+		messageTextColor: '#fff',
 		textColor: '#fff',
 		inputBg: '#34343b',
 		spinnerColor: '#fff',
@@ -62,7 +70,7 @@ export const defaultThemeColors = {
 			pencil: '#1976d2',
 			pencilEdited: '#9e9e9e',
 			trash: '#f44336',
-			checkmark: '#0696c7'
+			checkmark: '#30a65d'
 		}
 	}
 }
@@ -76,7 +84,11 @@ export const cssThemeVars = ({
 	menuBg,
 	menuBgHover,
 	messagesBg,
-	textColorDark,
+	messageBg,
+	messageMeBg,
+	messageUsernameColor,
+	messageTimestampColor,
+	messageTextColor,
 	textColor,
 	inputBg,
 	spinnerColor,
@@ -89,7 +101,11 @@ export const cssThemeVars = ({
 		'--chat-bg-color-hover': sidemenuBgHover,
 		'--chat-bg-color-active': sidemenuBgActive,
 		'--chat-bg-color-content': messagesBg,
-		'--chat-color-dark': textColorDark,
+		'--chat-bg-color-message': messageBg,
+		'--chat-bg-color-message-me': messageMeBg,
+		'--chat-color-message-username': messageUsernameColor,
+		'--chat-color-message-timestamp': messageTimestampColor,
+		'--chat-color-message-text': messageTextColor,
 		'--chat-color': textColor,
 		'--chat-color-active': sidemenuColorActive,
 		'--chat-bg-menu': menuBg,