(theme) add message date theme colors

Author: antoine92190

README.md

@@ -143,6 +143,8 @@ colors="{
   messageDeletedColor: '#757e85',
   messageUsernameColor: '#9ca6af',
   messageTimestampColor: '#828c94',
+  messageDateBg: 'rgba(33, 148, 243, 0.15)',
+  messageDateColor: '#b8bdcc',
   messageTextColor: '#0a0a0a',
   roomLastMessage: '#a2aeb8',
   roomTimestamp: '#67717a',

src/ChatWindow/ChatMessage.vue

@@ -229,8 +229,8 @@ export default {
 	font-size: 12px;
 	text-transform: uppercase;
 	padding: 4px;
-	color: #505a62;
-	background: rgba(33, 148, 243, 0.15);
+	color: var(--chat-color-message-date);
+	background: var(--chat-color-message-date-bg);
 	display: block;
 	overflow-wrap: break-word;
 	position: relative;
@@ -266,7 +266,7 @@ export default {
 	color: var(--chat-color-message-text);
 	border-radius: 4px;
 	font-size: 14px;
-	padding: 6px 10px 3px;
+	padding: 6px 9px 3px;
 	white-space: pre-wrap;
 	z-index: 1;
 	display: block;
@@ -319,7 +319,7 @@ export default {
 	height: 250px;
 	width: 250px;
 	border-radius: 4px;
-	margin: 3px auto 5px;
+	margin: 4px auto 5px;
 	transition: 0.4s filter linear;
 }
 
@@ -348,6 +348,7 @@ export default {
 .text-username {
 	font-size: 13px;
 	color: var(--chat-color-message-username);
+	line-height: 15px;
 	margin-bottom: 2px;
 }
 

src/themes/index.js

@@ -14,6 +14,8 @@ export const defaultThemeColors = {
 		messageDeletedColor: '#757e85',
 		messageUsernameColor: '#9ca6af',
 		messageTimestampColor: '#828c94',
+		messageDateBg: 'rgba(33, 148, 243, 0.15)',
+		messageDateColor: '#505a62',
 		messageTextColor: '#0a0a0a',
 		roomLastMessage: '#67717a',
 		roomTimestamp: '#a2aeb8',
@@ -56,6 +58,8 @@ export const defaultThemeColors = {
 		messageDeletedColor: '#dadfe2',
 		messageUsernameColor: '#b3bac9',
 		messageTimestampColor: '#ebedf2',
+		messageDateBg: 'rgba(33, 148, 243, 0.15)',
+		messageDateColor: '#b8bdcc',
 		messageTextColor: '#fff',
 		roomLastMessage: '#a2aeb8',
 		roomTimestamp: '#67717a',
@@ -100,6 +104,8 @@ export const cssThemeVars = ({
 	messageDeletedColor,
 	messageUsernameColor,
 	messageTimestampColor,
+	messageDateBg,
+	messageDateColor,
 	messageTextColor,
 	roomLastMessage,
 	roomTimestamp,
@@ -126,6 +132,8 @@ export const cssThemeVars = ({
 		'--chat-color-message-timestamp': messageTimestampColor,
 		'--chat-color-room-last': roomLastMessage,
 		'--chat-color-room-timestamp': roomTimestamp,
+		'--chat-color-message-date-bg': messageDateBg,
+		'--chat-color-message-date': messageDateColor,
 		'--chat-color-message-text': messageTextColor,
 		'--chat-color': textColor,
 		'--chat-color-input': inputBg,