(refactor) theme colors

Author: antoine92190

src/ChatWindow/ChatMessage.vue

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

src/ChatWindow/ChatWindow.vue

@@ -35,7 +35,7 @@ import RoomsList from './RoomsList'
 import MessagesList from './MessagesList'
 const { roomsValid, partcipantsValid } = require('../utils/roomValidation')
 import locales from '../locales'
-import themes from '../themes'
+import { defaultThemeColors, cssThemeVars } from '../themes'
 
 export default {
 	name: 'chat-container',
@@ -54,7 +54,7 @@ export default {
 		showFiles: { type: Boolean, default: true },
 		showEmojis: { type: Boolean, default: true },
 		textMessages: { type: Object, default: null },
-		theme: { type: String, default: 'light' },
+		theme: { type: String, default: 'dark' },
 		colors: { type: Object, default: null }
 	},
 
@@ -93,20 +93,11 @@ export default {
 		},
 		cssVars() {
 			const themeColors = {
-				...themes[this.theme],
+				...defaultThemeColors[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
-			}
+			return cssThemeVars(themeColors)
 		}
 	},
 
@@ -148,8 +139,8 @@ export default {
 	border-radius: 4px;
 	display: block;
 	max-width: 100%;
-	background: var(--bg-color);
-	color: var(--color);
+	background: var(--chat-bg-color);
+	color: var(--chat-color);
 	overflow-wrap: break-word;
 	position: relative;
 	white-space: normal;

src/ChatWindow/MessagesList.vue

@@ -447,7 +447,7 @@ export default {
 }
 
 .container-scroll {
-	background: var(--bg-color-content);
+	background: var(--chat-bg-color-content);
 	height: calc(100% - 120px);
 	overflow-y: auto;
 }
@@ -469,7 +469,7 @@ export default {
 	position: absolute;
 	bottom: 0;
 	width: 100%;
-	background: var(--color-input);
+	background: var(--chat-color-input);
 	border-top: 1px solid #d3dde7;
 	z-index: 10;
 }
@@ -484,8 +484,8 @@ export default {
 }
 
 textarea {
-	background: var(--color-input);
-	color: var(--color);
+	background: var(--chat-color-input);
+	color: var(--chat-color);
 	margin: 2px;
 	padding: 15px 15px 5px 10px;
 	overflow: hidden;

src/ChatWindow/RoomsList.vue

@@ -137,7 +137,7 @@ export default {
 }
 
 input {
-	background: var(--color-input);
+	background: var(--chat-color-input);
 	border-radius: 4px;
 	margin: 0 10px;
 }
@@ -160,7 +160,7 @@ input {
 	flex: 0 1 auto;
 	position: relative;
 	max-width: 100%;
-	background: var(--text-color);
+	background: var(--chat-text-color);
 	cursor: pointer;
 
 	:not(:hover) {
@@ -169,18 +169,18 @@ input {
 	}
 
 	:hover {
-		background: var(--bg-color-hover);
+		background: var(--chat-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: var(--color-active) !important;
-	background: var(--bg-color-active) !important;
+	color: var(--chat-color-active) !important;
+	background: var(--chat-bg-color-active) !important;
 
 	:hover {
-		background: var(--bg-color-active);
+		background: var(--chat-bg-color-active);
 	}
 }
 

src/themes/index.js

@@ -1,4 +1,4 @@
-export default {
+export const defaultThemeColors = {
 	light: {
 		headerBg: '#fff',
 		sidemenuBg: '#fff',
@@ -22,3 +22,27 @@ export default {
 		inputBg: '#34343b'
 	}
 }
+
+export const cssThemeVars = ({
+	headerBg,
+	sidemenuBg,
+	sidemenuBgHover,
+	sidemenuBgActive,
+	sidemenuColorActive,
+	messagesBg,
+	textColorDark,
+	textColor,
+	inputBg
+}) => {
+	return {
+		'--chat-header-bg-color': headerBg,
+		'--chat-bg-color': sidemenuBg,
+		'--chat-bg-color-hover': sidemenuBgHover,
+		'--chat-bg-color-active': sidemenuBgActive,
+		'--chat-bg-color-content': messagesBg,
+		'--chat-color-dark': textColorDark,
+		'--chat-color': textColor,
+		'--chat-color-active': sidemenuColorActive,
+		'--chat-color-input': inputBg
+	}
+}