Theming and CSS (deprecated)

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.

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