React
iOS
Android
Flutter
Angular
JavaScript
Unity
Unreal
Node
Python
Ruby
PHP
Java
.NET
Go
REST@import "~stream-chat-angular/src/assets/styles/scss/index.scss";
/* Your CSS here */
This is documentation for
Stream Chat Angular SDK v4, which is nolonger actively maintained. For up-to-date documentation, see the latest version (v5).
Theming and CSS (deprecated)
This page contains information about the old theming system of the chat UI, this is now deprecated and will be removed in a future release. Please refer to our new theming guide.
Overriding CSS
To override pre-defined library styles, follow this simple process:
Import our bundled CSS into your root stylesheet. We maintain a separate repository, stream-chat-css, which houses all of the SCSS files for the components.
Use the browser inspector or view the library code and locate default styles you wish to override
Add selectors to your local CSS file to override our defaults.
Add your local CSS selectors after Stream’s bundled CSS
Additionally you can override the following CSS variables to better customize the chat UI
For example:
OR
@import "~stream-chat-angular/src/assets/styles/css/index.css";
/* Your CSS here */
Importing SCSS Files
As an alternative to importing our entire style sheet (perhaps, due to it’s size), there’s also the option to easily assemble only what you need by importing individual SCSS files. The imports should happen in your root stylesheet.
If not importing our entire bundled CSS, individually importing the SDK’s SCSS files is the better alternative to copy and pasting our stylesheets and then customizing that code in your application. The CSS in the library does change occasionally, and you want to keep up to date with these to ensure no problems arise by falling behind in important styling updates.
Changing the theme
Our library supports light and dark themes. You can change between the different themes using the ThemeService:
import { ThemeService } from 'stream-chat-angular';
constructor(themeService: ThemeService) {
themeService.theme$.next('dark');
}
The default theme is light.
Example 1 - Light theme
Example 2 - Dark theme
Customizing the theme
You can customize the theme by overriding the CSS variables. The complete list of CSS variables can be found in the stream-chat-css repository.
You can override the variables using the ThemeService. Here is an example:
this.themeService.customLightThemeVariables = {
"--primary-color": "lightgreen",
};
this.themeService.customDarkThemeVariables = {
"--primary-color": "darkgreen",
};
The result:
Example 1 - Custom light theme
Example 2 - Custom dark theme
