Skip to content

Customize Colors & Themes

Kristiyan Petrov edited this page Apr 26, 2022 · 5 revisions

For both the Call and the Chat, three themes are available:

  • Day (light theme)
  • Night (dark theme)
  • DayNight (change the theme according to the system settings).

By default the Chat is set to Day and the Call to Night with Day Whiteboard

Change Chat Theme

Copy and paste one of the following styles in values/themes.xml

<!-- Use Chat in Day mode only-->	
<style name="KaleyraCollaborationSuiteUI.Theme.Chat" parent="KaleyraCollaborationSuiteUI.Theme.Chat.Day"/>
    
<!-- Use Chat in Night mode only-->	
<style name="KaleyraCollaborationSuiteUI.Theme.Chat" parent="KaleyraCollaborationSuiteUI.Theme.Chat.Night"/>
    
<!-- Use Chat in Day&Night-->	
<style name="KaleyraCollaborationSuiteUI.Theme.Chat" parent="KaleyraCollaborationSuiteUI.Theme.Chat.DayNight"/>

Change Call Theme

Copy and paste one of the following styles in values/themes.xml

<!-- Use Call in Day mode only-->	
<style name="KaleyraCollaborationSuiteUI.Theme.Call" parent="KaleyraCollaborationSuiteUI.Theme.Call.Day"/>
    
<!-- Use Call in Night mode only-->	
<style name="KaleyraCollaborationSuiteUI.Theme.Call" parent="KaleyraCollaborationSuiteUI.Theme.Call.Night"/>
    
<!-- Use Call in Day&Night-->	
<style name="KaleyraCollaborationSuiteUI.Theme.Call" parent="KaleyraCollaborationSuiteUI.Theme.Call.DayNight"/>

Theme Customization Example

The example shows the minimum necessary changes to perform a theme customization by only changing the secondary colors for the Day/Night/ DayNight mode for call and chat.

<!-- Define call theme attributes -->
<style name="KaleyraCollaborationSuiteUI.Theme.Call" parent="KaleyraCollaborationSuiteUI.Theme.Call.Night">
    <item name="colorSecondary">#AB47BC</item>
    <item name="colorOnSecondary">#FFFFFF</item>
</style>

<!-- Define chat theme attributes -->
<style name="KaleyraCollaborationSuiteUI.Theme.Chat" parent="KaleyraCollaborationSuiteUI.Theme.Chat.Day">
     <item name="colorSecondary">#AB47BC</item>
     <item name="colorOnSecondary">#FFFFFF</item>
</style>

Customized Chat

Customized Call