feat: add chat color scheming

react/features/base/color-scheme/ColorSchemeRegistry.js

         const colorScheme = toState(stateful)['features/base/color-scheme'];
 
         return {
+            ...defaultScheme._defaultTheme,
+            ...colorScheme._defaultTheme,
             ...defaultScheme[componentName],
             ...colorScheme[componentName]
         }[colorDefinition];

react/features/base/color-scheme/defaultScheme.js

  * The default color scheme of the application.
  */
 export default {
-    'BottomSheet': {
+    '_defaultTheme': {
+        // Generic app theme colors that are used accross the entire app.
+        // All scheme definitions below inherit these values.
         background: 'rgb(255, 255, 255)',
-        icon: '#1c2025',
-        label: '#1c2025'
+        icon: 'rgb(28, 32, 37)',
+        text: 'rgb(28, 32, 37)'
+    },
+    'Chat': {
+        displayName: 'rgb(94, 109, 121)',
+        localMsgBackground: 'rgb(215, 230, 249)',
+        privateMsgBackground: 'rgb(250, 219, 219)',
+        privateMsgNotice: 'rgb(186, 39, 58)',
+        remoteMsgBackground: 'rgb(241, 242, 246)',
+        replyBorder: 'rgb(219, 197, 200)',
+        replyIcon: 'rgb(94, 109, 121)'
     },
     'Dialog': {
-        background: 'rgb(255, 255, 255)',
         border: 'rgba(0, 3, 6, 0.6)',
         buttonBackground: ColorPalette.blue,
-        buttonLabel: ColorPalette.white,
-        icon: '#1c2025',
-        text: '#1c2025'
+        buttonLabel: ColorPalette.white
     },
     'Header': {
         background: ColorPalette.blue,
         background: 'rgb(42, 58, 75)'
     },
     'LoadConfigOverlay': {
-        background: 'rgb(249, 249, 249)',
-        text: 'rgb(28, 32, 37)'
+        background: 'rgb(249, 249, 249)'
     },
     'Thumbnail': {
         activeParticipantHighlight: 'rgb(81, 214, 170)',

react/features/base/dialog/components/native/styles.js

      * Style for the label in a generic item rendered in the menu.
      */
     labelStyle: {
-        color: schemeColor('label'),
+        color: schemeColor('text'),
         flexShrink: 1,
         fontSize: MD_FONT_SIZE,
         marginLeft: 32,

react/features/chat/components/AbstractChatMessage.js

 
 import { getLocalizedDateFormatter } from '../../base/i18n';
 
+import { MESSAGE_TYPE_ERROR, MESSAGE_TYPE_LOCAL } from '../constants';
+
 /**
  * Formatter string to display the message timestamp.
  */
     _getMessageText() {
         const { message } = this.props;
 
-        return message.messageType === 'error'
+        return message.messageType === MESSAGE_TYPE_ERROR
             ? this.props.t('chat.error', {
                 error: message.message
             })
         const { message, t } = this.props;
 
         return t('chat.privateNotice', {
-            recipient: message.messageType === 'local' ? message.recipient : t('chat.you')
+            recipient: message.messageType === MESSAGE_TYPE_LOCAL ? message.recipient : t('chat.you')
         });
     }
 }

react/features/chat/components/AbstractMessageRecipient.js

 
 import { setPrivateMessageRecipient } from '../actions';
 
-type Props = {
+export type Props = {
 
     /**
      * Function used to translate i18n labels.
 /**
  * Abstract class for the {@code MessageRecipient} component.
  */
-export default class AbstractMessageRecipient extends PureComponent<Props> {
+export default class AbstractMessageRecipient<P: Props> extends PureComponent<P> {
 
 }
 

react/features/chat/components/native/Chat.js

 import React from 'react';
 import { KeyboardAvoidingView, SafeAreaView } from 'react-native';
 
+import { ColorSchemeRegistry } from '../../../base/color-scheme';
 import { translate } from '../../../base/i18n';
-
 import { HeaderWithNavigation, SlidingView } from '../../../base/react';
 import { connect } from '../../../base/redux';
+import { StyleType } from '../../../base/styles';
 
 import AbstractChat, {
     _mapDispatchToProps,
-    _mapStateToProps,
-    type Props
+    _mapStateToProps as _abstractMapStateToProps,
+    type Props as AbstractProps
 } from '../AbstractChat';
 
 import ChatInputBar from './ChatInputBar';
 import MessageRecipient from './MessageRecipient';
 import styles from './styles';
 
+type Props = AbstractProps & {
+
+    /**
+     * The color-schemed stylesheet of the feature.
+     */
+    _styles: StyleType
+};
+
 /**
  * Implements a React native component that renders the chat window (modal) of
  * the mobile client.
      * @inheritdoc
      */
     render() {
+        const { _styles } = this.props;
+
         return (
             <SlidingView
                 onHide = { this._onClose }
                     <HeaderWithNavigation
                         headerLabelKey = 'chat.title'
                         onPressBack = { this._onClose } />
-                    <SafeAreaView style = { styles.backdrop }>
+                    <SafeAreaView style = { _styles.backdrop }>
                         <MessageContainer messages = { this.props._messages } />
                         <MessageRecipient />
                         <ChatInputBar onSend = { this.props._onSendMessage } />
     }
 }
 
+/**
+ * Maps part of the redux state to the props of this component.
+ *
+ * @param {Object} state - The Redux state.
+ * @returns {Props}
+ */
+function _mapStateToProps(state) {
+    return {
+        ..._abstractMapStateToProps(state),
+        _styles: ColorSchemeRegistry.get(state, 'Chat')
+    };
+}
+
 export default translate(connect(_mapStateToProps, _mapDispatchToProps)(Chat));

react/features/chat/components/native/ChatMessage.js

 import { Text, View } from 'react-native';
 
 import { Avatar } from '../../../base/avatar';
+import { ColorSchemeRegistry } from '../../../base/color-scheme';
 import { translate } from '../../../base/i18n';
 import { Linkify } from '../../../base/react';
+import { connect } from '../../../base/redux';
+import { type StyleType } from '../../../base/styles';
 
+import { MESSAGE_TYPE_ERROR, MESSAGE_TYPE_LOCAL } from '../../constants';
 import { replaceNonUnicodeEmojis } from '../../functions';
 
-import AbstractChatMessage, { type Props } from '../AbstractChatMessage';
+import AbstractChatMessage, { type Props as AbstractProps } from '../AbstractChatMessage';
 import PrivateMessageButton from '../PrivateMessageButton';
 
 import styles from './styles';
 
+type Props = AbstractProps & {
+
+    /**
+     * The color-schemed stylesheet of the feature.
+     */
+    _styles: StyleType
+};
+
 /**
  * Renders a single chat message.
  */
      * @inheritdoc
      */
     render() {
-        const { message } = this.props;
-        const localMessage = message.messageType === 'local';
+        const { _styles, message } = this.props;
+        const localMessage = message.messageType === MESSAGE_TYPE_LOCAL;
+        const { privateMessage } = message;
 
         // Style arrays that need to be updated in various scenarios, such as
         // error messages or others.
         const detailsWrapperStyle = [
             styles.detailsWrapper
         ];
-        const textWrapperStyle = [
-            styles.textWrapper
+        const messageBubbleStyle = [
+            styles.messageBubble
         ];
 
         if (localMessage) {
+            // This is a message sent by the local participant.
+
             // The wrapper needs to be aligned to the right.
             detailsWrapperStyle.push(styles.ownMessageDetailsWrapper);
 
-            // The bubble needs to be differently styled.
-            textWrapperStyle.push(styles.ownTextWrapper);
-        } else if (message.messageType === 'error') {
-            // The bubble needs to be differently styled.
-            textWrapperStyle.push(styles.systemTextWrapper);
+            // The bubble needs some additional styling
+            messageBubbleStyle.push(_styles.localMessageBubble);
+        } else if (message.messageType === MESSAGE_TYPE_ERROR) {
+            // This is a system message.
+
+            // The bubble needs some additional styling
+            messageBubbleStyle.push(styles.systemMessageBubble);
+        } else {
+            // This is a remote message sent by a remote participant.
+
+            // The bubble needs some additional styling
+            messageBubbleStyle.push(_styles.remoteMessageBubble);
+        }
+
+        if (privateMessage) {
+            messageBubbleStyle.push(_styles.privateMessageBubble);
         }
 
         return (
             <View style = { styles.messageWrapper } >
                 { this._renderAvatar() }
                 <View style = { detailsWrapperStyle }>
-                    <View style = { styles.replyWrapper }>
-                        <View style = { textWrapperStyle } >
-                            {
-                                this.props.showDisplayName
-                                    && this._renderDisplayName()
-                            }
+                    <View style = { messageBubbleStyle }>
+                        <View style = { styles.textWrapper } >
+                            { this._renderDisplayName() }
                             <Linkify linkStyle = { styles.chatLink }>
                                 { replaceNonUnicodeEmojis(this._getMessageText()) }
                             </Linkify>
-                            {
-                                message.privateMessage
-                                    && this._renderPrivateNotice()
-                            }
+                            { this._renderPrivateNotice() }
                         </View>
-                        { message.privateMessage && !localMessage
-                            && <PrivateMessageButton
-                                participantID = { message.id }
-                                reply = { true }
-                                showLabel = { false }
-                                toggledStyles = { styles.replyStyles } /> }
+                        { this._renderPrivateReplyButton() }
                     </View>
-                    { this.props.showTimestamp && this._renderTimestamp() }
+                    { this._renderTimestamp() }
                 </View>
             </View>
         );
     }
 
     /**
-     * Renders the display name of the sender.
+     * Renders the display name of the sender if necessary.
      *
-     * @returns {React$Element<*>}
+     * @returns {React$Element<*> | null}
      */
     _renderDisplayName() {
+        const { _styles, message, showDisplayName } = this.props;
+
+        if (!showDisplayName) {
+            return null;
+        }
+
         return (
-            <Text style = { styles.displayName }>
-                { this.props.message.displayName }
+            <Text style = { _styles.displayName }>
+                { message.displayName }
             </Text>
         );
     }
 
     /**
-     * Renders the message privacy notice.
+     * Renders the message privacy notice, if necessary.
      *
-     * @returns {React$Element<*>}
+     * @returns {React$Element<*> | null}
      */
     _renderPrivateNotice() {
+        const { _styles, message } = this.props;
+
+        if (!message.privateMessage) {
+            return null;
+        }
+
         return (
-            <Text style = { styles.privateNotice }>
+            <Text style = { _styles.privateNotice }>
                 { this._getPrivateNoticeMessage() }
             </Text>
         );
     }
 
     /**
-     * Renders the time at which the message was sent.
+     * Renders the private reply button, if necessary.
      *
-     * @returns {React$Element<*>}
+     * @returns {React$Element<*> | null}
+     */
+    _renderPrivateReplyButton() {
+        const { _styles, message } = this.props;
+        const { messageType, privateMessage } = message;
+
+        if (!privateMessage || messageType === MESSAGE_TYPE_LOCAL) {
+            return null;
+        }
+
+        return (
+            <View style = { _styles.replyContainer }>
+                <PrivateMessageButton
+                    participantID = { message.id }
+                    reply = { true }
+                    showLabel = { false }
+                    toggledStyles = { _styles.replyStyles } />
+            </View>
+        );
+    }
+
+    /**
+     * Renders the time at which the message was sent, if necessary.
+     *
+     * @returns {React$Element<*> | null}
      */
     _renderTimestamp() {
+        if (!this.props.showTimestamp) {
+            return null;
+        }
+
         return (
             <Text style = { styles.timeText }>
                 { this._getFormattedTimestamp() }
     }
 }
 
-export default translate(ChatMessage);
+/**
+ * Maps part of the redux state to the props of this component.
+ *
+ * @param {Object} state - The Redux state.
+ * @returns {Props}
+ */
+function _mapStateToProps(state) {
+    return {
+        _styles: ColorSchemeRegistry.get(state, 'Chat')
+    };
+}
+
+export default translate(connect(_mapStateToProps)(ChatMessage));

react/features/chat/components/native/ChatMessageGroup.js

 import React, { Component } from 'react';
 import { FlatList } from 'react-native';
 
+import { MESSAGE_TYPE_LOCAL, MESSAGE_TYPE_REMOTE } from '../../constants';
+
 import ChatMessage from './ChatMessage';
 import styles from './styles';
 
             <ChatMessage
                 message = { message }
                 showAvatar = {
-                    this.props.messages[0].messageType !== 'local'
+                    this.props.messages[0].messageType !== MESSAGE_TYPE_LOCAL
                         && index === this.props.messages.length - 1
                 }
                 showDisplayName = {
-                    this.props.messages[0].messageType === 'remote'
+                    this.props.messages[0].messageType === MESSAGE_TYPE_REMOTE
                         && index === this.props.messages.length - 1
                 }
                 showTimestamp = { index === 0 } />

react/features/chat/components/native/MessageRecipient.js

 import React from 'react';
 import { Text, TouchableHighlight, View } from 'react-native';
 
+import { ColorSchemeRegistry } from '../../../base/color-scheme';
 import { translate } from '../../../base/i18n';
 import { Icon, IconCancelSelection } from '../../../base/icons';
 import { connect } from '../../../base/redux';
+import { type StyleType } from '../../../base/styles';
 
 import AbstractMessageRecipient, {
     _mapDispatchToProps,
-    _mapStateToProps
+    _mapStateToProps as _abstractMapStateToProps,
+    type Props as AbstractProps
 } from '../AbstractMessageRecipient';
 
-import styles from './styles';
+type Props = AbstractProps & {
+
+    /**
+     * The color-schemed stylesheet of the feature.
+     */
+    _styles: StyleType
+};
 
 /**
  * Class to implement the displaying of the recipient of the next message.
  */
-class MessageRecipient extends AbstractMessageRecipient {
+class MessageRecipient extends AbstractMessageRecipient<Props> {
     /**
      * Implements {@code PureComponent#render}.
      *
      * @inheritdoc
      */
     render() {
-        const { _privateMessageRecipient } = this.props;
+        const { _privateMessageRecipient, _styles } = this.props;
 
         if (!_privateMessageRecipient) {
             return null;
         const { t } = this.props;
 
         return (
-            <View style = { styles.messageRecipientContainer }>
-                <Text style = { styles.messageRecipientText }>
+            <View style = { _styles.messageRecipientContainer }>
+                <Text style = { _styles.messageRecipientText }>
                     { t('chat.messageTo', {
                         recipient: _privateMessageRecipient
                     }) }
                 <TouchableHighlight onPress = { this.props._onRemovePrivateMessageRecipient }>
                     <Icon
                         src = { IconCancelSelection }
-                        style = { styles.messageRecipientCancelIcon } />
+                        style = { _styles.messageRecipientCancelIcon } />
                 </TouchableHighlight>
             </View>
         );
     }
 }
 
+/**
+ * Maps part of the redux state to the props of this component.
+ *
+ * @param {Object} state - The Redux state.
+ * @returns {Props}
+ */
+function _mapStateToProps(state) {
+    return {
+        ..._abstractMapStateToProps(state),
+        _styles: ColorSchemeRegistry.get(state, 'Chat')
+    };
+}
+
 export default translate(connect(_mapStateToProps, _mapDispatchToProps)(MessageRecipient));

react/features/chat/components/native/styles.js

 // @flow
 
+import { ColorSchemeRegistry, schemeColor } from '../../../base/color-scheme';
 import { BoxModel, ColorPalette } from '../../../base/styles';
 
+const BUBBLE_RADIUS = 8;
+
 /**
  * The styles of the feature chat.
  *
         width: 32
     },
 
-    /**
-     * Background of the chat screen.
-     */
-    backdrop: {
-        backgroundColor: ColorPalette.white,
-        flex: 1
-    },
-
     chatContainer: {
         alignItems: 'stretch',
         flex: 1,
         flexDirection: 'column'
     },
 
-    /**
-     * The text node for the display name.
-     */
-    displayName: {
-        color: 'rgb(118, 136, 152)',
-        fontSize: 13
-    },
-
     /**
      * A special padding to avoid issues on some devices (such as Android devices with custom suggestions bar).
      */
         height: 48
     },
 
-    messageContainer: {
-        flex: 1
-    },
-
-    messageRecipientCancelIcon: {
-        color: ColorPalette.white,
-        fontSize: 18
-    },
-
-    messageRecipientContainer: {
+    messageBubble: {
         alignItems: 'center',
-        backgroundColor: ColorPalette.warning,
-        flexDirection: 'row',
-        padding: BoxModel.padding
+        borderRadius: BUBBLE_RADIUS,
+        flexDirection: 'row'
     },
 
-    messageRecipientText: {
-        color: ColorPalette.white,
+    messageContainer: {
         flex: 1
     },
 
-    /**
-     * The message text itself.
-     */
-    messageText: {
-        color: 'rgb(28, 32, 37)',
-        fontSize: 15
-    },
-
     /**
      * Wrapper View for the entire block.
      */
         alignItems: 'flex-end'
     },
 
-    /**
-     * Style modifier for the {@code textWrapper} for own messages.
-     */
-    ownTextWrapper: {
-        backgroundColor: 'rgb(210, 231, 249)',
-        borderTopLeftRadius: 8,
-        borderTopRightRadius: 0
-    },
-
     replyWrapper: {
         alignItems: 'center',
         flexDirection: 'row'
     },
 
-    replyStyles: {
-        iconStyle: {
-            color: 'rgb(118, 136, 152)',
-            fontSize: 22,
-            margin: BoxModel.margin / 2
-        }
-    },
-
-    privateNotice: {
-        color: ColorPalette.warning,
-        fontSize: 13,
-        fontStyle: 'italic'
-    },
-
     sendButtonIcon: {
         color: ColorPalette.darkGrey,
         fontSize: 22
     /**
      * Style modifier for system (error) messages.
      */
-    systemTextWrapper: {
+    systemMessageBubble: {
         backgroundColor: 'rgb(247, 215, 215)'
     },
 
      */
     textWrapper: {
         alignItems: 'flex-start',
-        backgroundColor: 'rgb(240, 243, 247)',
-        borderRadius: 8,
-        borderTopLeftRadius: 0,
         flexDirection: 'column',
         padding: 9
     },
         fontSize: 13
     }
 };
+
+ColorSchemeRegistry.register('Chat', {
+    /**
+     * Background of the chat screen.
+     */
+    backdrop: {
+        backgroundColor: schemeColor('background'),
+        flex: 1
+    },
+
+    /**
+     * The text node for the display name.
+     */
+    displayName: {
+        color: schemeColor('displayName'),
+        fontSize: 13
+    },
+
+    localMessageBubble: {
+        backgroundColor: schemeColor('localMsgBackground'),
+        borderTopRightRadius: 0
+    },
+
+    messageRecipientCancelIcon: {
+        color: schemeColor('icon'),
+        fontSize: 18
+    },
+
+    messageRecipientContainer: {
+        alignItems: 'center',
+        backgroundColor: schemeColor('privateMsgBackground'),
+        flexDirection: 'row',
+        padding: BoxModel.padding
+    },
+
+    messageRecipientText: {
+        color: schemeColor('text'),
+        flex: 1
+    },
+
+    privateNotice: {
+        color: schemeColor('privateMsgNotice'),
+        fontSize: 11,
+        marginTop: 6
+    },
+
+    privateMessageBubble: {
+        backgroundColor: schemeColor('privateMsgBackground')
+    },
+
+    remoteMessageBubble: {
+        backgroundColor: schemeColor('remoteMsgBackground'),
+        borderTopLeftRadius: 0
+    },
+
+    replyContainer: {
+        alignSelf: 'stretch',
+        borderLeftColor: schemeColor('replyBorder'),
+        borderLeftWidth: 1,
+        justifyContent: 'center'
+    },
+
+    replyStyles: {
+        iconStyle: {
+            color: schemeColor('replyIcon'),
+            fontSize: 22,
+            padding: 8
+        }
+    }
+});

react/features/chat/components/web/ChatMessage.js

 import { translate } from '../../../base/i18n';
 import { Linkify } from '../../../base/react';
 
+import { MESSAGE_TYPE_LOCAL } from '../../constants';
+
 import AbstractChatMessage, {
     type Props
 } from '../AbstractChatMessage';
                         </div>
                         { message.privateMessage && this._renderPrivateNotice() }
                     </div>
-                    { message.privateMessage && message.messageType !== 'local'
+                    { message.privateMessage && message.messageType !== MESSAGE_TYPE_LOCAL
                     && <PrivateMessageButton
                         participantID = { message.id }
                         reply = { true }

react/features/chat/components/web/MessageContainer.js

 
 import React from 'react';
 
+import { MESSAGE_TYPE_REMOTE } from '../../constants';
+
 import AbstractMessageContainer, { type Props }
     from '../AbstractMessageContainer';
 
 
             return (
                 <ChatMessageGroup
-                    className = { messageType || 'remote' }
+                    className = { messageType || MESSAGE_TYPE_REMOTE }
                     key = { index }
                     messages = { group } />
             );

react/features/chat/components/web/MessageRecipient.js

 
 import AbstractMessageRecipient, {
     _mapDispatchToProps,
-    _mapStateToProps
+    _mapStateToProps,
+    type Props
 } from '../AbstractMessageRecipient';
 
 /**
  * Class to implement the displaying of the recipient of the next message.
  */
-class MessageRecipient extends AbstractMessageRecipient {
+class MessageRecipient extends AbstractMessageRecipient<Props> {
     /**
      * Implements {@code PureComponent#render}.
      *

react/features/chat/constants.js

+// @flow
+
 /**
  * The audio ID of the audio element for which the {@link playAudio} action is
  * triggered when new chat message is received.
  * @type {string}
  */
 export const INCOMING_MSG_SOUND_ID = 'INCOMING_MSG_SOUND';
+
+/**
+ * The {@code messageType} of error (system) messages.
+ */
+export const MESSAGE_TYPE_ERROR = 'error';
+
+/**
+ * The {@code messageType} of local messages.
+ */
+export const MESSAGE_TYPE_LOCAL = 'local';
+
+/**
+ * The {@code messageType} of remote messages.
+ */
+export const MESSAGE_TYPE_REMOTE = 'remote';

react/features/chat/middleware.js

 import { SEND_MESSAGE, SET_PRIVATE_MESSAGE_RECIPIENT } from './actionTypes';
 import { addMessage, clearMessages, toggleChat } from './actions';
 import { ChatPrivacyDialog } from './components';
-import { INCOMING_MSG_SOUND_ID } from './constants';
+import { INCOMING_MSG_SOUND_ID, MESSAGE_TYPE_ERROR, MESSAGE_TYPE_LOCAL, MESSAGE_TYPE_REMOTE } from './constants';
 import { INCOMING_MSG_SOUND_FILE } from './sounds';
 
 declare var APP: Object;
 function _handleChatError({ dispatch }, error) {
     dispatch(addMessage({
         hasRead: true,
-        messageType: 'error',
+        messageType: MESSAGE_TYPE_ERROR,
         message: error,
         privateMessage: false,
         timestamp: Date.now()
         displayName,
         hasRead,
         id,
-        messageType: participant.local ? 'local' : 'remote',
+        messageType: participant.local ? MESSAGE_TYPE_LOCAL : MESSAGE_TYPE_REMOTE,
         message,
         privateMessage,
         recipient: getParticipantDisplayName(state, localParticipant.id),
         displayName,
         hasRead: true,
         id: localParticipant.id,
-        messageType: 'local',
+        messageType: MESSAGE_TYPE_LOCAL,
         message,
         privateMessage: true,
         recipient: getParticipantDisplayName(getState, recipientID),
     const lastMessage = navigator.product === 'ReactNative'
         ? messages[0] : messages[messages.length - 1];
 
-    if (lastMessage.messageType === 'local') {
+    if (lastMessage.messageType === MESSAGE_TYPE_LOCAL) {
         // The sender is probably aware of any private messages as already sent
         // a message since then. Doesn't make sense to display the notice now.
         return undefined;
     const now = Date.now();
     const recentPrivateMessages = messages.filter(
         message =>
-            message.messageType !== 'local'
+            message.messageType !== MESSAGE_TYPE_LOCAL
             && message.privateMessage
             && message.timestamp + PRIVACY_NOTICE_TIMEOUT > now);
     const recentPrivateMessage = navigator.product === 'ReactNative'