fuse-angular/src/app/main/apps/chat/chat.theme.scss

@mixin chat-theme($theme) {

    $background: map-get($theme, background);
    $foreground: map-get($theme, foreground);
    $primary: map-get($theme, primary);
    $accent: map-get($theme, accent);
    $is-dark: map-get($theme, is-dark);

    // Chat start
    chat-start {

        .big-circle {
            background: map-get($background, card);
            border-color: map-get($foreground, divider);
        }
    }

    // Chat view
    chat-view {

        .chat {

            .chat-toolbar {
                border-bottom-color: map-get($foreground, divider);
            }

            #chat-content {

                .message-row {

                    &.contact {

                        .bubble {
                            background-color: map-get($primary, default);
                            color: map-get($primary, default-contrast);
                        }
                    }

                    &.me {

                        .bubble {
                            color: rgba(0, 0, 0, 0.87);
                            background-color: #E0E0E0;
                        }
                    }
                }
            }

            .chat-footer {
                background: map-get($background, app-bar);
                border-top-color: map-get($foreground, divider);

                .reply-form {

                    .message-text {
                        background-color: map-get($background, app-bar);
                        border-color: map-get($foreground, divider);

                        .mat-form-field-wrapper {

                            .mat-form-field-flex {

                                .mat-form-field-infix {
                                    border-color: map-get($foreground, divider);

                                    @if ($is-dark == true) {
                                        background-color: map-get($background, hover);
                                    } @else {
                                        background-color: white;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    // Chats sidenav
    chat-chats-sidenav {

        .sidenav-header {

            mat-toolbar {
                border-bottom-color: map-get($foreground, divider);

                .search {
                    background: map-get($background, background);
                    border-color: map-get($foreground, divider);

                    input {
                        background: map-get($background, background);
                        color: map-get($foreground, text);
                    }
                }
            }
        }

        .sidenav-content {

            .contact-list,
            .chat-list {

                .mat-subheader {
                    color: map-get($accent, default);
                }

                .contact {
                    border-bottom-color: map-get($foreground, divider);

                    .contact-last-message {
                        color: map-get($foreground, secondary-text);
                    }

                    .contact-mood {
                        color: map-get($foreground, secondary-text);
                    }
                }
            }
        }
    }
}