How do i implement customtheme

[keithlim]

can anyone help me in loading the custom theme for ng-chat? Im not exactly sure the proper way of inserting the css into the code, what i've done so far isnt working. Any help will be greatly appreciated!

In my app.component.html im using

<ng-chat [adapter]="adapter" [userId]="userId" [title]="title" [theme]="theme" [customTheme]="customTheme">
</ng-chat>

and in my app.component.ts im using

theme = Theme.Custom
customTheme = "./ng-chat.css"

and in my ng-chat.css im using

#ng-chat.custom-theme .primary-background {
  background-color: blue;
}

[duzenko]

@rpaschoal ?

[rpaschoal]

Hi @keithlim and @duzenko ,

Check this file as an example on the styles that can be customized: https://github.com/rpaschoal/ng-chat/blob/master/src/ng-chat/assets/themes/ng-chat.theme.dark.scss

If your custom styles are not reflecting your ng-chat.css file it could be that it is failing to load the customTheme path you are supplying. In the end it just tries to load it as an href. You can check it out here on the first line: https://github.com/rpaschoal/ng-chat/blob/master/src/ng-chat/ng-chat.component.html

The component has ViewEncapsulation set to none so even if not using a custom theme you should be able to override the styles as a last resort.