(theme) add user state colors

Author: antoine92190

README.md

@@ -260,7 +260,9 @@ styles="{
   room: {
     colorUsername: '#0a0a0a',
     colorMessage: '#67717a',
-    colorTimestamp: '#a2aeb8'
+    colorTimestamp: '#a2aeb8',
+    colorStateOnline: '#4caf50',
+		colorStateOffline: '#ccc'
   },
 
   emoji: {

src/ChatWindow/RoomsList.vue

@@ -282,11 +282,11 @@ input {
 	width: 9px;
 	height: 9px;
 	border-radius: 50%;
-	background-color: #ccc;
+	background-color: var(--chat-room-color-offline);
 	margin-right: 6px;
 }
 
 .state-online {
-	background-color: #4caf50;
+	background-color: var(--chat-room-color-online);
 }
 </style>

src/themes/index.js

@@ -78,7 +78,9 @@ export const defaultThemeStyles = {
 		room: {
 			colorUsername: '#0a0a0a',
 			colorMessage: '#67717a',
-			colorTimestamp: '#a2aeb8'
+			colorTimestamp: '#a2aeb8',
+			colorStateOnline: '#4caf50',
+			colorStateOffline: '#9ca6af'
 		},
 
 		emoji: {
@@ -186,7 +188,9 @@ export const defaultThemeStyles = {
 		room: {
 			colorUsername: '#fff',
 			colorMessage: '#6c7278',
-			colorTimestamp: '#6c7278'
+			colorTimestamp: '#6c7278',
+			colorStateOnline: '#4caf50',
+			colorStateOffline: '#596269'
 		},
 
 		emoji: {
@@ -304,6 +308,8 @@ export const cssThemeVars = ({
 		'--chat-room-color-username': room.colorUsername,
 		'--chat-room-color-message': room.colorMessage,
 		'--chat-room-color-timestamp': room.colorTimestamp,
+		'--chat-room-color-online': room.colorStateOnline,
+		'--chat-room-color-offline': room.colorStateOffline,
 
 		// emoji
 		'--chat-emoji-bg-color': emoji.background,