Theme
The Mirrorfly UI component is customizable on theme model. On a default Mirrorfly webchat app holds has 2 themes light and dark theme. Customized themes that fit your requirment can also be created by providing colorSet and iconSet.
#
Setup the default themeUIKit for web's Light or Dark theme can be changed using theme prop.
#
Light themeLight theme is a default theme which is rendered without the declaration of theme or passing theme='light'.
#
Dark themeThe Dark theme can be applied by passing theme='dark' in ChatApp component
#
Basic colorSet PropertycolorSet Prop is a style property which is provided with the list of variables where the seperate component layouts color can be changed. On a basic level of colorSet object the colors of the component can be changed.
#
Changed colorSet Props![](/docs/assets/images/RecentChat_Popup-4aaf73b083f27e888a06bb6787429519.png)
![](/docs/assets/images/newChat_Header-68ebb4d32c6b4354904fa58b3dbb64ba.png)
![](/docs/assets/images/Profile_Component-eb996340676729276080779cb96f55fa.png)
![](/docs/assets/images/ChatBubble_Custom-bef6850e458dec118766aa7ba141cb6e.png)
![](/docs/assets/images/ChatBanner_Custom-f5f0b9c0123960a1ec0dc7d5f1c3774f.png)
#
Basic colorSet VariablesThe following table lists the style components of each Components used.
Components | colorSet Variables |
---|---|
Chatapp Background Color | mfBoxLayoutBg |
Overall Theme color | mfThemeColor |
Bright theme color usage | mfThemeColorBright |
Dark theme color usage | mfThemeColorDark |
Theme color in rgb | mfThemeColorRgb |
General All Heading BG color | mfHeadingBg |
Chatapp Banner colorSet | mfBgcStartchatBannerLink |
#
ColorSetThe ColorSet is the set of colors provided by UIKit for Web and is fully customizable.