(theme) add colors

Author: antoine92190

src/ChatWindow/ChatMessage.vue

@@ -361,7 +361,7 @@ export default {
 
 .message-image {
 	position: relative;
-	background-color: #ddd !important;
+	background-color: var(--chat-bg-color-message-image) !important;
 	background-size: cover !important;
 	background-position: center center !important;
 	background-repeat: no-repeat !important;

src/ChatWindow/MessagesList.vue

@@ -462,7 +462,7 @@ export default {
 	bottom: 80px;
 	right: 20px;
 	padding: 8px;
-	background: #fff;
+	background: var(--chat-bg-scroll-icon);
 	border-radius: 50%;
 	box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14),
 		0 1px 2px 0 rgba(0, 0, 0, 0.12);
@@ -542,17 +542,17 @@ textarea {
 	width: 100%;
 	resize: none;
 	height: 32px;
-	caret-color: #1976d2;
+	caret-color: var(--chat-color-caret);
 	border: none;
 	font-size: 16px;
 
 	&::placeholder {
-		color: #9ca6af;
+		color: var(--chat-color-placeholder);
 	}
 }
 
 .textarea-outline {
-	box-shadow: inset 0px 0px 0px 1px #1976d2;
+	box-shadow: inset 0px 0px 0px 1px var(--chat-border-color-input-selected);
 }
 
 .icon-textarea {

src/ChatWindow/RoomsList.vue

@@ -116,12 +116,12 @@ export default {
 	width: 100%;
 	font-size: 16px;
 	outline: 0;
-	caret-color: #1976d2;
+	caret-color: var(--chat-color-caret);
 	border: none;
 	padding: 10px;
 
 	&::placeholder {
-		color: #9ca6af;
+		color: var(--chat-color-placeholder);
 	}
 }
 

src/themes/index.js

@@ -3,16 +3,20 @@ export const defaultThemeColors = {
 		general: {
 			color: '#0a0a0a',
 			backgroundInput: '#fff',
+			colorPlaceholder: '#0a0a0a',
+			colorCaret: '#1976d2',
 			colorSpinner: '#333',
-			colorBorder: '#d3dde7'
+			colorBorder: '#d3dde7',
+			backgroundScrollIcon: '#fff'
 		},
 
 		header: {
 			background: '#fff'
 		},
 
 		footer: {
-			background: '#f0f0f0'
+			background: '#f0f0f0',
+			borderInputSelected: '#1976d2'
 		},
 
 		content: {
@@ -43,7 +47,8 @@ export const defaultThemeColors = {
 			colorDate: '#505a62',
 			backgroundReply: 'rgba(0, 0, 0, 0.08)',
 			colorReplyUsername: '#0a0a0a',
-			colorReply: '#6e6e6e'
+			colorReply: '#6e6e6e',
+			backgroundImage: '#ddd'
 		},
 
 		room: {
@@ -76,16 +81,20 @@ export const defaultThemeColors = {
 		general: {
 			color: '#fff',
 			backgroundInput: '#202223',
+			colorPlaceholder: '#fff',
+			colorCaret: '#1976d2',
 			colorSpinner: '#fff',
-			colorBorder: '#63686e'
+			colorBorder: '#63686e',
+			backgroundScrollIcon: '#fff'
 		},
 
 		header: {
 			background: '#181a1b'
 		},
 
 		footer: {
-			background: '#181a1b'
+			background: '#181a1b',
+			borderInputSelected: '#1976d2'
 		},
 
 		content: {
@@ -116,7 +125,8 @@ export const defaultThemeColors = {
 			colorDate: '#9ca6af',
 			backgroundReply: 'rgba(0, 0, 0, 0.18)',
 			colorReplyUsername: '#fff',
-			colorReply: '#d6d6d6'
+			colorReply: '#d6d6d6',
+			backgroundImage: '#ddd'
 		},
 
 		room: {
@@ -163,11 +173,19 @@ export const cssThemeVars = ({
 		'--chat-color': general.color,
 		'--chat-bg-color-input': general.backgroundInput,
 		'--chat-color-spinner': general.colorSpinner,
+		'--chat-color-placeholder': general.colorPlaceholder,
+		'--chat-color-caret': general.colorCaret,
 		'--chat-border-color': general.colorBorder,
+		'--chat-bg-scroll-icon': general.backgroundScrollIcon,
 
-		// layout
+		// header
 		'--chat-header-bg-color': header.background,
+
+		// footer
 		'--chat-bg-color-footer': footer.background,
+		'--chat-border-color-input-selected': footer.borderInputSelected,
+
+		// content
 		'--chat-bg-color-content': content.background,
 
 		// sidemenu
@@ -193,6 +211,7 @@ export const cssThemeVars = ({
 		'--chat-bg-color-message-reply': message.backgroundReply,
 		'--chat-color-message-reply-username': message.colorReplyUsername,
 		'--chat-color-message-reply-content': message.colorReply,
+		'--chat-bg-color-message-image': message.backgroundImage,
 
 		// room
 		'--chat-color-room-username': room.colorUsername,