Skip to main content

Style your SDK

Diyalog SDK provides custom Diyalog style to your application, using Diyalog style customer can create own styled screen.

How to use custom style?#

First create object of DiyalogStyle class from your application class, and using that object you can access all property of DiyaLogStyle class.

  • Diyalog style is optional. If customer don't wants to use custom style then SDK will use default style

Sample code:#

var style: DiyalogStyle { return DiyalogEngine.diyalogInstance().style };
style.chatBgColor = .white

More options?#

Followings are styles parameters with the help of those parameters User can configure style within their Application:

Dark mode#

Set Main App in Dark Mode

DiyalogEngine.diyalogInstance().style.setisDarkApp(true)

Common View style#

Change all bacground colors in Diyalog SDK screens.

DiyalogEngine.diyalogInstance().style.setvcBgColor(UIColor(red: 19 / 255.0, green: 18.0 / 255.0, blue: 28.0 / 255.0, alpha: 1.0))
DiyalogEngine.diyalogInstance().style.setvcBackyardColor(UIColor(red: 19 / 255.0, green: 18.0 / 255.0, blue: 28.0 / 255.0, alpha: 1.0))
DiyalogEngine.diyalogInstance().style.setvcDefaultBackgroundColor(UIColor(red: 19 / 255.0, green: 18.0 / 255.0, blue: 28.0 / 255.0, alpha: 1.0))

Diyalog TabBar Color#

// Mesajlar ekranındaki UITabBarItem arka planını ve chat ekranı input alanlarının arka planlarını ayarlar
DiyalogEngine.diyalogInstance().style.setvcPanelBgColor(UIColor(red: 19 / 255.0, green: 18.0 / 255.0, blue: 28.0 / 255.0, alpha: 1.0))

Colors in Diyalog Views#

Text color in views#

DiyalogEngine.diyalogInstance().style.setvcTextColor(.white)

Tint color in views#

This setting change all active text colors like:

  • Color of all buttons and action buttons
  • Selected UITabBarItem text color (if not set indiviudally)
  • All UITable title and text colors (if not set indiviudally)
  • Read Status tick color (if not set indiviudally)
  • User presense status info color (if not set indiviudally)
DiyalogEngine.diyalogInstance().style.setvcTintColor(UIColor(rgb: 0x5085cb))

Hint color in views#

This setting change secondary and passive text colors in views like :

  • texts other than main texts (hint, label, date, pssive status informations.)
  • Not selected UITabBarItem text color (if not set indiviudally)
  • All UITable secondary elements text colors (if not set indiviudally)
  • Send, delivered Status tick color (if not set indiviudally)
  • Date text in Dailog lists (if not set indiviudally)
DiyalogEngine.diyalogInstance().style.setvcHintColor(UIColor(red: 164 / 255.0, green: 164 / 255.0, blue: 164 / 255.0, alpha: 1))

Separator color#

DiyalogEngine.diyalogInstance().style.setvcSeparatorColor(.white)

Selected Items color#

This setting set color for all selected items in views.

DiyalogEngine.diyalogInstance().style.setvcSelectedColor(.darkGray)

Switch buttons colors#

DiyalogEngine.diyalogInstance().style.setvcSwitchOff(UIColor(rgb: 0xe6e6e6))
DiyalogEngine.diyalogInstance().style.setvcSwitchOn(UIColor(rgb: 0x4bd863))

Navigation Bar#

Navigation Background colors#

DiyalogEngine.diyalogInstance().style.setnavigationBgColor(UIColor(red: 19 / 255.0, green: 18.0 / 255.0, blue: 28.0 / 255.0, alpha: 1.0))

Navigation Tint colors#

DiyalogEngine.diyalogInstance().style.setnavigationTintColor(.white)

Navigation Bar Style#

DiyalogEngine.diyalogInstance().style.setvcStatusBarStyle(.lightContent)

Navigation Title color#

DiyalogEngine.diyalogInstance().style.setnavigationTitleColor(.white)

Search Bars#

Search bar background color#

DiyalogEngine.diyalogInstance().style.searchBackgroundColor = UIColor(red: 19 / 255.0, green: 18.0 / 255.0, blue: 28.0 / 255.0, alpha: 1.0)

Search bar input field background#

DiyalogEngine.diyalogInstance().style.searchFieldBgColor = UIColor(red: 58.0 / 255.0, green: 65.0 / 255.0, blue: 85.0 / 255.0, alpha: 1.0)

Search bar text color#

DiyalogEngine.diyalogInstance().style.searchFieldTextColor = .white

Search bar cancel button color#

DiyalogEngine.diyalogInstance().style.searchCancelColor = UIColor(rgb: 0x5085cb)

Chat Screen Colors Settings#

Chat screen background color#

DiyalogEngine.diyalogInstance().style.setChatBgColor(UIColor(red: 19 / 255.0, green: 18.0 / 255.0, blue: 28.0 / 255.0, alpha: 1.0))

Received text message bubble background color#

DiyalogEngine.diyalogInstance().style.setchatTextBubbleInColor(UIColor(red: 58.0 / 255.0, green: 65.0 / 255.0, blue: 85.0 / 255.0, alpha: 1.0))

Received text message bubble border color#

DiyalogEngine.diyalogInstance().style.setchatTextBubbleInBorderColor(UIColor(red: 58.0 / 255.0, green: 65.0 / 255.0, blue: 85.0 / 255.0, alpha: 1.0))

Received text message text color#

DiyalogEngine.diyalogInstance().style.chatTextInColor(.white)

Received text message date color#

DiyalogEngine.diyalogInstance().style.setchatTextDateInColor(.lightGray)

Received media message bubble background color#

DiyalogEngine.diyalogInstance().style.setchatMediaBubbleInColor(UIColor(red: 32.0 / 255.0, green: 34.0 / 255.0, blue: 45.0 / 255.0, alpha: 1.0))

Received media message date background color#

DiyalogEngine.diyalogInstance().style.setchatMediaDateBgInColor(.blue)

Received media message date text color#

DiyalogEngine.diyalogInstance().style.setchatMediaDateInColor(.darkGray)

Received media message date text color#

DiyalogEngine.diyalogInstance().style.setchatMediaDateInColor(.darkGray)

Sent media message bubble background color#

DiyalogEngine.diyalogInstance().style.setchatMediaBubbleOutColor(UIColor(red: 75.0 / 255.0, green: 146.0 / 255.0, blue: 226.0 / 255.0, alpha: 1.0))

Sent text message bubble background color#

DiyalogEngine.diyalogInstance().style.setchatTextBubbleOutColor(UIColor(red: 75.0 / 255.0, green: 146.0 / 255.0, blue: 226.0 / 255.0, alpha: 1.0))

Sent text message bubble border color#

DiyalogEngine.diyalogInstance().style.setchatTextBubbleOutBorderColor(UIColor(red: 75.0 / 255.0, green: 146.0 / 255.0, blue: 226.0 / 255.0, alpha: 1.0))

Sent text message text color#

DiyalogEngine.diyalogInstance().style.chatTextOutColor = UIColor.white

Sent text message date color#

DiyalogEngine.diyalogInstance().style.setchatTextDateOutColor(UIColor(red: 242.0 / 255.0, green: 242.0 / 255.0, blue: 242.0 / 255.0, alpha: 1.0))

Sent media message date color#

DiyalogEngine.diyalogInstance().style.setchatMediaDateOutColor(UIColor(red: 242.0 / 255.0, green: 242.0 / 255.0, blue: 242.0 / 255.0, alpha: 1.0))

New messages Separator background color#

DiyalogEngine.diyalogInstance().style.setchatUnreadBgColor(UIColor(red: 58.0 / 255.0, green: 65.0 / 255.0, blue: 85.0 / 255.0, alpha: 1.0))

Service Messages bubble color#

DiyalogEngine.diyalogInstance().style.setchatServiceBubbleColor(UIColor(red: 58.0 / 255.0, green: 65.0 / 255.0, blue: 85.0 / 255.0, alpha: 1.0))

Voice message Slider Color#

DiyalogEngine.diyalogInstance().style.audioCellSliderLeftInColor = .lightGray
DiyalogEngine.diyalogInstance().style.audioCellSliderRightInColor = .darkGray
DiyalogEngine.diyalogInstance().style.audioCellSliderLeftOutColor = .white
DiyalogEngine.diyalogInstance().style.audioCellSliderRightOutColor = .darkGray

Message Status tick colors#

DiyalogEngine.diyalogInstance().style.chatStatusRead = UIColor(red: 127.0 / 255.0, green: 253.0 / 255.0, blue: 242.0 / 255.0, alpha: 1.0)
DiyalogEngine.diyalogInstance().style.chatStatusSent = UIColor.white
DiyalogEngine.diyalogInstance().style.chatStatusReceived = UIColor.white

Chat Actionsheet Settings#

Background color#

DiyalogEngine.diyalogInstance().style.setActionSheetBackgroundColor(UIColor.white)

Tint Colors#

DiyalogEngine.diyalogInstance().style.setActionSheetButtonTintColor(UIColor(red: 5.0 / 255.0, green: 124.0 / 255.0, blue: 226.0 / 255.0, alpha: 1))
DiyalogEngine.diyalogInstance().style.setActionSheetBackgroundColor(UIColor.clear)

Camera Button Colors#

DiyalogEngine.diyalogInstance().style.actionSheetButtonCameraTintColor = UIColor(red: 5.0 / 255.0, green: 124.0 / 255.0, blue: 226.0 / 255.0, alpha: 1)
DiyalogEngine.diyalogInstance().style.actionSheetButtonCameraBackgroundColor = UIColor.clear

Lirary Button Colors#

DiyalogEngine.diyalogInstance().style.actionSheetButtonLibraryTintColor = UIColor(red: 5.0 / 255.0, green: 124.0 / 255.0, blue: 226.0 / 255.0, alpha: 1)
DiyalogEngine.diyalogInstance().style.actionSheetButtonLibraryBackgroundColor = UIColor.clear

Location Button Colors#

DiyalogEngine.diyalogInstance().style.actionSheetButtonLocationTintColor = UIColor(red: 5.0 / 255.0, green: 124.0 / 255.0, blue: 226.0 / 255.0, alpha: 1)
DiyalogEngine.diyalogInstance().style.actionSheetButtonLocationBackgroundColor = UIColor.clear

Contact Button Colors#

DiyalogEngine.diyalogInstance().style.actionSheetButtonContactTintColor = UIColor(red: 5.0 / 255.0, green: 124.0 / 255.0, blue: 226.0 / 255.0, alpha: 1)
DiyalogEngine.diyalogInstance().style.actionSheetButtonContactBackgroundColor = UIColor.clear

Cancel Button Colors#

DiyalogEngine.diyalogInstance().style.actionSheetButtonCancelTintColor = UIColor(red: 5.0 / 255.0, green: 124.0 / 255.0, blue: 226.0 / 255.0, alpha: 1)
DiyalogEngine.diyalogInstance().style.actionSheetButtonCancelBackgroundColor = UIColor.red

Action Sheet Separator Colors#

Set all separator colors with

DiyalogEngine.diyalogInstance().style.setActionSheetSeparatorColor(UIColor(red: 230.0 / 255.0, green: 230.0 / 255.0, blue: 230.0 / 255.0, alpha: 0.6))

or you can set each action sheet separator colors individually

DiyalogEngine.diyalogInstance().style.actionSheetSeparator1Color = UIColor(red: 223.9 / 255.0, green: 223.9 / 255.0, blue: 223.9 / 255.0, alpha: 0.6)
DiyalogEngine.diyalogInstance().style.actionSheetSeparator2Color = UIColor(red: 230.0 / 255.0, green: 230.0 / 255.0, blue: 230.0 / 255.0, alpha: 0.6)
DiyalogEngine.diyalogInstance().style.actionSheetSeparator3Color = UIColor(red: 230.0 / 255.0, green: 230.0 / 255.0, blue: 230.0 / 255.0, alpha: 0.6)
DiyalogEngine.diyalogInstance().style.actionSheetSeparator4Color = UIColor(red: 230.0 / 255.0, green: 230.0 / 255.0, blue: 230.0 / 255.0, alpha: 0.6)
DiyalogEngine.diyalogInstance().style.actionSheetSeparator4Color = UIColor(red: 230.0 / 255.0, green: 230.0 / 255.0, blue: 230.0 / 255.0, alpha: 0.6)
DiyalogEngine.diyalogInstance().style.actionSheetSeparator5Color = UIColor(red: 230.0 / 255.0, green: 230.0 / 255.0, blue: 230.0 / 255.0, alpha: 0.6)
DiyalogEngine.diyalogInstance().style.actionSheetSeparator6Color = UIColor(red: 230.0 / 255.0, green: 230.0 / 255.0, blue: 230.0 / 255.0, alpha: 0.6)

Call Background Colors#

DiyalogEngine.diyalogInstance().style.setCallBackgroundColor(UIColor(red: 7.0 / 255.0, green: 78 / 255.0, blue: 154.0 / 255.0, alpha: 1.0))

Online Help Views Colors#

DiyalogEngine.diyalogInstance().style.setOnlineHelpNavigationBackgroundColor(UIColor(red: 18, green: 18, blue: 18))
DiyalogEngine.diyalogInstance().style.setOnlineHelpBackgroundColor(UIColor(red: 18, green: 18, blue: 18))
DiyalogEngine.diyalogInstance().style.setOnlineHelpNavigationBarTitleColor(.white)
DiyalogEngine.diyalogInstance().style.setOnlineHelpTextColor(.white)
DiyalogEngine.diyalogInstance().style.setOnlineHelpToolBarTitleImage(UIImage.bundled("toolbar_icon")!) // set toolbar icon, if you want
DiyalogEngine.diyalogInstance().style.setShowOnlineHelpAvatarImage(false) // disable agent avatar
DiyalogEngine.diyalogInstance().style.setOnlineHelpCustomAgentAvatarImg(UIImage.bundled("agent_icon")!) // set agent avatar image
DiyalogEngine.diyalogInstance().style.setOnlineHelpBackIcon(UIImage.bundled("back_icon")!) // set back icon in chat screen, if you want