Chat UI theme
NbChatComponent
| Name | Theme Variable | Default Value | Description |
| chat-background-color | background-basic-color-1 | #ffffff | |
| chat-border | none | ||
| chat-border-radius | border-radius | 0.25rem | |
| chat-shadow | shadow | 0, 0.5rem, 1rem, 0, rgba(44, 51, 73, 0.1) | |
| chat-padding | 1rem, 1.25rem | ||
| chat-scrollbar-color | scrollbar-color | #e4e9f2 | |
| chat-scrollbar-background-color | scrollbar-background-color | #f7f9fc | |
| chat-scrollbar-width | scrollbar-width | 0.3125rem | |
| chat-text-color | text-basic-color | #222b45 | |
| chat-text-font-family | text-paragraph-font-family | Open Sans, sans-serif | |
| chat-text-font-size | text-paragraph-font-size | 0.9375rem | |
| chat-text-font-weight | text-paragraph-font-weight | 400 | |
| chat-text-line-height | text-paragraph-line-height | 1.25rem | |
| chat-header-text-font-family | text-subtitle-font-family | Open Sans, sans-serif | |
| chat-header-text-font-size | text-subtitle-font-size | 0.9375rem | |
| chat-header-text-font-weight | text-subtitle-font-weight | 600 | |
| chat-header-text-line-height | text-subtitle-line-height | 1.5rem | |
| chat-tiny-height | 13.5rem | ||
| chat-small-height | 21rem | ||
| chat-medium-height | 28.5rem | ||
| chat-large-height | 36rem | ||
| chat-giant-height | 43.5rem | ||
| chat-basic-background-color | background-basic-color-1 | #ffffff | |
| chat-basic-text-color | text-basic-color | #222b45 | |
| chat-primary-background-color | color-primary-default | #3366ff | |
| chat-primary-text-color | text-control-color | #ffffff | |
| chat-success-background-color | color-success-default | #00d68f | |
| chat-success-text-color | text-control-color | #ffffff | |
| chat-info-background-color | color-info-default | #0095ff | |
| chat-info-text-color | text-control-color | #ffffff | |
| chat-warning-background-color | color-warning-default | #ffaa00 | |
| chat-warning-text-color | text-control-color | #ffffff | |
| chat-danger-background-color | color-danger-default | #ff3d71 | |
| chat-danger-text-color | text-control-color | #ffffff | |
| chat-control-background-color | color-control-default | #ffffff | |
| chat-control-text-color | color-basic-800 | #222b45 | |
| chat-divider-color | divider-color | #edf1f7 | |
| chat-divider-style | divider-style | solid | |
| chat-divider-width | divider-width | 1px | |
| chat-message-background | color-primary-default | #3366ff | |
| chat-message-text-color | text-control-color | #ffffff | |
| chat-message-reply-background-color | background-basic-color-2 | #f7f9fc | |
| chat-message-reply-text-color | text-basic-color | #222b45 | |
| chat-message-avatar-background-color | color-basic-500 | #c5cee0 | |
| chat-message-sender-text-color | text-hint-color | #8f9bb3 | |
| chat-message-quote-background-color | background-basic-color-2 | #f7f9fc | |
| chat-message-quote-text-color | text-hint-color | #8f9bb3 | |
| chat-message-file-text-color | text-hint-color | #8f9bb3 | |
| chat-message-file-background-color | rgba(0, 0, 0, 0) |
NbChatMessageComponent
| Name | Theme Variable | Default Value | Description |
| chat-message-background | color-primary-default | #3366ff | |
| chat-message-text-color | text-control-color | #ffffff | |
| chat-message-reply-background-color | background-basic-color-2 | #f7f9fc | |
| chat-message-reply-text-color | text-basic-color | #222b45 | |
| chat-message-avatar-background-color | color-basic-500 | #c5cee0 | |
| chat-message-sender-text-color | text-hint-color | #8f9bb3 | |
| chat-message-quote-background-color | background-basic-color-2 | #f7f9fc | |
| chat-message-quote-text-color | text-hint-color | #8f9bb3 | |
| chat-message-file-text-color | text-hint-color | #8f9bb3 | |
| chat-message-file-background-color | rgba(0, 0, 0, 0) |
Previous page
Calendar
Next page
Need some help or found an issue?
Ask on Stack Overflow with tag `nebular` or post an issue on GitHub.