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 theme#

UIKit for web's Light or Dark theme can be changed using theme prop.

Light theme#

Light theme is a default theme which is rendered without the declaration of theme or passing theme='light'.

        <ChatApp 
            licenseKey="********************" 
            userIdentifier="**************"
            theme='light'
         />

light-theme

Dark theme#

The Dark theme can be applied by passing theme='dark' in ChatApp component

        <ChatApp 
            licenseKey="********************" 
            userIdentifier="**************"
            theme='dark'
         />

dark-theme

Basic colorSet Property#

colorSet 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.

        const customColorSet={
            mfBoxLayoutBg: "#0ab7921f",
            mfThemeColor: "#00a884",
            mfThemeColorBright: "#0ab792",
            mfThemeColorDark: "#008069",
            mfThemeColorRgb: "0,128,105",
            mfHeadingBg: "#008069",
            mfBgcStartchatBannerLink: "#0ab792"
        }

        <ChatApp 
            licenseKey="********************" 
            userIdentifier="**************"
            colorSet={customColorSet}
            />

Changed colorSet Props#

Basic colorSet Variables#

The 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`

ColorSet#

The ColorSet is the set of colors provided by UIKit for Web and is fully customizable.

const customColorSet={
    boxLayoutBg: "#D8DBE3",
    parentTopGap: " 0px",
    maxParentheight: " calc(100vh - var(--parent-top-gap))",
    themeColor: " rgba(0, 168, 132,1)",
    themeColorBright: " #0cc19a",
    themeColorDark: " #0c7c64",
    themeColorRGB: " 0, 168, 132",
    headingBackground: " var(--mf-theme-color)",
    themeColorHighlight: " rgba(var(--mf-theme-color-rgb, 0.8))",
    listHoverBg: " rgba(var(--mf-theme-color-rgb), 0.09)",
    chatBadge: " rgba(var(--mf-theme-color-rgb), 0.2)",
    recentChatlistBGC: "white",
    primaryDark: "  #000000",
    secondaryDark: " #181818",
    secondaryLight: " #333333",
    dangerHightlight: " #e24848",
    chatSubDetails: " #73777e",
    textLight: " var(--mf-theme-color)",
    chatUserGroupName: " var(--mf-theme-color-dark)",
    
    // chat properties
    borderCommon: "#efefef",
    userStatusSent: " #808080",
    userStatusReceive: " #ffa500",
    chatBubbleLinkColor: " var(--mf-theme-color)",
    userStatusSeen: " rgb(0, 226, 75)",
    recentChatIcon: " rgb(118, 118, 118)",
    chatBubbleSenderStarIcon: " #fff",
    chatBubbleReceiverStarIcon: " #fff",
    chatBubbleReceiverBg: " #fff",
    chatBubbleReceiverText: " #444343",
    chatBubbleSenderBg: " var(--mf-theme-color-bright)",
    chatBubbleSenderText: " White",
    chatBadgeText: " var(--mf-secondary-light)",
    searchInputBg: " #f1f3f4",
    attachmentBg: " rgba(var(--mf-theme-color-rgb), 0.08)",
    attachmentIconBg: " #0f2a5f",
    msgTime: " var(--mf-secondary-light)",
    sendMessageTime: " #949494",
    revMessageTime: " #fff",
    recentChatConversionBg: " #fff",
    chatConversionBg: "#fff",

    // Icons color
    iconsContactinfo: " #313131",
    iconsDropdownOptions: " rgba(var(--mf-theme-color-rgb), 0.9)",
    iconsRecentchatHeader: " #828282",
    attachmentDropdownOptions: " rgba(var(--mf-theme-color-rgb), 0.9)",
    iconsContactinfoDanger: " var(--mf-danger-hightlight)",

    // active inactive option
    optionActive: " var(--mf-theme-color)",
    optionActiveLight: " var(--mf-theme-color-rgb, 0.5)",
    bgHoverCircle: "#f1f3f4",
    attachmentColorIcon: " #fff"
}