(props) rename 'colors' to 'styles' - breaking

Author: antoine92190

README.md

@@ -95,7 +95,7 @@ You can import it as a custom component:
 | showReactionEmojis | Boolean          | -        | true    |
 | textMessages (6)   | Object           | -        | null    |
 | theme (7)          | Sring            | -        | light   |
-| colors (8)         | Object           | -        | (8)     |
+| styles (8)         | Object           | -        | (8)     |
 
 (1) `currentUserId` is required to display UI and trigger actions according to the user using the chat (ex: messages position on the right, etc.)
 
@@ -178,10 +178,10 @@ textMessages="{
 
 (7) `theme` can be used to change the chat theme. Currently, only `light` and `dark` are available.
 
-(8) `colors` can be use to create your own theme. Ex:
+(8) `styles` can be use to customize your own theme. Ex:
 
 ```javascript
-colors="{
+styles="{
   general: {
     color: '#0a0a0a',
     backgroundInput: '#fff',

src/ChatWindow/ChatWindow.vue

@@ -47,7 +47,7 @@ import RoomsList from './RoomsList'
 import MessagesList from './MessagesList'
 const { roomsValid, partcipantsValid } = require('../utils/roomValidation')
 import locales from '../locales'
-import { defaultThemeColors, cssThemeVars } from '../themes'
+import { defaultThemeStyles, cssThemeVars } from '../themes'
 
 export default {
 	name: 'chat-container',
@@ -59,7 +59,7 @@ export default {
 	props: {
 		height: { type: String, default: '600px' },
 		theme: { type: String, default: 'light' },
-		colors: { type: Object, default: null },
+		styles: { type: Object, default: null },
 		textMessages: { type: Object, default: null },
 		currentUserId: { type: [String, Number], default: '' },
 		rooms: { type: Array, default: () => [] },
@@ -130,12 +130,12 @@ export default {
 			}
 		},
 		cssVars() {
-			const themeColors = {
-				...defaultThemeColors[this.theme],
-				...this.colors
+			const themeStyles = {
+				...defaultThemeStyles[this.theme],
+				...this.styles
 			}
 
-			return cssThemeVars(themeColors)
+			return cssThemeVars(themeStyles)
 		}
 	},
 

src/themes/index.js

@@ -1,4 +1,4 @@
-export const defaultThemeColors = {
+export const defaultThemeStyles = {
 	light: {
 		general: {
 			color: '#0a0a0a',