Styles for dark/light theme are leaking to other components

[ghost]

Given the following example:

<h1 class="dark-theme">Some header</h1>
<ng-chat [adapter]="adapter" [userId]="userId"></ng-chat>

The <h1> element will inherit the styles for "dark-theme", even though it is not part of ng-chat.

The ng-chat decorator uses encapsulation: core.ViewEncapsulation.None, so the generated styles for "dark-theme" or "light-theme" will be applied to any element of the Angular app that match the class name "dark-theme":

.dark-theme,.dark-theme .primary-text{color:#fff;font-family:Arial,Helvetica,sans-serif}.dark-theme .primary-background{background-color:#565656}.dark-theme .secondary-background{background-color:#444}.dark-theme .primary-outline-color{border-color:#353535}.dark-theme .friends-search-bar{background-color:#444;border:1px solid #444;color:#fff}.dark-theme .ng-chat-people-action,.dark-theme .ng-chat-people-action>i,.dark-theme .unread-messages-counter-container{background-color:#fff;color:#444}.dark-theme .load-history-action{background-color:#444}.dark-theme .chat-window-input{background-color:#444;color:#fff}.dark-theme .file-message-container,.dark-theme .sent-chat-message-container{border-color:#444;background-color:#444}.dark-theme .file-message-container.received,.dark-theme .received-chat-message-container{background-color:#565656;border-color:#444}.dark-theme .ng-chat-footer{background-color:#444}

A quick solution would be to add a custom prefix to all generated styles. If the basic class is changed to ng-chat-dark-theme then no other components in Angular should be affected.

[rpaschoal]

Hi @centigrade-thomas-becker ,

Thanks for pointing this out! Will consider this enhancement for a next release!

Cheers

[rpaschoal]

Hi @centigrade-thomas-becker ,

I haven't released this with 2.0.5 but I'm still planning to release this at some point.

Cheers.

[ghost]

Another solution would be to add the element name to the css rules, like ng-chat.dark-theme. What do you think which solution would be better?

[rpaschoal]

Hi @centigrade-thomas-becker , I think that adding a selector prefix to it would be ideal (Such as .ng-chat).

Would you be comfortable in getting a PR for this? If you want to work around this just remember to do some dev testing around the default light and dark themes and also to test the custom theme support as well.

Cheers

[ghost]

Sorry, I am short on time right now.

[rpaschoal]

The changes discussed here were released with https://github.com/rpaschoal/ng-chat/releases/tag/3.0.1

The changes were pushed with this pull request: https://github.com/rpaschoal/ng-chat/pull/156