Skip to main content

Theming and CSS (deprecated)

caution

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:

@import "~stream-chat-angular/src/assets/styles/scss/index.scss";

/* Your CSS here */

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.

note

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

Did you find this page helpful?