(feat) add theme colors

Author: antoine92190

demo/src/App.vue

@@ -109,7 +109,6 @@ body {
 
 .app-container {
 	font-family: 'Roboto', sans-serif;
-	color: rgba(0, 0, 0, 0.87);
 	line-height: 1.5;
 	padding: 10px 20px 20px;
 }

src/ChatWindow/ChatMessage.vue

@@ -244,6 +244,7 @@ export default {
 
 .message-card {
 	background: #fff;
+	color: var(--color-dark);
 	border-radius: 4px;
 	font-size: 14px;
 	padding: 8px 8px 3px;

src/ChatWindow/ChatWindow.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="card-window" :style="{ height }">
+	<div class="card-window" :style="[{ height }, cssVars]">
 		<div class="chat-container">
 			<rooms-list
 				:rooms="rooms"
@@ -35,6 +35,7 @@ import RoomsList from './RoomsList'
 import MessagesList from './MessagesList'
 const { roomsValid, partcipantsValid } = require('../utils/roomValidation')
 import locales from '../locales'
+import themes from '../themes'
 
 export default {
 	name: 'chat-container',
@@ -52,7 +53,9 @@ export default {
 		menuActions: { type: Array, default: () => [] },
 		showFiles: { type: Boolean, default: true },
 		showEmojis: { type: Boolean, default: true },
-		textMessages: { type: Object, default: null }
+		textMessages: { type: Object, default: null },
+		theme: { type: String, default: 'light' },
+		colors: { type: Object, default: null }
 	},
 
 	data() {
@@ -87,6 +90,23 @@ export default {
 				...locales,
 				...this.textMessages
 			}
+		},
+		cssVars() {
+			const themeColors = {
+				...themes[this.theme],
+				...this.colors
+			}
+
+			return {
+				'--bg-color': themeColors.sidemenuBg,
+				'--bg-color-hover': themeColors.sidemenuBgHover,
+				'--bg-color-active': themeColors.sidemenuBgActive,
+				'--bg-color-content': themeColors.messagesBg,
+				'--color-dark': themeColors.textColorDark,
+				'--color': themeColors.textColor,
+				'--color-active': themeColors.sidemenuColorActive,
+				'--color-input': themeColors.inputBg
+			}
 		}
 	},
 
@@ -128,7 +148,8 @@ export default {
 	border-radius: 4px;
 	display: block;
 	max-width: 100%;
-	background: #fff;
+	background: var(--bg-color);
+	color: var(--color);
 	overflow-wrap: break-word;
 	position: relative;
 	white-space: normal;

src/ChatWindow/MessagesList.vue

@@ -33,7 +33,7 @@
 				</transition>
 			</div>
 		</div>
-		<div class="chat-background container-scroll">
+		<div class="container-scroll">
 			<div class="messages-container">
 				<chat-loader :show="loadingMessages"></chat-loader>
 				<transition name="fade">
@@ -446,11 +446,8 @@ export default {
 	margin: 0;
 }
 
-.chat-background {
-	background-color: #f8f9fa !important;
-}
-
 .container-scroll {
+	background: var(--bg-color-content);
 	height: calc(100% - 120px);
 	overflow-y: auto;
 }
@@ -472,7 +469,7 @@ export default {
 	position: absolute;
 	bottom: 0;
 	width: 100%;
-	background: #fff;
+	background: var(--color-input);
 	border-top: 1px solid #d3dde7;
 	z-index: 10;
 }
@@ -487,6 +484,8 @@ export default {
 }
 
 textarea {
+	background: var(--color-input);
+	color: var(--color);
 	margin: 2px;
 	padding: 15px 15px 5px 10px;
 	overflow: hidden;

src/ChatWindow/RoomsList.vue

@@ -136,6 +136,12 @@ export default {
 	display: flex;
 }
 
+input {
+	background: var(--color-input);
+	border-radius: 4px;
+	margin: 0 10px;
+}
+
 .rooms-empty {
 	font-size: 14px;
 	color: #9ca6af;
@@ -154,7 +160,7 @@ export default {
 	flex: 0 1 auto;
 	position: relative;
 	max-width: 100%;
-	background: #fff;
+	background: var(--text-color);
 	cursor: pointer;
 
 	:not(:hover) {
@@ -163,19 +169,18 @@ export default {
 	}
 
 	:hover {
-		background: #f6f6f6;
+		background: var(--bg-color-hover);
 		-webkit-transition: background-color 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
 		transition: background-color 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
 	}
 }
 
 .room-selected {
-	color: #1976d2 !important;
-	background: #e5effa !important;
+	color: var(--color-active) !important;
+	background: var(--bg-color-active) !important;
 
 	:hover {
-		color: #1976d2;
-		background: #e5effa;
+		background: var(--bg-color-active);
 	}
 }
 

src/themes/index.js

@@ -0,0 +1,24 @@
+export default {
+	light: {
+		headerBg: '#fff',
+		sidemenuBg: '#fff',
+		sidemenuBgHover: '#f6f6f6',
+		sidemenuBgActive: '#e5effa',
+		sidemenuColorActive: '#1976d2',
+		messagesBg: '#f8f9fa',
+		textColorDark: '#0a0a0a',
+		textColor: '#0a0a0a',
+		inputBg: '#fff'
+	},
+	dark: {
+		headerBg: '#26272e',
+		sidemenuBg: '#26272e',
+		sidemenuBgHover: '#202024',
+		sidemenuBgActive: '#1C1D21',
+		sidemenuColorActive: '#fff',
+		messagesBg: '#1C1D21',
+		textColorDark: '#0a0a0a',
+		textColor: '#fff',
+		inputBg: '#34343b'
+	}
+}