@stream-io/stream-chat-css

Version:

Bundled CSS for Stream Chat web SDKs

57 lines (44 loc) • 113 kB

text/mdx

--- id: global-variables sidebar_position: 2 title: Global variables keywords: [v2, theme-v2, theming-v2, theming, global variables] --- import SDKSpecific from './SDKSpecific'; import V2Warning from './V2Warning'; :::info <SDKSpecific name='angular'> <V2Warning themingAndCSSPath='../../concepts/themeing' /> </SDKSpecific> <SDKSpecific name='react'> <V2Warning themingAndCSSPath='../../customization/css_and_theming' /> </SDKSpecific> ::: CSS variables are the easiest way to customize the theme. The variables are organized into two layers: - Global - Component This page contains information about the global variables. Global variables can be grouped into the following categories: - Theme: colors, typography and border radiuses - Layout: spacing (padding and margin) and sizing You can read about each category in detail in the tables below. ## Theme variables ### Colors | Name | Value(s) | Description | Used in | | ------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | `--str-chat__primary-color` | <table><tr><th>`.str-chat,.str-chat__theme-light`</th></tr><tr><td>`var(--str-chat__blue500)`</td></tr><tr><th>`.str-chat__theme-dark`</th></tr><tr><td>`var(--str-chat__blue400)`</td></tr></table> | Used for emphasis, brands can inject their main color using this variable | [AttachmentList](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [AttachmentPreviewList](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss), [Autocomplete](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/Autocomplete/Autocomplete-theme.scss), [Avatar](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/Avatar/Avatar-theme.scss), [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss), [CircleFAButton](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/CircleFAButton/CircleFAButton-theme.scss), [CTAButton](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/CTAButton/CTAButton-theme.scss), [EditMessageForm](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/EditMessageForm/EditMessageForm-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/Message/Message-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/MessageInput/MessageInput-theme.scss), [MessageNotification](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/MessageNotification/MessageNotification-theme.scss) | | `--str-chat__primary-overlay-color` | <table><tr><th>`.str-chat,.str-chat__theme-light`</th></tr><tr><td>`rgba(0, 95, 255, 0.6)`</td></tr><tr><th>`.str-chat__theme-dark`</th></tr><tr><td>`rgba(51, 126, 255, 0.6)`</td></tr></table> | Used for emphasised overlays - color of --str-chat\_\_primary-color with alpha channel | [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/MessageInput/MessageInput-theme.scss) | | `--str-chat__primary-color-low-emphasis` | <table><tr><th>`.str-chat,.str-chat__theme-light`</th></tr><tr><td>`var(--str-chat__blue300)`</td></tr><tr><th>`.str-chat__theme-dark`</th></tr><tr><td>`var(--str-chat__blue700)`</td></tr></table> | Used for emphasis, brands can inject their main color using this variable, it has less emphasis than primary color | [MessageReactionsSelector](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/MessageReactionsSelector/MessageReactionsSelector-theme.scss) | | `--str-chat__active-primary-color` | <table><tr><th>`.str-chat,.str-chat__theme-light`</th></tr><tr><td>`var(--str-chat__blue600)`</td></tr><tr><th>`.str-chat__theme-dark`</th></tr><tr><td>`var(--str-chat__blue600)`</td></tr></table> | Used to indicate that a UI element with primary color is in an active state | [CTAButton](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/CTAButton/CTAButton-theme.scss) | | `--str-chat__on-primary-color` | <table><tr><th>`.str-chat,.str-chat__theme-light`</th></tr><tr><td>`var(--str-chat__grey50)`</td></tr><tr><th>`.str-chat__theme-dark`</th></tr><tr><td>`var(--str-chat__grey50)`</td></tr></table> | If the primary color is used as a background, text/icons are displayed in this color | [Avatar](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/Avatar/Avatar-theme.scss), [CTAButton](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/CTAButton/CTAButton-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/MessageInput/MessageInput-theme.scss), [MessageNotification](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/MessageNotification/MessageNotification-theme.scss) | | `--str-chat__background-color` | <table><tr><th>`.str-chat,.str-chat__theme-light`</th></tr><tr><td>`var(--str-chat__grey50)`</td></tr><tr><th>`.str-chat__theme-dark`</th></tr><tr><td>`var(--str-chat__grey950)`</td></tr></table> | Used as a background color for the main chat UI components | [Channel](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/Channel/Channel-theme.scss), [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss), [MessageList](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/MessageList/MessageList-theme.scss), [VirtualizedMessageList](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/VirtualizedMessageList/VirtualizedMessageList-theme.scss) | | `--str-chat__secondary-background-color` | <table><tr><th>`.str-chat,.str-chat__theme-light`</th></tr><tr><td>`var(--str-chat__grey50)`</td></tr><tr><th>`.str-chat__theme-dark`</th></tr><tr><td>`var(--str-chat__grey900)`</td></tr></table> | Used as a background color for the main chat UI components | [AttachmentList](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [Autocomplete](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/Autocomplete/Autocomplete-theme.scss), [ChannelHeader](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/ChannelHeader/ChannelHeader-theme.scss), [ChannelList](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/ChannelList/ChannelList-theme.scss), [CircleFAButton](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/CircleFAButton/CircleFAButton-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/Message/Message-theme.scss), [MessageActionsBox](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/MessageActionsBox/MessageActionsBox-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/MessageInput/MessageInput-theme.scss), [MessageReactionsSelector](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/MessageReactionsSelector/MessageReactionsSelector-theme.scss), [Modal](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/Modal/Modal-theme.scss), [Thread](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/Thread/Thread-theme.scss), [Tooltip](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/Tooltip/Tooltip-theme.scss) | | `--str-chat__primary-surface-color` | <table><tr><th>`.str-chat,.str-chat__theme-light`</th></tr><tr><td>`var(--str-chat__blue100)`</td></tr><tr><th>`.str-chat__theme-dark`</th></tr><tr><td>`var(--str-chat__blue900)`</td></tr></table> | Used as a background color to give emphasis, but less vibrant than the primary color | [Message](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/Message/Message-theme.scss), [MessageReactionsSelector](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/MessageReactionsSelector/MessageReactionsSelector-theme.scss) | | `--str-chat__primary-surface-color-low-emphasis` | <table><tr><th>`.str-chat,.str-chat__theme-light`</th></tr><tr><td>`var(--str-chat__blue50)`</td></tr><tr><th>`.str-chat__theme-dark`</th></tr><tr><td>`var(--str-chat__blue950)`</td></tr></table> | Used as a background color to give emphasis, but less vibrant than the primary surface color | [MessageReactions](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/MessageReactions/MessageReactions-theme.scss) | | `--str-chat__surface-color` | <table><tr><th>`.str-chat,.str-chat__theme-light`</th></tr><tr><td>`var(--str-chat__grey300)`</td></tr><tr><th>`.str-chat__theme-dark`</th></tr><tr><td>`var(--str-chat__grey700)`</td></tr></table> | A neutral color used to give emphasis to different surfaces | [AttachmentList](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [AttachmentPreviewList](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss), [Autocomplete](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/Autocomplete/Autocomplete-theme.scss), [ChannelList](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/ChannelList/ChannelList-theme.scss), [ChannelPreview](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss), [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss), [CircleFAButton](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/CircleFAButton/CircleFAButton-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/MessageInput/MessageInput-theme.scss), [MessageList](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/MessageList/MessageList-theme.scss), [Thread](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/Thread/Thread-theme.scss) | | `--str-chat__secondary-surface-color` | <table><tr><th>`.str-chat,.str-chat__theme-light`</th></tr><tr><td>`var(--str-chat__grey200)`</td></tr><tr><th>`.str-chat__theme-dark`</th></tr><tr><td>`var(--str-chat__grey800)`</td></tr></table> | A neutral color used to give emphasis to different surfaces | [ChannelPreview](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss), [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/Message/Message-theme.scss), [MessageActionsBox](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/MessageActionsBox/MessageActionsBox-theme.scss) | | `--str-chat__tertiary-surface-color` | <table><tr><th>`.str-chat,.str-chat__theme-light`</th></tr><tr><td>`var(--str-chat__grey100)`</td></tr><tr><th>`.str-chat__theme-dark`</th></tr><tr><td>`var(--str-chat__grey900)`</td></tr></table> | A neutral color used to give emphasis to different surfaces | [Message](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/Message/Message-theme.scss), [MessageReactions](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/MessageReactions/MessageReactions-theme.scss) | | `--str-chat__text-color` | <table><tr><th>`.str-chat,.str-chat__theme-light`</th></tr><tr><td>`var(--str-chat__grey950)`</td></tr><tr><th>`.str-chat__theme-dark`</th></tr><tr><td>`var(--str-chat__grey50)`</td></tr></table> | The main color used for texts/icons | [AttachmentList](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [AttachmentPreviewList](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss), [Autocomplete](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/Autocomplete/Autocomplete-theme.scss), [Channel](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/Channel/Channel-theme.scss), [ChannelList](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/ChannelList/ChannelList-theme.scss), [ChannelPreview](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss), [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss), [ImageCarousel](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/ImageCarousel/ImageCarousel-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/Message/Message-theme.scss), [MessageActionsBox](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/MessageActionsBox/MessageActionsBox-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/MessageInput/MessageInput-theme.scss), [MessageList](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/MessageList/MessageList-theme.scss), [VirtualizedMessageList](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/VirtualizedMessageList/VirtualizedMessageList-theme.scss), [MessageReactions](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/MessageReactions/MessageReactions-theme.scss), [MessageReactionsSelector](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/MessageReactionsSelector/MessageReactionsSelector-theme.scss), [Modal](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/Modal/Modal-theme.scss), [Thread](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/Thread/Thread-theme.scss), [Tooltip](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/Tooltip/Tooltip-theme.scss), [TypingIndicator](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/TypingIndicator/TypingIndicator-theme.scss) | | `--str-chat__text-low-emphasis-color` | <table><tr><th>`.str-chat,.str-chat__theme-light`</th></tr><tr><td>`var(--str-chat__grey500)`</td></tr><tr><th>`.str-chat__theme-dark`</th></tr><tr><td>`var(--str-chat__grey500)`</td></tr></table> | Used for texts/icons that need less emphasis | [AttachmentList](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [AttachmentPreviewList](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss), [Autocomplete](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/Autocomplete/Autocomplete-theme.scss), [Channel](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/Channel/Channel-theme.scss), [ChannelHeader](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/ChannelHeader/ChannelHeader-theme.scss), [ChannelPreview](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss), [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss), [EditMessageForm](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/EditMessageForm/EditMessageForm-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/Message/Message-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/MessageInput/MessageInput-theme.scss), [MessageList](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/MessageList/MessageList-theme.scss), [Modal](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/Modal/Modal-theme.scss), [Thread](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/Thread/Thread-theme.scss), [TypingIndicator](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/TypingIndicator/TypingIndicator-theme.scss) | | `--str-chat__disabled-color` | <table><tr><th>`.str-chat,.str-chat__theme-light`</th></tr><tr><td>`var(--str-chat__grey400)`</td></tr><tr><th>`.str-chat__theme-dark`</th></tr><tr><td>`var(--str-chat__grey600)`</td></tr></table> | Used for displaying disabled UI elements (typically buttons) | [AttachmentList](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [Channel](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/Channel/Channel-theme.scss), [ChannelList](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/ChannelList/ChannelList-theme.scss), [ChannelPreview](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss), [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss), [CTAButton](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/CTAButton/CTAButton-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/Message/Message-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/MessageInput/MessageInput-theme.scss) | | `--str-chat__on-disabled-color` | <table><tr><th>`.str-chat,.str-chat__theme-light`</th></tr><tr><td>`var(--str-chat__grey50)`</td></tr><tr><th>`.str-chat__theme-dark`</th></tr><tr><td>`var(--str-chat__grey50)`</td></tr></table> | Used for text/icon colors if disabled color is used as a background color | [CTAButton](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/CTAButton/CTAButton-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/MessageInput/MessageInput-theme.scss), [Modal](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/Modal/Modal-theme.scss)